循环出来的图片转 base64 压缩

大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器；
有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库；
有时候后它还有可能是一块canvas画布，或者是一个Image对象，或者直接就是一个图片的url地址，我们需要将它们压缩上传到远程。

这里我们介绍对一个图片地址进行压缩显示。原理就是，通过js 解析url地址，把解析出来的图片从新绘制到dom 元素上

<img :id="'img'+index" src=""  v-for="(item,index) in list" :key="index" />



// 压缩图片的方法
function canvasDataURL(path, obj, callback){
    
    
    var img = new Image();
    img.src = path;
    img.setAttribute("crossOrigin",'Anonymous')
    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);
    }
}

//后端返回的图片列表
if(res.data.code===200) {
    
    
  this.list= res.data.data
  let url
  this.list.forEach((item,index) => {
    
    
    url = 'http://baidu.com'+item.imgurl
    canvasDataURL(url,{
    
    quality:0.1},function(base64){
    
    
        // $('#cunImg').val(base64)
        // $('#showImg').attr('src',base64)
        document.getElementById("img"+index).setAttribute("src", base64)

    })
  });
}