2925关注9055浏览
用 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>
-
至过去的我
2044人对此回答表示赞同
我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多> -
酥油茶
18人对此回答表示赞同
代码片段:wechatide://minicode/Seeoeimp7IeJ
展开180回复分享发布于 6年前评论(0)
收起评论
-
Frederick富坚
13人对此回答表示赞同
王宇萧风 代码片段:wechatide://minicode/Seeoeimp7IeJ 展开130回复分享发布于 6年前评论(0)
收起评论
-
北冥有鱼
8人对此回答表示赞同
已知问题,下个版本修复.
展开80回复分享发布于 6年前评论(0)
收起评论
-
Axl木子
6人对此回答表示赞同
这是Android上的一个BUG,Android上drawImage传入的尺寸一律都按物理像素计算,目前要规避这个BUG,可以将尺寸和位置乘以pixelRatio。
展开63回复分享发布于 6年前评论(3)
收起评论
-
Julia 2019-02-13 14:17
6.7.2版本还是有问题
回复 -
左鹏 2019-02-15 09:55
这个问题已经在正在灰度的Android6.7.2上修复,请关注新版本下的表现。
回复 -
Evan3 2019-02-17 23:14
也就是说对于宽高比大于2的图片,需要和其他图片分开处理是吗?
回复
-