微信小程序中进行图片压缩

微信小程序中进行图片压缩

问题：

一般情况下，小程序在进行拍照识别的时候，上传图片的大小会使小程序出现冗余，这个时候，为了减少小程序的冗余
并且使上传的图片可以分辨出该图片中的内容是那些内容，我们就需要使用图片压缩，小程序中有自带的图片压缩，这边
只写一下自定义的一种压缩方法

首先在需要进行图片压缩的内容的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 = this
        wx.showActionSheet({
            itemList: ["从相册中选择", "拍照"],
            success: function (res) {
                console.log('拍照识别======>', res)
                let type = ""
                // 0是拍照，1是相册
                res.tapIndex == 0 ? type = "album" : res.tapIndex == 1 ? type = "camera" : res.tapIndex
                wx.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;//大小限制500kb
                        let 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
                                        })
                                    })
                                },
                            })

                            // 图片上传完成-----------------------------------------------------
                        })
                    }
                })
            }
        })
    },