在帮客户做小程序,期间要用到图片压缩,像素要求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 });
}
})
}
});
}