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

一.序言：

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

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

二.实现：

1. 用于处理压缩图片的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;" />
  {canvasWidth}}px;height:{{canvasHeight}}px;" /> -->

1
2
3
4
5
6
7

data里定义变量：

    // canvas 相关（为了支持多选需要四个canvas） 
    canvasWidth1: '579',
    canvasWidth2: '579',
    canvasWidth3: '579',
    canvasWidth4: '579',
    canvasHeight1: '807',
    canvasHeight2: '807',
    canvasHeight3: '807',
    canvasHeight4: '807',
1
2
3
4
5
6
7
8
9

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)
              }
            })
          }
        })
        }
      });

    })
  },
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

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