canvasContext.drawImage 画图会缩放的问题
用 canvasContext.drawImage 的 drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 这种方式画图片时,如果图片的宽度是高度的2倍以上,或者高度是宽度的2倍以上,比如这种图片 [图片] 会有问题,画出来的大小不是 dWidth 和 dHeight 这么大,但是在微信开发者工具里是正常的,手机上显示不正常。 代码 js Page({ data: { maxWidth: 315, }, oneImg: function(e) { var that = this; var maxWidth = that.data.maxWidth; var ctx = wx.createCanvasContext('myCanvas') // 获取点击时 x 轴的值 var x = e.changedTouches[0].x; // 获取点击时 y 轴的值 var y = e.changedTouches[0].y; // 选择图片 wx.chooseImage({ success: function(res) { var fileUrl = res.tempFilePaths[0]; wx.getImageInfo({ src: res.tempFilePaths[0], success: function(res) { var width = res.width; var height = res.height; // 取短边为正方形 canvas的宽 var sWidth = width > height ? height : width; ctx.drawImage(fileUrl, 0, 0, sWidth, sWidth, 0, 0, maxWidth, maxWidth); ctx.draw(true) } }) } }) }, }) wxss page { background: #93E0FE; } .container { width: 315px; height: 315px; margin: 20rpx auto; background: #fff; } wxml <canvas class='container' bindtouchend="oneImg" canvas-id="myCanvas"></canvas>