惠学宝web技术

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

2018-01-04  本文已影响74人  追风少年_hxb

废话不多少,直接上代码!

压缩图片函数
 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>

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

上一篇 下一篇

猜你喜欢

热点阅读