用 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: 20 rpx auto ;
background: #fff ;
}
wxml
< canvas class = 'container' bindtouchend = "oneImg" canvas-id = "myCanvas"></ canvas >
