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

Chrome：

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

Opera：

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

这告诉我们什么？那么规范无处说明 像素数据数组应该具有类似数组的方法。

因此，仅在可用时使用 .slice，否则执行 for 循环 复制，哦，还要在 2 个以上的浏览器中进行测试。

Answer 2

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

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

---

编辑    createImageData 返回一个 ImageData 对象，其属性是只读的。因此您无法更改数据。使用 createImageData 创建来自另一个 ImageData 对象的 CanvasRenderingContext2D 中的 ImageData 对象：

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

Answer 3

我认为您想使用 而不是 createImageData() getImageData()。 （这是 Mozilla 文档，但 Chrome 在上下文中也有此方法。）