前端学习之路——图片上传压缩

废话不多少，直接上代码！

压缩图片函数

 function canvasDataURL(path, obj, callback){
       var img = document.createElement('img');
             img.src = path;
             img.onload = function(){
              var that = this;
              //  默认按比例压缩
              var w = that.width,
               h = that.height,
               scale = w / h;
               w = obj.width || w;
               h = obj.height || (w / scale);
              var quality = 0.7;  // 默认图片质量为0.7
              // 生成canvas
              var canvas = document.createElement('canvas');
              var ctx = canvas.getContext('2d');
              //  创建属性节点
              var anw = document.createAttribute("width");
              anw.nodeValue = w;
              var anh = document.createAttribute("height");
              anh.nodeValue = h;
              canvas.setAttributeNode(anw);
              canvas.setAttributeNode(anh); 
              ctx.drawImage(that, 0, 0, w, h);
              //  图像质量
              if(obj.quality && obj.quality <= 1 && obj.quality > 0){
               quality = obj.quality;
              }
              // quality值越小，所绘制出的图像越模糊
              var base64 = canvas.toDataURL('image/jpeg', quality);
              // 回调函数返回base64的值
              callback(base64);
            }
        }；

调用函数

canvasDataURL("img/c6.png", {
//  注意：在pc端可以用绝对路径或相对路径，移动端最好用绝对路径（因为用take photo后的图片路径，我没有试成功（如果有人试成功了可以分享一下经验））
   width : 300,
   height:100,
   quality:0.7
}, function(base){
//直接将获取到的base64的字符串，放到一个image标签中就可看到测试后的压缩之后的样式图了
 document.getElementById("transform").src = base;
 console.log("压缩后：" + base.length / 1024 + " " + base);　　　　
})

图片上传与压缩

<img id="transform" src="img/c6.png"/>
 <input type="file" onchange="file(event)" />
<script>
function file(ev) {
    console.log(ev.target.files[0])
    var files = ev.target.files[0]
    var reade = new FileReader()
    reade.readAsDataURL(ev.target.files[0])
    reade.onload = function (data) {
        // console.log(data.target.result)
        canvasDataURL(data.target.result, { quality:0.7}, function(base){
//直接将获取到的base64的字符串，放到一个image标签中就可看到测试后的压缩之后的样式图了
 document.getElementById("transform").src = base;
 console.log("压缩后：" + base.length / 1024 + " " + base);　　　　
})；
    }
}；
<script>

图片上传与压缩就是这么简单，欢迎大家点评指导。