Javascript 使用原始UINT16数组值渲染到画布

我正在尝试用javascript呈现来自UINT16阵列的图像。 我没有收到任何捕获到的错误，但没有任何内容渲染到画布

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;

PixelDataRefference控制台输出到：：

  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字节长查看它。 但是：如果我尝试使用
新的uint8clampedaray（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);

const pixelTransViewer=新的Uint8Array（pixelData）；
const tA=新的Uint8ClampedArray（data.buffer）；
对于（设i=0；i如果您拥有的是原始RGBA像素数据，那么您所需要的只是从UINT16阵列和


const img_width=50；
常数img_高度=50；
常数数据=新UINT16阵列（（img_宽度*img_高度）*2）；
//制造一些噪音
加密。获取随机值（数据）；
const canvas=document.getElementById（'canvas'）；
canvas.width=img_width；
canvas.height=img\u高度；
const ctx=canvas.getContext（'2d'）；
const img=新图像数据(
新Uint8ClampedArray（data.buffer），
img_宽度，
img_高度
);
ctx.putImageData（img，0，0）；
我曾尝试添加addevent侦听器，但画布没有显示任何错误，ctx也没有附加任何错误，但在阅读您的评论后，我更改了格式以捕获8Bit4通道颜色数据，现在它可以很好地渲染到画布上……然而，缩放图像-我遇到的每个解决方案都无法达到只渲染一次图像。因此，这就是我现在正在努力解决的问题-使用更新编辑上面的帖子。“未捕获类型错误：无法构造“ImageData”：提供的ArrayBufferView值不能共享。”-我需要创建一个新数组并复制它-有没有办法直接使用sharedData？没有，数据必须属于ImageData。只需将其复制到普通的ArrayBuffer。顺便说一句，为什么需要SharedArrayBuffer？为了避免GC，只需存储该ImageData并在每一帧更新其ArrayBuffer，无需重新分配任何新内容。Ps:ed在StackOverflow中，以使现有答案无效的方式回答问题是不受欢迎的，而且被认为是苛刻的。更不用说在这样做时拒绝接受它了……我们更希望你用新的细节来问一个新问题。是的，很抱歉没有解释我为什么使用共享数组。你的方式很有效，带着一点爱。我很抱歉与webworkers并行运行计算（分割工作，使每个worker在一个部分上工作）-换句话说，你是说没有办法直接从共享内存创建映像吗？每次都需要将其分配给非共享内存？
    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);