vue图片压缩

js封装

/**
 * 图片压缩
 */
export function picWM1({
  file=null,
  cb = null,
}) {


  if(file){

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
  // 先new一个img和fileReader的实例
  const img = new Image()
  const reader = new FileReader()// 读取文件资源
  reader.readAsDataURL(file) 
  let maxWidth = 1024  //img.naturalWidth/5
  let maxHeight = 768 //img.naturalHeight/5
  
  reader.onload = function(e){ 
   img.src = e.target.result

  img.onload = function () {
        
  let originWidth = img.naturalWidth
  let originHeight = img.naturalHeight


 
     // 目标尺寸
     var naturalWidth = originWidth,
     naturalHeight = originHeight;
    // 图片尺寸超过400x400的限制
    if(originWidth > maxWidth || originHeight > maxHeight) {
        if(originWidth / originHeight > maxWidth / maxHeight) {
            // 更宽，按照宽度限定尺寸
            naturalWidth = maxWidth;
            naturalHeight = Math.round(maxWidth * (originHeight / originWidth));
        } else {
            naturalHeight = maxHeight;
            naturalWidth = Math.round(maxHeight * (originWidth / originHeight));
        }
    }


      canvas.width = naturalWidth;
      canvas.height = naturalHeight;

      ctx.drawImage(img, 0, 0, naturalWidth, naturalHeight);
      const base64Url = canvas.toDataURL('image/jpeg');//   canvas.toDataURL();
      var imgFile = dataURLtoFile( base64Url, formatDate(new Date(),'yyyyMMddhhmmss')+'.jpg');
      //imgFile.src = base64Url;
      cb && cb(imgFile);
   // return imgFile
  }
}

  // return ''
}
}

使用

picWM1({
    file: fil.file,
    cb: (canvasfile) => {

    }
})