CODEWITHSUNDEEP
javascriptimageimage-processingcanvascomputer-vision
Sebastian
Sebastian

Reputation: 87

Trying to draw image from pixel array on canvas

I have a pixel-array of 256 values that looks something like this:

[-7.440151952041672e-45, -3.549412689007182e-44, -1.6725845544560632e-43, -7.785321621854041e-43, -3.579496378208359e-42, -1.6256392941914181e-41, ...]

What I am trying to achieve is, to draw this pixel array image onto the canvas. The reason why I need this, is because I will need recalculate the pixel array based on a convolution value to redraw the image with a specific filter over it.

I am currently trying to draw it using this:

function generate_image() {
    // create an offscreen canvas
  var canvas = document.createElement('canvas');
  canvas.setAttribute("id", "canvas_id");
  canvas.style.cssText = 'width: 400px; height: 400px; z-index: 1;';
  document.body.appendChild(canvas);
  var ctx=canvas.getContext("2d");

  var images = generate_image_array_data();

  // This is the pixel array of the image
  var image = images[2];

  var palette = ctx.getImageData(0, 0, 160, 120);

  palette.data.set(new Uint8ClampedArray(image));

  ctx.putImageData(palette, 0, 0);
}

Using the above code nothing happens on the canvas. I am fairly certain I am doing something wrong, but I am not exactly sure what. If anyone would be able to point me in the right direction, that would be greatly appreciated.

Upvotes: 1

Views: 1563

Answers (1)

Kaiido
Kaiido

Reputation: 136618

The log you shown can not be the one of an Uint8ClampedArray.
Clamped Uint8 values can't be negative, nor floats.

These are thus either 32 bits float values, or 64 bits float ones.

Once you determine which it is, you can convert it to clamped Uint8 values by doing

const data = new Uint8ClampedArray( original_data.buffer );

if original_data is already a TypedArray.

In case it is not, but rather a normal Array, you'd have to first rebuild a TypedArray from the values in that Array and then do the same conversion.

Assuming 64 bits float values:

const data = new Uint8ClampedArray( new Float64Array( images[ 2 ] ).buffer );
const palette = new ImageData( data, 160, 120 );


generate_image();

function generate_image() {
  // create an offscreen canvas
  var canvas = document.createElement('canvas');
  canvas.setAttribute("id", "canvas_id");
  canvas.style.cssText = 'width: 400px; height: 400px; z-index: 1;';
  document.body.appendChild(canvas);
  var ctx=canvas.getContext("2d");

  var images = generate_image_array_data();

  // This is the pixel array of the image
  var image = images[2];

  var data = new Uint8ClampedArray( new Float64Array( image ).buffer );
  var palette = new ImageData(data, 3,4);
  ctx.putImageData(palette, 0, 0);
  
  ctx.imageSmootingEnabled = false;
  ctx.globalCompositeOperation = "copy";
  ctx.drawImage(canvas, 0, 0, 3, 4, 0, 0, canvas.width, canvas.height);
}
function generate_image_array_data() {
  return [, , [-7.440151952041672e-45, -3.549412689007182e-44, -1.6725845544560632e-43, -7.785321621854041e-43, -3.579496378208359e-42, -1.6256392941914181e-41 ] ];
}

PS: Don't call getImageData if you don't need the pixels on the canvas, prefer ctx.createImageData(width, height) or even new ImageData(width, height), which will both avoid your canvas bitmap buffer be (slowly) moved from the GPU to the CPU for nothing

Upvotes: 3

Related Questions