javascript - Chromium 不会复制数组值

Question

我正在使用 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
};

Answer 1

铬合金：

> var e = document.createElement('canvas').getContext('2d').createImageData(10, 10).data;
undefined
> Object.prototype.toString.call(e)
"[object ImageData]"
> e.slice
undefined

FX4：

>>> 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

这告诉我们什么？好吧，规范没有规定像素数据数组应该有类似数组的方法。

因此，只有在可用时才使用.slice，否则做一个for loop副本，哦，还要在2个以上的浏览器中测试。

Answer 2

而不是createImageData()，我想你想用getImageData(). （那是 Mozilla 文档，但 Chrome 在上下文中也有这种方法。）

Answer 3

slice仅使用 start 参数调用是 Spidermonkey 扩展。尝试指定开始和结束：

e.data.slice(0, e.data.length)

---

Edit    createImageData返回一个ImageData对象，该对象的属性是只读的。所以你不能改变data。用于从另一个ImageData对象在CanvasRenderingContext2DcreateImageData中创建一个ImageData对象：

worker.onmessage = function (e) {
    ctx.createImageData(e.data);
};