H5js前端压缩图片

1.压缩图片是通过canvas做到的。

具体原理【1】先获取图片的原始尺寸【2】确定压缩后的图片尺寸，（就是将图片尺寸都缩小达到压缩目的）【3】在canvas画布上重新画一遍这个缩小后尺寸的图片【4】把该图片转为blob格式进行发送或者其他进一步的处理。其中successF为成功后的回调函数。该方法是在uni-app中用的，所以先用的uni.getImageInfo获取原本的图片尺寸。这里需要注意的是，如果没有采用ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);这一步重画图片，直接到把canvas转为blob格式，会出现图片是全黑色的。必须通过drawImage方法重新绘制图片，才能得到压缩后的图片信息。

代码如下

xport function handleImage(src,type,successF){
    uni.getImageInfo({
            src: src,
            success: function (res) {
              let canvasWidth = res.width //图片原始长宽
              let canvasHeight = res.height;
              let base = canvasWidth/canvasHeight;
              if(canvasWidth>500){
                  canvasWidth = 500;
                  canvasHeight = Math.floor(canvasWidth/base);
              }
              //进行压缩
              let canvas = document.createElement('canvas');
              let ctx = canvas.getContext('2d');
              canvas.width = canvasWidth;
              canvas.height = canvasHeight;
              let img = new Image();
              img.src = src; // 要压缩的图片  
              //重画这个图片
              ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
              //转为blob格式发送
              canvas.toBlob( function(blob) {
                 const blobUrl = URL.createObjectURL(blob)
                 console.log("压缩后的bloburl:"+blobUrl)
                 successF(blobUrl)
              }, 'image/jpeg');
              },
              fail: (err) => {
                  reject('获取图片信息失败')
              }
              })
}