I'm attempting to display an image from a Uint16Array using Javascript. Despite not encountering any errors, the canvas remains blank.
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const bufferMemoryAllocation = cellCount*2;
const bitArray = new SharedArrayBuffer(bufferMemoryAllocation);
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 consoles out to::
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...
EDIT_
The issue was that I was utilizing a binary channel for color instead of a 4-channel color array. The fix involved extending the size of the recorded color to 4 bytes while viewing it as 1 byte on the main thread.
However, trying to access the SharedMemory with
new Uint8ClampedArray(data.buffer) resulted in the following console warning.
Uncaught TypeError: Failed to construct 'ImageData': The provided ArrayBufferView value must not be shared.
This led me to create a temporary array on the main thread;
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);
Unfortunately, this process essentially duplicates the information from sharedMemory to a new memory slot for every rendering cycle. Is there a more efficient way for me to extract the pixelData from sharedMemory and transfer it to the canvas?