我认为是官方接口的一个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;
。。。。
我强制修改像素,在开发环境,修改的线条在图片上方,而真机线条在图像下方。明显矩阵是倒置的。
麻烦给个相关的代码片段(https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/minicode.html),我们定位下问题
能否提供下完整的demo
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;
................... 逻辑处理
},
这个代码再普通不过了。
+1 同样的问题:wx.canvasGetImageData获得图像数据顺序在模拟器和ios真机不一致
我也遇到这个问题,IOS用getImageData方法拿到的数组,转成base64后,显示的图片是翻转倒置的,安卓和模拟器都是好的,不知道什么原因,很无奈。
wechatide://minicode/CTBbQ6mH6nYZ
在代码片段的时候,canvas.drawImage不知道为什么没反应。代码没错
@辰: 请问这个问题解决了吗?
在微信平台下开发小程序,接口输出的数据应该一致,如果是ios不一致,也应该由基础库去实现