Question

所以我有一个javascript / html5页面，它对图像进行了大量的操作。因为它们很重，我想在一个线程中做那些，我用getImageData（）。数据将图像数据提取到核心。然后核心执行所有操作并发回所得到的像素信息数组。现在，回到主线程我想把结果放回图像，我通过从Image加载它来创建一个新的ImageData对象（var imgData = getImageData（...））然后我想要替换数据在ImageData对象中使用我从第二个线程获得的数据。但是imgData.data = newData什么都不做。有没有办法做到这一点，除了逐个元素地遍历数据数组？

Answer 1

您无法直接分配给imgData.data，您需要使用：

imgData.data.set(newData)

Answer 2

尝试：.putImageData(newData,x,y);

Answer 3

假设您有上下文ctx：

var imgData = ctx.createImageData(100, 100);
imgData.data = [/*Your array of pixel info*/]
ctx.putImageData(imgData, 100, 100);

应该这样做。

Answer 4

imageData是只读属性（https://developer.mozilla.org/en-US/docs/Web/API/ImageData/data）

Javascript ImageData：替换＆＃34;数据＆＃34;字段

4 个答案: