微信小程序图片压缩的另类思路

在帮客户做小程序，期间要用到图片压缩，像素要求100px * 100px即可。

不多说了  ，上源码 （中间会有注释）：

//定义一个添加图片的动作

 

addpic : function (e) {

var that = this;

const ctx = wx.createCanvasContext('myCanvas');//拿到当前使用的canvasID

wx.chooseImage({

count: 1, // 默认9

sizeType: ['compressed'], // 先让微信小程序自己压缩一次

sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

success: function (res) {

var tempFilePaths = res.tempFilePaths;

        //getImageInfo 获取要上传的图片的宽度和高度，防止在压缩过程中变形

wx.getImageInfo({

src: tempFilePaths[0],

success: function (res) {

console.log(res.width)

console.log(res.height)

var picW = res.width, picH = res.height;

console.log(picH / picW * 200)

ctx.drawImage(tempFilePaths[0], 0, 0, 100, parseInt(picH / picW * 100)) //按比例对图片进行画图

ctx.draw(false, function () {

                //把画好的图 描下来，写成临时文件

wx.canvasToTempFilePath({

x: -200,

y: -200,

width: 100,

height: parseInt(picH / picW * 100),

destWidth: 100,

destHeight: parseInt(picH / picW * 100),

canvasId: 'myCanvas',

success: function (res) {

console.log(res.tempFilePath)

                    //描图成功以后，赋值

that.setData({ cXs: false, zhaopian: res.tempFilePath, tjzp: res.tempFilePath })

}

})

})             //开始上传图时，设置canvas所属view为可见，下一步描图需要

that.setData({ cXs: true });

}

})

}

});

}