function (canvas_id, file_url, targetWidth, targetHeight) {
wx.getImageInfo({
src: file_url,
success(res) {
let targetWidth = res.width;
targetHeight = res.height;
let ctx = wx.createCanvasContext(canvas_id);
ctx.clearRect(0, 0, targetWidth, targetHeight);
// ctx.drawImage(file_url, 0, 0, targetWidth, targetHeight);
// 运行上面这句,压缩的图与原图(file_url)有区别,就是高度被截取了一点,如果运行下面这句
// 就可以了,问题虽然解决了,就是不明白这是为啥,有没有大佬指点一下
// 这是封装的一个方法,其中有些删减,但是问题就是这个
ctx.drawImage(file_url, 0, 0, targetWidth, targetHeight/2);
ctx.draw(false, function () {
// 获得新图片输出
wx.canvasToTempFilePath({
x: 0,
y: 0,
canvasId: canvas_id,
destWidth: targetWidth,
destHeight: targetHeight,
quality: 0.9,
fileType: "jpg",
success: (res) => {
console.log(res)
resolve(res.tempFilePath);
},
fail: (err) => {
console.error(err)
}
}, this)
})
}
问题已解决,标签名为(canvas_id)的 canvas 没有设置 style, 默认w300 h150
所以 ctx.drawImage(file_url, 0, 0, targetWidth, targetHeight/2) 中的 targetWidth = 300
targetHeight/2 = 150 ,才与原图保持一致
wx.createCanvasContext 已经不支持了