解决微信 8.0.37 Canvas 2D 中 canvasContext.createImageData 无法绘制问题
最近安卓微信更新到 8.0.37 版本后，canvas 2D 有无法绘制问题出现；（微信小程序、微信小游戏均有出现） 微信小程序处理 1、完整代码片段：https://developers.weixin.qq.com/s/uEA9JLme7mIT 2、核心代码如下： /**
* 苹果能绘制，安卓（微信版本 8.0.37）不能绘制
*/
const imgData = canvasContext.createImageData(width, height)
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 0
imgData.data[i + 1] = 255
imgData.data[i + 2] = 0
imgData.data[i + 3] = 255
}
console.log('imgData >>>>>>>>>>>>>>>', imgData)
ctx.putImageData(imgData, 0, 0)
/**
* 修改后安卓苹果都能绘制
*/
const u8Arr = new Uint8ClampedArray(width * height * 4)
for (var i = 0; i < u8Arr.length; i += 4) {
u8Arr[i + 0] = 0
u8Arr[i + 1] = 255
u8Arr[i + 2] = 0
u8Arr[i + 3] = 255
}
console.log('u8Arr >>>>>>>>>>>>>>>', u8Arr)
const imgData = canvas.createImageData(u8Arr, width, height)
console.log('imgData >>>>>>>>>>>>>>>', imgData)
canvasContext.putImageData(imgData, 0, 0)
3、备注 canvas.createImageData 方法需要三个参数： e：Unit8ClampedArray t：width r：height 关于这个方法需要三个参数，官方文档没有说明，强烈建议官方补全文档，不然全靠猜；最容易使用 canvasContext.createImageData 传参形式，结果返回 null 从红色方框内可以看出，canvas.createImageData 内部也是调用 canvasContext.createImageData 实现的；现在大部分安卓手机微信升级到 8.0.37，直接调用 canvasContext.createImageData 无法绘制，需调用 canvas.createImageData 才行；官方人员还请仔细排查一下！ [图片] 微信小游戏处理 1、完整代码片段：https://developers.weixin.qq.com/s/czATiLmE7sIs 2、核心代码如下： /**
* 苹果能绘制，安卓（微信版本 8.0.37）不能绘制
*/
const width = 100, height = 100
const imgData = canvasContext.createImageData(width, height)
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 0
imgData.data[i + 1] = 255
imgData.data[i + 2] = 0
imgData.data[i + 3] = 255
}
console.log('imgData >>>>>>>>>>>>>>>', imgData)
canvasContext.putImageData(imgData, 20, 120)
/**
* 修改后安卓苹果都能绘制（模拟器报错，真机可以）
*/
const width = 100, height = 100
const u8Arr = new Uint8ClampedArray(width * height * 4)
for (var i = 0; i < u8Arr.length; i += 4) {
u8Arr[i + 0] = 0
u8Arr[i + 1] = 255
u8Arr[i + 2] = 0
u8Arr[i + 3] = 255
}
console.log('u8Arr >>>>>>>>>>>>>>>', u8Arr)
const imgData = wx.createImageData(u8Arr, width, height) // 基础库 2.24.6 开始支持
console.log('imgData >>>>>>>>>>>>>>>', imgData)
canvasContext.putImageData(imgData, 20, 120)
3、备注 wx.createImageData 官方文档也未说明如何传参，建议官方补全 总结 canvasContext.createImageData 方法返回的 ImageData 无法绘制问题，应该是个 Bug，请官方及时排查修复！
