使用 canvasContext.createImageData 创建一个 ImageData对象,并对 ImageData.data 进行修改后,使用 canvasContext.putImageData 进行绘制,无法正常绘制。
同时:
使用 canvasContext.getImageData 拿到的 imageData,修改 ImageData.data 后,使用canvasContext.putImageData 进行绘制,修改的内容无法绘制。
目前 微信8.0.37 版本的安卓客户端存在问题,之前的 8.0.35 正常。
测试机型:
三星 s22 +
三星 s10+
已定位到问题,会尽快修复
/**
* 苹果能绘制,安卓(微信版本 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)
//小程序库的BUG真是一言难尽,我今天刚好碰到,用下面的方法是可以的
const data = context.getImageData(0, 0, context.canvas.width, context.canvas.height)
...根据业务逻辑,处理你的data数据,此处省略
const imageData = context.createImageData(context.canvas.width, context.canvas.height)
imageData.data.set(data)
ctx.putImageData(imageData, x, y)
同样的问题,之前小程序安卓IOS 都没问题,现在IOS 可以,安卓不行. 现在微信是最新版本8.0.37,没记错,周末更新的微信吧
可以用 canvas.createImageData 替代 canvasContext.createImageData 方法解决,详细请看:https://developers.weixin.qq.com/community/develop/article/doc/0004cef0f980407630dfa1e2956013
加了微信小游戏的处理,所以还在审核中
/**
* 苹果能绘制,安卓(微信版本 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)
canvasContext.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)
链接也可以访问了
有同样的问题,小米11,安卓13
小米13,Android 13,同样的问题