我认为是官方接口的一个BUG！canvas的canvasGetImageData方法，在开发环境和真机，返回的数组不一致！
我的场景是canvas画一个二维码，然后识别二维码。结果在开发环境可以正确识别结果，但是真机报错。
通过多次检查，发现真机的canvasGetImageData方法，返回的数组和开发环境是不一致的。
通过简单的像素测试，代码如下：
wx.canvasGetImageData({
canvasId: ‘target’,
x: 0,
y: 0,
width: 300,
height: 300,
success: function (res) {
for (var i = 0 + 300 * 3 * 105; i < 3 * 300 + 300 * 3 * 105; i++)
res.data[i] = 99;
。。。。
我强制修改像素，在开发环境，修改的线条在图片上方，而真机线条在图像下方。明显矩阵是倒置的。
const ctx = wx.createCameraContext();
const ctx2 = wx.createCanvasContext(‘target’);
ctx.takePhoto({
quality: ‘high’,
success: (res) => {
ctx2.drawImage(res.tempImagePath, 0, 0, 300, 300);
ctx2.draw(false, function (ret) {
wx.canvasGetImageData({
canvasId: ‘target’,
x: 0,
y: 0,
width: 300,
height: 300,
success: function (res) {
that.___takePhotoSuccess(res);
}
}); // ---- canvasGetImageData
}); // ---- draw
},
fail: function () {
console.log(‘fail’)
}
}); // ---- takePhoto
___takePhotoSuccess: function (res) {
var origin = res.data; // 这玩意IOS是反的！！！！必须手动翻转！！！
if (app.globalData.systemInfo.platform == ‘ios’) {
var flipper = new Uint8ClampedArray(res.data.length);
for (var row = 0; row < this.data.qrHeight; row++) {
var startIndex = 4 * this.data.qrWidth * row;
var endIndex = 4 * this.data.qrWidth * (row + 1);
var pixels = res.data.slice(startIndex, endIndex);
pixels.forEach(function (value, index, array) {
flipper[4 * that.data.qrWidth * (that.data.qrHeight - row) + index] = value;
});
}
res.data = flipper;
… 逻辑处理
},
这个代码再普通不过了。
强力驱动