一.序言：

上傳圖片時有些圖片太大了，需要壓縮質量大小再上傳。下面展示壓縮質量大小上傳，也是我踩過得坑：開發工具上壓縮正常而在真機上比例失調。主要是用 wx.canvasToTempFilePath 方法。

我是要實現一個上傳4張圖片的功能：

二.實現：

用于處理壓縮圖片的canvas

<!-- 用于處理壓縮圖片的canvas --><canvas canvas-id="attendCanvasId1" style="width:{{canvasWidth1}}px;height:{{canvasHeight1}}px;position: absolute;left:-8000px;top:-8000px;" /><canvas canvas-id="attendCanvasId2" style="width:{{canvasWidth2}}px;height:{{canvasHeight2}}px;position: absolute;left:-8000px;top:-8000px;" /><canvas canvas-id="attendCanvasId3" style="width:{{canvasWidth3}}px;height:{{canvasHeight3}}px;position: absolute;left:-8000px;top:-8000px;" /><canvas canvas-id="attendCanvasId4" style="width:{{canvasWidth4}}px;height:{{canvasHeight4}}px;position: absolute;left:-8000px;top:-8000px;" /><!-- <canvas canvas-id="attendCanvasId" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;" /> -->

data里定義變量：

// canvas 相關（為了支持多選需要四個canvas） canvasWidth1: '579',canvasWidth2: '579',canvasWidth3: '579',canvasWidth4: '579',canvasHeight1: '807',canvasHeight2: '807',canvasHeight3: '807',canvasHeight4: '807',

省略…上面這些都不是重點，跳過，下面是封裝的壓縮質量方法：

踩坑：開發工具上壓縮上傳沒問題，但是真機上圖片會出現只截取了一部分，比例失常現象。

原因：wx.canvasToTempFilePath的時候忘記用定時器，在開發工具正常是因為canvas繪制速度快所以沒問題，而真機上繪制慢導致獲取到的圖片不正常。

/**圖片壓縮* 壓縮圖片的尺寸、大小* @param {*} img 選擇圖片 圖片對象 ； index：因為我4張圖片，所以用index區分* @param {*} width 默認600px 最小壓縮寬度，當圖片小于這個寬度的時候不壓縮尺寸，只壓縮質量 質量0.5倍* @param {*} size 單位kb 最小壓縮大小，當圖片小于這個大小的時候不壓縮質量* 當某張圖片，小于size不做操作*/picCompress(img, index, width = 600, size = 1024) {const canvasId = 'attendCanvasId' + index// canvas長度高度屬性名const widthName = 'canvasWidth' + indexconst heightName = 'canvasHeight' + indexlet that = thislet imgSize = img.size / 1024console.log('img', img)let path = img.urlconsole.log('圖片大小(kb)', imgSize);return new Promise((resolve, reject) => {wx.getSystemInfo({success: function (data) {var pixelRatio = data.pixelRatio;wx.getImageInfo({src: path,success: function (res) {// 這里除于設備像素比 var canvasWidth = res.width / pixelRatio ;var canvasHeight = res.height / pixelRatio ; //設置canvas尺寸that.setData({ [widthName]: canvasWidth,[heightName]: canvasHeight});var ctx = wx.createCanvasContext(canvasId);ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);ctx.draw(true, function () { if (imgSize > size){//保存臨時文件setTimeout(() => {wx.canvasToTempFilePath({ canvasId, fileType: 'jpg',quality: 0.5,width: 0,height: 0, destWidth: canvasWidth, destHeight: canvasHeight, success: function (res) {console.log(res.tempFilePath)wx.getImageInfo({src: res.tempFilePath,success: function (res) {//壓縮成功,res.path是臨時路徑 我轉成base64后上傳console.log(res)let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')console.log('------------url:',res.path) resolve(sourcePhoto)}});},fail: function (error) {console.log(error)}})}, 500)}else{let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')console.log('------------url:',res.path) resolve(sourcePhoto)}})}})}});})},

wx.canvasToTempFilePath屬性：

三.總結：

😆😆😆
那么，下次見了，溜了溜了~

我的嗶哩嗶哩空間
Gitee倉庫地址：全部特效源碼
其它文章：
~關注我看更多簡單創意特效：
文字煙霧效果 html+css+js
環繞倒影加載特效 html+css
氣泡浮動背景特效 html+css
簡約時鐘特效 html+css+js
賽博朋克風格按鈕 html+css
仿網易云官網輪播圖 html+css+js
水波加載動畫 html+css
導航欄滾動漸變效果 html+css+js
書本翻頁 html+css
3D立體相冊 html+css
霓虹燈繪畫板效果 html+css+js
記一些css屬性總結（一）
Sass總結筆記
…等等
進我主頁看更多~

總結

以上是生活随笔為你收集整理的微信小程序用canvasToTempFilePath压缩图片，开发工具压缩正常而真机上比例失调的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。