小程序canvas画的这张图片比例不对怎么回事？

Z时代
2024-01-10
分类：技术分享

一张图片宽高是571*799 想把这张图片画到白色背景上宽度550 高度自适应高度计算的也没错可是为什么画出来的这张图片比例不对呢

<image class="canvas3" src='https://segmentfault.com/q/1010000037691362/{{prurl}}'></image>

wx.getImageInfo({
src: 'http://www.11-bian.com/tmpImg/ca48124988dcd8cf539887f452b0ea1e.jpeg',
success: function (res) {
that.setData({
canvasCover: res.path
})
}})

    const canvasCtx = wx.createCanvasContext('shareCanvas');
let percent = 799/571
let height = parseInt(percent*550)+278
that.setData({
height: height
})
canvasCtx.fillStyle = 'white';
canvasCtx.fillRect(0,0,550,height)//绘制白色背景
canvasCtx.drawImage(that.data.canvasCover, 0, 0, 550, parseInt(550*percent)) //绘制图片
canvasCtx.draw();
setTimeout(function() {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 550,
height: height,
canvasId: 'shareCanvas',
success:res=>{
that.setData({
prurl: res.tempFilePath,
hidden: false
});
wx.hideLoading();
},
fail: function(res) {
console.log(res);
wx.hideLoading();
}
});}, 2000);