我正在使用 Webworker 处理来自 Canvas 的像素数组,并在将其返回后 - 分配给 ImageData 数组。 Firefox 运行良好,但 Chromium 将一个空像素数组放入 Canvas。调查表明数组复制不起作用,生成的数组包含空元素。数组切片也没有帮助,只有用 for in 遍历每个元素才有帮助,但我想知道这里有什么问题?
imgd = ctx.createImageData(w,h);
worker.onmessage = function (e) {
imgd.data = e.data;
console.log(imgd.data === e.data); // true in FF, false in Chromium
img.data = e.data.slice(0);
console.log(imgd.data); // correct in FF, empty array in Chromium
};
最佳答案
Chrome :
> var e = document.createElement('canvas').getContext('2d').createImageData(10, 10).data;
undefined
> Object.prototype.toString.call(e)
"[object ImageData]"
> e.slice
undefined
效果4:
>>> var e = document.createElement('canvas').getContext('2d').createImageData(10, 10).data;
undefined
>>> Object.prototype.toString.call(e)
"[object Uint8ClampedArray]"
>>> e.slice
slice()
歌剧:
>>> var e = document.createElement('canvas').getContext('2d').createImageData(10, 10).data;
undefined
>>> Object.prototype.toString.call(e)
"[object CanvasPixelArray]"
>>> e.slice
undefined
这告诉我们什么?那么规范nowhere states像素数据数组应该有类似数组的方法。
因此,仅在可用时使用 .slice
,否则执行 for 循环
复制,哦,还要在 2 个以上的浏览器中进行测试。
关于javascript - Chromium 不会复制数组值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4377099/