图片上传

/**
 * @method uploadImg 上传图片处理
 * @param  dom  dom元素
 * @param  callback 上传图片后的回调处理
 * @param  imgSet 设置图片的宽高及quality模糊度
 */
function uploadImg(dom,callback,imgSet={}) {
  // 通过dom读取文件数据;是个伪数组(可一次选择多张图片)，要使用数组遍历并转为base64;
  let files = dom.files;
  for(let i = 0; i<files.length; i++) {
    let reader = new FileReader();
    reader.readAsDataURL(files[i]);
    reader.onload = (e) =>{
      let imgCode = e.target.result;
      canvasDataUrl(imgCode,callback,imgSet);
      // 可多次上传同一张图片;
      dom.setAttribute('type', 'txt');
      dom.setAttribute('type',"file");
    }
  };
};
function canvasDataUrl(path,callback,imgSet) {
  let img = new Image();
  img.src = path;
  img.onload = function() {
    // 上图图片的原始宽高;
    let w = this.width,
        h = this.height,
        scale = w / h;
    // 如果imgSet有值，则优先选择imgSet;
    w = imgSet.width || w;
    h = imgSet.height || (w / scale);
    let quality = 0.4;
    //生成canvas
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    // 创建属性节点
    let anw = document.createAttribute("width");
    anw.nodeValue = w;
    let anh = document.createAttribute("height");
    anh.nodeValue = h;
    canvas.setAttributeNode(anw);
    canvas.setAttributeNode(anh);
    ctx.drawImage(this, 0, 0, w, h);
    // 图像质量
    if(imgSet.quality && imgSet.quality <= 1 && imgSet.quality > 0){
      quality = imgSet.quality;
    }
    // quality值越小，所绘制出的图像越模糊,返回压缩后base64的值
    let base64 = canvas.toDataURL('image/png', quality);
    callback(base64);
  }
}
export default uploadImg;