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('獲取圖片信息失敗')
              }
              })
}