用 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>
已知问题,下个版本修复.
这是 Android 上的一个 BUG,Android 上 drawImage 传入的尺寸一律都按物理像素计算,目前要规避这个 BUG,可以将尺寸和位置乘以 pixelRatio。
let { pixelRatio } = wx.getSystemInfoSync()
console.log(pixelRatio)
ctx.drawImage(fileUrl, 0, 0, sWidth*pixelRatio, sWidth*pixelRatio, 0, 0, maxWidth*pixelRatio, maxWidth*pixelRatio);
也就是说对于 宽高比 大于2的图片,需要和其他图片分开处理是吗?
这个问题已经在正在灰度的 Android 6.7.2 上修复,请关注新版本下的表现。
6.7.2 版本还是有问题
这些机型在渲染图片时都还是会有缩小的问题。
而且一些机型 drawImage 会在 sy + sHeight >= imageHeight 或 sx < 0 的时候 偶现渲染空白,测试会复现的机器包括 iPhone X,Smartisan T2
6.7.2还是会以pixelRatio放大,机型:MIX 2S MIUI10 Android 9。
代码片段:wechatide://minicode/Seeoeimp7IeJ
机型:小米5
微信版本:6.7.0
你好,请提供出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
代码片段:wechatide://minicode/Seeoeimp7IeJ
机型:小米5
微信版本:6.7.0