Question

要将单个图像传递给工作线程，我将执行以下操作

    var image = ctx.getImageData(0, 0, data.width, data.height)); 

    var tData = new Uint8ClampedArray(data.width*data.height*4); 
    tData.set(image.data);

    let message = {function: "my function", buffer: tData.buffer}

    worker.postMessage(message, [tData.buffer]);

这对于单个图像工作正常，但是现在我想使用循环发送可变数量的图像。规范中允许发送多个数组（例如worker.postMessage（message，[array1，array2]）;），但是您不能动态更改图像的数量。

let imageDataArray=[];

for(let i=0;i<images.length;i++){   

    var tData = new Uint8ClampedArray(data.width*data.height*4); 

    tData.set(images[i].data);

    imageDataArray.push(tData.buffer);
}

let message = {function: "my function", buffer: imageDataArray}

worker.postMessage(message, [imageDataArray]);

，但是由于数据类型不可传输，因此它无法正常工作。有适当的方法做到这一点吗？

Uncaught TypeError: Failed to execute 'postMessage' on 'Worker': Value at index 0 does not have a transferable type.

Answer 1

最后一行应该是（注意：不需要方括号）。

worker.postMessage(message, imageDataArray);

然后在工作器中像

一样访问数据

let imageIndex = 0;
let buf = event.data.buffer[imageIndex];
let image = new Uint8Array(buf);

// do something with image
// ....

// return it back
postMessage(event.data, event.data.buffer);

然后在调用函数中，它需要由数组索引访问

var image = new Uint8ClampedArray(event.data.buffer[imageIndex]);

然后您可以像使用它

let imageData = ctx.getImageData(0, 0, width, height);

imageData.data.set(image);

// write the data to the canvas
ctx.putImageData(imageData, 0, 0);

并非所有浏览器都支持多张图片，因此您应该首先通过对worker的数组参数进行虚拟测试来检查兼容性。

如何将数组中的多个数据作为可传递对象传递

1 个答案: