同一映像的不同ArrayBuffer（在Worker问题中创建ImageData）

Question

我试图在Worker中创建ImageData，只需将带有图像URL、宽度和高度的消息发布到Worker中。为了让它工作，我需要获取图像并获取ArrayBuffer。这样我就可以创建新的ImageData：

//worker.ts
fetch(e.data.url)
  .then( r => r.arrayBuffer() )
  .then( buffer => {
      console.log(buffer.byteLength); // 4022
      new ImageData((new Uint8ClampedArray(buffer)), e.data.width, e.data.height);
  });

我得到以下错误：输入数据字节长度不是（4*宽度）的倍数。

对于Chrome，我能够向Worker发布的不仅仅是URL，还有之前使用canvas在主线程中创建的整个ArrayBuffer，这很有效：

//main thread
const canvas = typeof OffscreenCanvas !== 'undefined' ?
   new OffscreenCanvas(img.width, img.height) :
   document.createElement('canvas'),
   ctx = canvas.getContext('2d');

ctx.drawImage(img, 0, 0, img.width, img.height);
const imageData: ImageData = ctx.getImageData(0, 0, img.width, img.height);
console.log(imageData.data.buffer.byteLength); // 106288

问题是使用Firefoxworker.postMessage（）只能处理较小的消息，如URL，而不能处理整个ArrayBuffer（序列化和反序列化大消息需要很长时间）。这就是为什么我尝试只发送网址、高度、宽度和在工人本身中获取图像的方法。问题是在Worker中获取的ArrayBuffer——它比在主线程中使用画布创建的要小得多（相同的网址，不同的方法，不同的ArrayBuffer）。如果我将有相同的ArrayBuffer在工人，ImageData将被创建（不抛出错误）。

我的问题是我做错了什么，我如何创建ImageData后，使用提取/axios等获取图像。

Answer 1

图像数据表示绘制时将成为像素的红绿蓝和阿尔法值。

另一方面，图像文件必须具有元数据。即使图像是您可以发明的最基本的位图格式，它仍然至少需要宽度或高度信息。

因此，您获取的文件不仅仅是像素的RGBA通道值，它是一个二进制数据，需要对其进行解析、可能未压缩、解码，甚至可能在访问这些RGBA通道之前进行一些颜色空间处理。

不要克隆ArrayBuffer，转移它，这不需要时间。

const worker_script = document.querySelector( '[type="worker-script"]' );
const worker_content = worker_script.textContent;
const worker_blob = new Blob( [ worker_content ], { type: 'text/javascript' } );
const worker_url = URL.createObjectURL( worker_blob );
const worker = new Worker( worker_url );

let start;
worker.onmessage = e => {
  console.log( e.data );
  console.log( 'it took ' + (performance.now() - start) + 'ms to go from main thread to worker and back to main' );
};

const img = new Image();
img.onload = e => {
  const canvas = document.createElement( 'canvas' );
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext( '2d' );
  ctx.drawImage( img, 0, 0, img.width, img.height );
  const imageData= ctx.getImageData( 0, 0, img.width, img.height );
  start = performance.now();
  worker.postMessage(
    imageData,
    [ imageData.data.buffer ] // transfer the ArrayBuffer
  );
};
img.crossOrigin = "anonymous";
img.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";

<script type="worker-script">
  onmessage = e => {
    const imageData = e.data;
    postMessage(
`worker received a ${ imageData.width } x ${ imageData.height } ImageData,
whose buffer's size is ${ imageData.data.buffer.byteLength }bytes`
    );
  };
</script>