环境：
手机：iphone 7 plus
ios：11.2.5

微信：6.6.1

基础调试库: 1.9.1



问题描述：
当使用wx.canvasGetImageData和wx.canvasPutImageData时发现坐标系原点不在左上角，setClipboardData在安卓+微信小程序开发。而是在左下角。

当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,
y: 0,
width: 5,
height: 255,
success(res) {
console.log(res.data.join());
}
})
},
fail(res) {
console.log(res);
}
})
}





微信小程序开发相关问题解答；本文来自微信小程序工厂 http://www.xcxgc.com 转载请保留。

本文网址：http://www.91bianli.com/kaifazhinan/71736.html