Question

我使用Webworker处理Canvas中的像素数组并在返回之后 - 分配给ImageData数组。 Firefox运行良好，但Chromium将一个空像素数组放入Canvas。调查显示数组复制不起作用，导致数组有无效元素。数组切片也没有帮助，只有通过for的每个元素都有帮助，但我想知道这里有什么问题？

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

那告诉我们什么？那么像素数据数组应该具有类似方法的数组nowhere states。

Ergo，只在可用时使用.slice，否则请执行for loop副本，并且还要在2个以上的浏览器中进行测试。

Answer 2

调用slice with just the start parameter是Spidermonkey扩展。请尝试指定开始和结束：

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

修改 createImageData会返回ImageData object哪些属性为只读属性。所以你不能改变data。使用createImageData在 CanvasRenderingContext2D 中从另一个 ImageData 对象创建 ImageData 对象：

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

Answer 3

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

Chromium不会复制数组值

3 个答案: