一.序言：

上傳圖片時(shí)有些圖片太大了，需要壓縮質(zhì)量大小再上傳。下面展示壓縮質(zhì)量大小上傳，也是我踩過(guò)得坑：開(kāi)發(fā)工具上壓縮正常而在真機(jī)上比例失調(diào)。主要是用 wx.canvasToTempFilePath 方法。

我是要實(shí)現(xiàn)一個(gè)上傳4張圖片的功能：

二.實(shí)現(xiàn)：

用于處理壓縮圖片的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 相關(guān)（為了支持多選需要四個(gè)canvas） canvasWidth1: '579',canvasWidth2: '579',canvasWidth3: '579',canvasWidth4: '579',canvasHeight1: '807',canvasHeight2: '807',canvasHeight3: '807',canvasHeight4: '807',

省略…上面這些都不是重點(diǎn)，跳過(guò)，下面是封裝的壓縮質(zhì)量方法：

踩坑：開(kāi)發(fā)工具上壓縮上傳沒(méi)問(wèn)題，但是真機(jī)上圖片會(huì)出現(xiàn)只截取了一部分，比例失常現(xiàn)象。

原因：wx.canvasToTempFilePath的時(shí)候忘記用定時(shí)器，在開(kāi)發(fā)工具正常是因?yàn)閏anvas繪制速度快所以沒(méi)問(wèn)題，而真機(jī)上繪制慢導(dǎo)致獲取到的圖片不正常。

/**圖片壓縮* 壓縮圖片的尺寸、大小* @param {*} img 選擇圖片 圖片對(duì)象 ； index：因?yàn)槲?張圖片，所以用index區(qū)分* @param {*} width 默認(rèn)600px 最小壓縮寬度，當(dāng)圖片小于這個(gè)寬度的時(shí)候不壓縮尺寸，只壓縮質(zhì)量 質(zhì)量0.5倍* @param {*} size 單位kb 最小壓縮大小，當(dāng)圖片小于這個(gè)大小的時(shí)候不壓縮質(zhì)量* 當(dāng)某張圖片，小于size不做操作*/picCompress(img, index, width = 600, size = 1024) {const canvasId = 'attendCanvasId' + index// canvas長(zhǎng)度高度屬性名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) {// 這里除于設(shè)備像素比 var canvasWidth = res.width / pixelRatio ;var canvasHeight = res.height / pixelRatio ; //設(shè)置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){//保存臨時(shí)文件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是臨時(shí)路徑 我轉(zhuǎn)成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屬性：

三.總結(jié)：

😆😆😆
那么，下次見(jiàn)了，溜了溜了~

我的嗶哩嗶哩空間
Gitee倉(cāng)庫(kù)地址：全部特效源碼
其它文章：
~關(guān)注我看更多簡(jiǎn)單創(chuàng)意特效：
文字煙霧效果 html+css+js
環(huán)繞倒影加載特效 html+css
氣泡浮動(dòng)背景特效 html+css
簡(jiǎn)約時(shí)鐘特效 html+css+js
賽博朋克風(fēng)格按鈕 html+css
仿網(wǎng)易云官網(wǎng)輪播圖 html+css+js
水波加載動(dòng)畫(huà) html+css
導(dǎo)航欄滾動(dòng)漸變效果 html+css+js
書(shū)本翻頁(yè) html+css
3D立體相冊(cè) html+css
霓虹燈繪畫(huà)板效果 html+css+js
記一些css屬性總結(jié)（一）
Sass總結(jié)筆記
…等等
進(jìn)我主頁(yè)看更多~

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。