微信小程序中進行圖片壓縮

問題：

一般情況下，小程序在進行拍照識別的時候，上傳圖片的大小會使小程序出現冗余，這個時候，為了減少小程序的冗余 并且使上傳的圖片可以分辨出該圖片中的內容是那些內容，我們就需要使用圖片壓縮，小程序中有自帶的圖片壓縮，這邊 只寫一下自定義的一種壓縮方法

首先在需要進行圖片壓縮的內容的wxml上，進行使用畫布，這畫布不能夠出現在屏幕上

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

之后在js中進行內容壓縮，重復壓縮直至壓縮到想要的大小

// 拍照識別photoRecognition(type) {console.log('拍照識別======>');let that = thiswx.showActionSheet({itemList: ["從相冊中選擇", "拍照"],success: function (res) {console.log('拍照識別======>', res)let type = ""// 0是拍照，1是相冊res.tapIndex == 0 ? type = "album" : res.tapIndex == 1 ? type = "camera" : res.tapIndexwx.chooseImage({count: 1,sizeType: ['compressed'],//['original', 'compressed'] original 原圖，compressed 壓縮圖sourceType: [type],success: function (res) {console.log('壓縮之前的大小--------------------', res)let filePath = res.tempFilePaths[0]that.setData({ filePath: filePath })let canvasId = 'zipCanvas' //注意這里的id和你在頁面中寫的html代碼的canvas的id要一致let imagePath = res.tempFilePaths[0];//原圖的路徑let limitSize = 500;//大小限制500kblet drawWidth = wx.getSystemInfoSync().windowWidth;//初始繪畫區域是畫布自身的寬度也就是屏幕寬度getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, (resPath) => {console.log(resPath);//resPath就是壓縮后圖片的路徑，然后想做什么都隨你// 圖片上傳開始-----------------------------------------------------wx.getFileSystemManager().readFile({filePath: resPath,encoding: 'base64',success: (res) => {// console.log(res)wx.showLoading({title: '正在識別...',mask: true})let timeOut = setTimeout(() => {wx.hideLoading()wx.showToast({title: '識別超時',mask: true,icon: "error"})}, 20000);request.post({url: api.wechat.invoiceOcr,data: {imgData: res.data,imgName: '1.jpg'}}).then(res => {clearTimeout(timeOut)wx.hideLoading()if (res.result.optionSuccess == true) {let invoiceAll = JSON.stringify(res.result)// wx.navigateTo({// url: '/pages/photoRecognition/photoRecognition?invoiceAll=' + encodeURIComponent(invoiceAll) + '&filePath=' + that.data.filePath + '&pageCome=1&accountId= ' + that.data.baocunid + '&status=' + that.data.status + '&type=' + 'fqbx' + '&paty=' + 'true',// })wx.navigateTo({url: '/pagesB/pages/photoRecognition/photoRecognition?invoiceAll=' + encodeURIComponent(invoiceAll) + '&filePath=' + that.data.filePath + '&pageCome=999&accountId= ' + that.data.baocunid + '&status=' + that.data.status// url: '../../pages/photoRecognition/photoRecognition?invoiceAll=' + JSON.stringify(invoiceAll) + '&filePath=' + that.data.filePath + '',})} else {if (res.result.optionErrorCode == "9000") {wx.showToast({title: "識別失敗",icon: 'error',duration: 2000})} else if (res.result.optionErrorCode == "2001") {wx.showToast({title: '不支持該票據',icon: 'error',duration: 2000})}}}).catch(err => {// console.log(err)clearTimeout(timeOut)wx.hideLoading()wx.showToast({title: err.data,icon: "error",mask: true})})},})// 圖片上傳完成-----------------------------------------------------})}})}})},

總結

以上是生活随笔為你收集整理的微信小程序中进行图片压缩的全部內容，希望文章能夠幫你解決所遇到的問題。

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