你想反馈一个 Bug
如果是 Bug：
使用wx.canvasPutImageData 画一组Uint8ClampedArray数据时，在微信开发者工具和安卓手机端看到的图如下：
而在IOS手机看到的图如下：
canvas的坐标系原点是在左上角，但是微信的putimagedata和getimagedata在IOS上的坐标系原点在左下角。
* 提供一个最简复现 Demo
var rectdata = [
0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, … //因为提问字数限制，删除了剩余数据
];
Page({
data: {
motto: ‘Hello World’,
userInfo: {}
},
putDraw: function() {
const rectData = new Uint8ClampedArray(rectdata);
wx.canvasPutImageData({
canvasId: ‘secCanvas’,
x: 20,
y: 20,
width: 60,
data: rectData,
success(res) {
console.log(res)
},
fail(res) {
console.log(res)
}
})
},
onLoad: function() {},
onReady: function() {
this.putDraw()
}
})
希望官方能尽快修复该bug~~
手动实现了一下反转
// /utils/util.js
const concatArrayBuffer = (…arrays) => {
let totalLength = 0;
for (let arr of arrays) {
totalLength += arr.length;
}
let result = new Uint8ClampedArray(totalLength);
let offset = 0;
for (let arr of arrays) {
result.set(arr, offset);
offset += arr.length;
}
return result;
}
const revertImage = (data, width, height) => {
if (!data) return data;
let dataViews = [];
let len = width * 4;
for (let i = 0; i < height; i++) {
let start = i * width * 4;
let newBuff = data.slice(start, start + len);
dataViews.unshift(newBuff);
}
let result = concatArrayBuffer(…dataViews);
return result.buffer;
}
module.exports = {
revertImage
}
// /pages/XXXPage.js
wx.canvasGetImageData({
canvasId: ‘myCanvas’,
x: 0,
y: 0,
width: width,
height: height,
success(res) {
wx.hideLoading();
// 3. IOS图像反转
let buffer = res.data.buffer;
try {
let systemInfo = wx.getSystemInfoSync();
let platform = systemInfo.platform;
if (platform === ‘ios’) {
buffer = util.revertImage(res.data, res.width, res.height);
}
} catch (e) {
}
…
强力驱动