微信小程序wx.canvasToTempFilePath压缩上传图片，ios压缩成功但是数据sm2加密后无法发起请求，安卓一切正常

问题以及解决

吐槽遇到的问题~

在写微信小程序的时候采用wx.canvasToTempFilePath压缩图片且上传的时候安卓一切正常我在开发工具上也一切正常偏偏ios上就不正常不正常不是指压缩失败而是明明也压缩成功了竟然发不起网络请求离大谱。因为所有请求的入参都会经过sm2加密ios压缩成功后想要发起请求就卡在了加密这步无法执行下面的请求方法打印出来加密前的参数也都没问题但就是卡住了不往下走了导致压根没发起请求玄学。更玄的是去年ios都没问题代码也没动过现在ios就不行了。经过排查wx.canvasToTempFilePath加上了两个属性destWidth和destHeight定义又都成功了奇怪明明是非必填属性安卓我也没填采用默认的都没问题说到底我也不确定是不是这个问题因为也改了其它逻辑不过现在确实是一切正常了。ios奇奇怪的问题真是太多了晕。

如今的压缩代码如下当宽度大于高度时图片可向左旋转

wx.createCanvasContext(‘attendCanvasId’)一直提示已废弃不过以前用了我就不改了而且改新的也麻烦hhh主要是也能用

  picCompress(img, width = 600, size = 102, moreCallback) {
    let that = this
    let imgSize = img.tempFiles[0].size / 1024
    console.log('img', img)
    let path = img.tempFiles[0].path
    console.log('图片大小(kb)', imgSize);
    return new Promise((resolve, reject) => {
      wx.getImageInfo({
        src: img.tempFilePaths[0],
        success: function (imgInfo) {
          console.log('获取图片信息', imgInfo)
          let ctx = wx.createCanvasContext('attendCanvasId');
          /**
           * 压缩图片
           * 图片宽度大于 width 的时候压缩小于的时候不操作
           */
          if (imgInfo.width > width) {
            var canvasWidth = width;
            var canvasHeight = (width * imgInfo.height) / imgInfo.width;
            //设置canvas尺寸
            that.setData({
              canvasWidth: canvasWidth,
              canvasHeight: canvasHeight
            });
            //将图片填充在canvas上
            if (canvasWidth < canvasHeight) {
              //顺时针旋转270度
              that.setData({
                canvasWidth: (width * imgInfo.height) / imgInfo.width,
                canvasHeight: width,
              })
              console.log('宽高',canvasWidth,canvasHeight)
              ctx.translate(((width * imgInfo.height) / imgInfo.width) / 2, width / 2)
              ctx.rotate(270 * Math.PI / 180)
              ctx.drawImage(path, -width / 2, -((width * imgInfo.height) / imgInfo.width) / 2, width, (width * imgInfo.height) / imgInfo.width);
            }else {
              ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
            }
           // ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
                 ctx.draw(false, () => {
              //下载canvas图片
                            //保存临时文件
                            setTimeout(() => {
                              wx.canvasToTempFilePath({ 
                                canvasId: 'attendCanvasId',
                                fileType: 'jpg',
                                quality: 0.5,
                              /*   width: 0,
                                height: 0,   */
                                destWidth: that.data.canvasWidth, 
                                destHeight: that.data.canvasHeight,               
                                success: function (res) {
                                 
                                  console.log(res.tempFilePath)
                                  wx.getImageInfo({
                                    src: res.tempFilePath,
                                    success: function (res) {
                                      console.log('---------------1')
                                      console.log('压缩成功')
                                      console.log(res)
                                      let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')
                                      console.log('------------url:',res.path) 
                                    let t = {tempFilePaths:res.path, picBase64:sourcePhoto}
                                     resolve(t)
                                                }
                                  });
                                  
                                },
                                fail: function (error) {
                                  console.log(error)
                                }
                              })
                            }, 500)
            })
          } else if (imgSize > size) { // 宽度小于width 但是大小大于size 不压尺寸压质量
            var canvasWidth = imgInfo.width;
            var canvasHeight = imgInfo.height;
            //设置canvas尺寸
            that.setData({
              canvasWidth: canvasWidth,
              canvasHeight: canvasHeight
            });
            //将图片填充在canvas上
            if (canvasWidth < canvasHeight) {
              //顺时针旋转270度
              that.setData({
                canvasWidth: (width * imgInfo.height) / imgInfo.width,
                canvasHeight: width,
              })
              ctx.translate(((width * imgInfo.height) / imgInfo.width) / 2, width / 2)
              ctx.rotate(270 * Math.PI / 180)
              ctx.drawImage(path, -width / 2, -((width * imgInfo.height) / imgInfo.width) / 2, width, (width * imgInfo.height) / imgInfo.width);
            }else {
              ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
            }
            ctx.draw(false, () => {
              setTimeout(() => {
                wx.canvasToTempFilePath({ 
                  canvasId: 'attendCanvasId',
                  fileType: 'jpg',
                  quality: 0.5,
                /*   width: 0,
                  height: 0,   */
                  destWidth: that.data.canvasWidth, 
                  destHeight: that.data.canvasHeight, 
                  success: function (res) {
                   
                    console.log(res.tempFilePath)
                    wx.getImageInfo({
                      src: res.tempFilePath,
                      success: function (res) {
                        console.log('---------------2')
                        console.log('压缩成功')
                        console.log(res)
                        let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')
                        console.log('------------url:',res.path) 
                       // moreCallback(res.path, sourcePhoto) tempFilePaths, picBase64
                       let t = {tempFilePaths:res.path, picBase64:sourcePhoto}
                       resolve(t)
                                  }
                    });
                    
                  },
                  fail: function (error) {
                    console.log(error)
                  }
                })
              }, 500)

              //下载canvas图片
     });
          } else {
            let canvasWidth = imgInfo.width
            let canvasHeight = imgInfo.height
            console.log('宽高',canvasWidth,canvasHeight)
            //将图片填充在canvas上
            if (canvasWidth < canvasHeight) {
              //顺时针旋转270度
              that.setData({
                canvasWidth: (width * imgInfo.height) / imgInfo.width,
                canvasHeight: width,
              })
              ctx.translate(((width * imgInfo.height) / imgInfo.width) / 2, width / 2)
              ctx.rotate(270 * Math.PI / 180)
              ctx.drawImage(path, -width / 2, -((width * imgInfo.height) / imgInfo.width) / 2, width, (width * imgInfo.height) / imgInfo.width);
            }else {
              ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
            }
            ctx.draw(false, () => {
              setTimeout(() => {
                wx.canvasToTempFilePath({ 
                  canvasId: 'attendCanvasId',
                  fileType: 'jpg',
                  quality: 0.5,
                /*   width: 0,
                  height: 0,   */
                  destWidth: that.data.canvasWidth, 
                  destHeight: that.data.canvasHeight, 
                  success: function (res) {
                   
                    console.log(res.tempFilePath)
                    wx.getImageInfo({
                      src: res.tempFilePath,
                      success: function (res) {
                        console.log('---------------3')
                        console.log('压缩成功')
                        console.log(res)
                        let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')
                        console.log('------------url:',res.path) 
                       // moreCallback(res.path, sourcePhoto) tempFilePaths, picBase64
                       let t = {tempFilePaths:res.path, picBase64:sourcePhoto}
                       resolve(t)
                                  }
                    });
                    
                  },
                  fail: function (error) {
                    console.log(error)
                  }
                })
              }, 500)
        });
          }
        },
        fail: function (getInfoErr) {
          that.data.loading.clear()
          console.log(getInfoErr)
          // wx.hideLoading();
          wx.showToast({
            title: '获取图片信息失败',
            icon: 'error',
            duration: 2000
          });
        }
      })
    })

  },

压缩成功后直接把图片转换成base64然后直接返回一个promise结果出去再进行操作后发起请求。

         let t = _this.picCompress(res, 600, 100)  .then(res => {
                // 请求
        })

886~

我的哔哩哔哩空间
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总结笔记
…等等
进我主页看更多~