使用原始 UInt16Array 值 javascript 渲染到 canvas

Question

我正在尝试从 javascript 中的 Uint16Array 渲染图像。我没有收到任何捕获到的错误，但是 canvas.

没有任何渲染


const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const bufferMemoryAllocation = cellCount*2; //double the size 2bytes--16bits--per memory slot
const bitArray = new SharedArrayBuffer(bufferMemoryAllocation); // double the number of cells
const pixelData = new SharedArrayBuffer(bufferMemoryAllocation);
const pixelDataCanvas =  new Uint16Array(pixelData);

const videoResolutions = [{name: "test", height: 1000, width:1000},{name:"1080", height: 1080, width:1920},{name:"4k", height: 2160, width:3840}];
canvas.height = videoResolutions[2].height;
canvas.width =  videoResolutions[2].width;

const cellScale = 2;
const drawHeight = Math.floor(canvas.height/cellScale);

const drawWidth = Math.floor(canvas.width/cellScale);
const cellCount=drawHeight*drawWidth;


function renderToCanvas()
    {
    ctx.drawImage(renderToImage(pixelDataCanvas),0,0,drawWidth,drawHeight); 
}
function renderToImage(pixelDataReffernce)
    {let imageObject = new Image(canvas.height,canvas.width);
    let imageString = 'data:image/bmp;base64,'+btoa(pixelDataReffernce);
    imageObject.src = imageString;
    // console.log(imageObject);
    return imageObject;
}

pixelDataReffernce 控制台输出为::

  Uint16Array(2073600) [0, 0, 0, 0, 0, 0, 0, 0, 1024, 1024, 1024, 0, 0, 0, 0, 1024, 0, 0, 0, 1024, 1024, 1024, 0, 0, 0, 0, 0, 1024, 0, 0, 0, 0, 1024, 0, 1024, 1024, 1024, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1024, 0, 0, 0...

编辑_

是因为我没有使用 4 通道颜色阵列，而是使用了颜色的二进制通道。解决方案是将记录颜色的大小增加到 4 个字节长，并在主线程上查看为 1 个字节长。但是：如果我尝试使用
访问 SharedMemory new Uint8ClampedArray(data.buffer)，我收到以下控制台警告。

Uncaught TypeError: Failed to construct 'ImageData': The provided ArrayBufferView value must not be shared.

所以下一步是在主线程上创建临时数组；

    const pixelTransViewer = new Uint8Array(pixelData);
    const tA = new Uint8ClampedArray(data.buffer);
    for(let i=0;i<tA.length;i++)
        {   
        for(let j=0;j < 8;j++)
            {
            tA[i]=setBitState(tA[i],j,checkBit(pixelTransViewer[i],j));
        }
    }
    const img = new ImageData(tA, span);

但这实际上只是将信息从 sharedMememory 重新压缩到每个渲染的新内存槽中……有效地将相同的信息绘制到数组中两次。有没有更快的方法让我将 pixelData 从 sharedMemory 中取出并放到 canvas?

Answer 1

如果您拥有的是原始 RGBA 像素数据，那么您只需要 create an ImageData from your Uint16Array and put it on your canvas。

const img_width = 50;
const img_height = 50;
const data = new Uint16Array((img_width * img_height) * 2 );
// make some noise
crypto.getRandomValues(data);

const canvas = document.getElementById('canvas');
canvas.width = img_width;
canvas.height = img_height;
const ctx = canvas.getContext('2d');
const img = new ImageData(
  new Uint8ClampedArray(data.buffer),
  img_width,
  img_height
);
ctx.putImageData( img, 0, 0 );

<canvas id="canvas"></canvas>

你的代码没有产生任何错误，因为你没有听它。如果您向 imageObject 的 error 事件添加一个侦听器，您会发现它无法加载您为其提供的内容，因为图像不仅仅是原始像素数据，它还具有 headers，至少能说出图片的大小。

使用原始 UInt16Array 值 javascript 渲染到 canvas

rendering to the canvas usiing raw UInt16Array values javascript

javascript

canvas

image-processing

html5-canvas

uint16