将图像存储在SharedArrayBuffer中

Question

我希望将大型texture.image的像素数据加载到SharedArrayBuffer中。是否有人有以最优雅的方式将大型texture.image存储在ArrayBuffer中的经验？

function GetImageData(image) {      
    const canvas = new OffscreenCanvas(image.width, image.height);
    const context = canvas.getContext('2d');
    context.drawImage( image, 0, 0 );

    const imageData = context.getImageData(0, 0, image.width, image.height);
    const data = imageData.data;

    //? 

    return new SharedArrayBuffer(  /*?*/  ));
}

我这样做正确吗？在有问号的地方，直到现在我都不知道该怎么做。我的目标是与多个工作线程共享图像数据。

Answer 1

我想我有：

function GetImageData(image) {
   let canvas = new OffscreenCanvas(image.width, image.height); 
   let context = canvas.getContext('2d'); 
   context.drawImage( image, 0, 0 );
            
   let imageData = context.getImageData(0, 0, image.width, image.height);
            
   const bytesInFloat32 = 4;
   //set size of the SharedArrayBuffer
   const sharedBuffer = new Float32Array(
      new SharedArrayBuffer(bytesInFloat32 * imageData.data.length)
   );
   
   //copy image data into the SharedArrayBuffer
   sharedBuffer.set(imageData.data, 0);
    
   //free up memory     
   canvas = context = imageData = null;

   return sharedBuffer;
}

我还在这里找到了一个关于SharedArrayBuffer和Worker主题的很好的链接