//通過(guò)canvas將圖片壓縮至指定大小

//判斷圖片大小是否滿足需求,limitSize的單位是kb
function imageSizeIsLessLimitSize(imagePath,limitSize,lessCallback,moreCallback){
 //獲取文件信息
 wx.getFileInfo({
 filePath:imagePath,
 success:(res)=>{
  console.log("壓縮前圖片大小",res.size/1024,'kb');
  //如果圖片太大了走moreCallback
  if(res.size>1024*limitSize){
  moreCallback()
  }
  //圖片滿足要求了走lessCallback
  else{
  lessCallback()
  }
 }
 })
}

//將圖片畫(huà)在畫(huà)布上并獲取畫(huà)好之后的圖片的路徑
function getCanvasImage(canvasId,imagePath,imageW,imageH,getImgSuccess){
 //創(chuàng)建畫(huà)布內(nèi)容
 const ctx=wx.createCanvasContext(canvasId);
 //圖片畫(huà)上去，imageW和imageH是畫(huà)上去的尺寸，圖像和畫(huà)布間隔都是0
 ctx.drawImage(imagePath,0,0,imageW,imageH);
 //這里一定要加定時(shí)器，給足夠的時(shí)間去畫(huà)（所以每次遞歸最少要耗時(shí)200ms，多次遞歸很耗時(shí)?。?
 ctx.draw(false,setTimeout(function(){
 wx.canvasToTempFilePath({
  canvasId:canvasId,
  x:0,
  y:0,
  width:imageW,
  height:imageH,
  quality:1, //最高質(zhì)量，只通過(guò)尺寸放縮去壓縮，畫(huà)的時(shí)候都按最高質(zhì)量來(lái)畫(huà)
  success:(res)=>{
  getImgSuccess(res.tempFilePath);
  }
 })
 },200));
}

//主函數(shù)，默認(rèn)限制大小1024kb即1mb,drawWidth是繪畫(huà)區(qū)域的大小
//初始值傳入為畫(huà)布自身的邊長(zhǎng)（我們這是一個(gè)正方形的畫(huà)布）
function getLessLimitSizeImage(canvasId,imagePath,limitSize=1024,drawWidth,callback){
 //判斷圖片尺寸是否滿足要求
 imageSizeIsLessLimitSize(imagePath,limitSize,
 (lessRes)=>{
  //滿足要求走callback，將壓縮后的文件路徑返回
  callback(imagePath);
 },
 (moreRes)=>{
  //不滿足要求需要壓縮的時(shí)候
  wx.getImageInfo({
  src:imagePath,
  success:(imageInfo)=>{
   let maxSide=Math.max(imageInfo.width,imageInfo.height);
   let windowW=drawWidth;
   let scale=1;
   /*
   這里的目的是當(dāng)繪畫(huà)區(qū)域縮小的比圖片自身尺寸還要小的時(shí)候
   取圖片長(zhǎng)寬的最大值，然后和當(dāng)前繪畫(huà)區(qū)域計(jì)算出需要放縮的比例
   然后再畫(huà)經(jīng)過(guò)放縮后的尺寸，保證畫(huà)出的一定是一個(gè)完整的圖片。由于每次遞歸繪畫(huà)區(qū)域都會(huì)縮小，
   所以不用擔(dān)心scale永遠(yuǎn)都是1繪畫(huà)尺寸永遠(yuǎn)不變的情況，只要不滿足壓縮后體積的要求
   就會(huì)縮小繪畫(huà)區(qū)域，早晚會(huì)有繪畫(huà)區(qū)域小于圖片尺寸的情況發(fā)生
   */
   if(maxSide>windowW){
   scale=windowW/maxSide;
   }
   //trunc是去掉小數(shù)
   let imageW=Math.trunc(imageInfo.width*scale);
   let imageH=Math.trunc(imageInfo.height*scale);
   console.log('調(diào)用壓縮',imageW,imageH);
   //圖片在規(guī)定繪畫(huà)區(qū)域上畫(huà)并獲取新的圖片的path
   getCanvasImage(canvasId,imagePath,imageW,imageH,
   (pressImgPath)=>{
    /*
    再去檢查是否滿足要求，始終縮小繪畫(huà)區(qū)域，讓圖片適配繪畫(huà)區(qū)域
    這里乘以0.95是必須的，如果不縮小繪畫(huà)區(qū)域，會(huì)出現(xiàn)尺寸比繪畫(huà)區(qū)域小，
    而體積比要求壓縮體積大的情況出現(xiàn)，就會(huì)無(wú)窮遞歸下去，因?yàn)閟cale的值永遠(yuǎn)是1
    但0.95不是固定的，你可以根據(jù)需要自己改，0到1之間，越小則繪畫(huà)區(qū)域縮小的越快
    但不建議取得太小，繪畫(huà)區(qū)域縮小的太快，壓出來(lái)的將總是很糊的
    */
    getLessLimitSizeImage(canvasId,pressImgPath,limitSize,drawWidth*0.95,callback);
   }
   )
  }
  })
 }
 )
}

export default getLessLimitSizeImage

<!--用于圖片壓縮的canvas畫(huà)布，不在頁(yè)面中展示，且id固定不可變-->
 <canvas
 style="width: {{cw}}px; height: {{cw}}px;position: absolute; z-index: -1; left: -10000rpx;; top: -10000rpx;"
 canvas-id="zipCanvas"
 ></canvas>
 <!--畫(huà)布結(jié)束-->

	//畫(huà)板邊長(zhǎng)默認(rèn)是屏幕寬度，正方形畫(huà)布
 cw:wx.getSystemInfoSync().windowWidth,

import getLessLimitSizeImage from '../../utils/zipPic'

 wx.chooseImage({
  count:1, //只傳一張
  sizeType:'original', //原圖質(zhì)量好，然后通過(guò)canvas壓縮，縮略圖壓縮就太糊了
  sourceType: ['album', 'camera'], // 來(lái)源是相冊(cè)和相機(jī)
  success:(res)=>{
  let canvasId='zipCanvas' //注意這里的id和你在頁(yè)面中寫(xiě)的html代碼的canvas的id要一致
  let imagePath=res.tempFilePaths[0];//原圖的路徑
  let limitSize=2048;//大小限制2048kb
  let drawWidth=wx.getSystemInfoSync().windowWidth;//初始繪畫(huà)區(qū)域是畫(huà)布自身的寬度也就是屏幕寬度
  wx.showLoading({title:'圖片壓縮中...',mask:true}) //不需要你可以刪掉
  getLessLimitSizeImage(canvasId,imagePath,limitSize,drawWidth,(resPath)=>{
   wx.hideLoading(); //不需要你可以刪掉
   
   //resPath就是壓縮后圖片的路徑，然后想做什么都隨你
   
  })
  }
 })