微信小程序用canvasToTempFilePath压缩图片，开发工具压缩正常而真机上比例失调

Posted 2022-09-16 北极光之夜。

一.序言：

上传图片时有些图片太大了，需要压缩质量大小再上传。下面展示压缩质量大小上传，也是我踩过得坑：开发工具上压缩正常而在真机上比例失调。主要是用 wx.canvasToTempFilePath 方法。

我是要实现一个上传4张图片的功能：

二.实现：

1. 用于处理压缩图片的canvas

  <!-- 用于处理压缩图片的canvas -->
  <canvas canvas-id="attendCanvasId1" style="width:canvasWidth1px;height:canvasHeight1px;position: absolute;left:-8000px;top:-8000px;" />
  <canvas canvas-id="attendCanvasId2" style="width:canvasWidth2px;height:canvasHeight2px;position: absolute;left:-8000px;top:-8000px;" />
  <canvas canvas-id="attendCanvasId3" style="width:canvasWidth3px;height:canvasHeight3px;position: absolute;left:-8000px;top:-8000px;" />
  <canvas canvas-id="attendCanvasId4" style="width:canvasWidth4px;height:canvasHeight4px;position: absolute;left:-8000px;top:-8000px;" />
  <!-- <canvas canvas-id="attendCanvasId" style="width:canvasWidthpx;height:canvasHeightpx;" /> -->

data里定义变量：

    // canvas 相关（为了支持多选需要四个canvas） 
    canvasWidth1: '579',
    canvasWidth2: '579',
    canvasWidth3: '579',
    canvasWidth4: '579',
    canvasHeight1: '807',
    canvasHeight2: '807',
    canvasHeight3: '807',
    canvasHeight4: '807',

2. 省略…上面这些都不是重点，跳过，下面是封装的压缩质量方法：

踩坑：开发工具上压缩上传没问题，但是真机上图片会出现只截取了一部分，比例失常现象。

原因：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' + index
    const heightName = 'canvasHeight' + index
    let that = this
    let imgSize = img.size / 1024
    console.log('img', img)
    let path = img.url
    console.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总结笔记
…等等
进我主页看更多~