5017关注14767浏览
环境:
手机:iphone 7 plus
ios:11.2.5
微信:6.6.1
基础调试库: 1.9.1
问题描述:
当使用wx.canvasGetImageData和wx.canvasPutImageData时发现坐标系原点不在左上角,而是在左下角。
当new一个Uint8ClampedArray后,填充数据,调用canvasPutImageData, 发现是从底部开始一行一行往上画,而非期望中的一行一行往下画。
此问题只有在ios小程序真机上复现,在ide中和android小程序真机上无法复现。
重现步骤:
1. 创建一个Uint8ClampedArray对象,填入数据(数据为width为5,高度255的从黑到红的渐变色)
2. 使用putImageData方法画该图像。
3.分别使用IDE,andriod小程序真机,iphone小程序真机预览效果。
期望结果:
能出现一个宽度为5,高度255,从黑渐变到红的图像。
实际结果:
在IDE,和android小程序真机上看到的图像和期望一致。
在iphone小程序真机上看到的图像是宽度为5,高度255,从红到黑渐变的图像。Y轴颠倒。经初步分析是犹豫坐标原点在左下方。
截图:
IDE内预览:
iphone小程序真机上预览:
参考代码:
draw: function () {
let rgbaData = [];
for (let i = 0; i < 255; i++) {
rgbaData.push(i, 0, 0, 255);
rgbaData.push(i, 0, 0, 255);
rgbaData.push(i, 0, 0, 255);
rgbaData.push(i, 0, 0, 255);
rgbaData.push(i, 0, 0, 255);
}
var buffer = new ArrayBuffer(255 * 4 * 5);
const imageData = new Uint8ClampedArray(buffer);
for (let i in rgbaData) {
imageData[i] = rgbaData[i];
}
console.log(imageData.join());
wx.canvasPutImageData({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 5,
height: 255,
data: imageData,
success(res) {
wx.canvasGetImageData({
canvasId: 'myCanvas',
x: 0,
&n
-
至过去的我
2044人对此回答表示赞同
我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多> -
Henry韩飞
16人对此回答表示赞同
问题很严重啊,大家如何兼容iPhone小程序真机呢?
展开160回复分享发布于 6年前评论(0)
收起评论
-
春暖花不开
15人对此回答表示赞同
+1问题依旧存在,官方的人出来走两步?
展开150回复分享发布于 6年前评论(0)
收起评论
-
祖师爷
14人对此回答表示赞同
那么明显的问题,没有小程序的同学来解决一下吗?
展开140回复分享发布于 6年前评论(0)
收起评论
-
何家欢
14人对此回答表示赞同
我今天也遇到了,搞了半天才发现
展开140回复分享发布于 6年前评论(0)
收起评论
-
蘑菇头小j
12人对此回答表示赞同
明显是小程序的一个bug!我搞了一天才发现这个问题!
展开120回复分享发布于 6年前评论(0)
收起评论
-
xlxl心累
11人对此回答表示赞同
我也遇到这个问题了,上的各位解决了吗
展开110回复分享发布于 6年前评论(0)
收起评论
-
Carlos
8人对此回答表示赞同
有没有微信的同学能看下这个问题啊~~~~
展开80回复分享发布于 6年前评论(0)
收起评论