尝试从 canvas 上的像素阵列绘制图像

Question

我有一个包含 256 个值的像素数组，看起来像这样：

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

我想要实现的是，将这个像素阵列图像绘制到 canvas 上。我之所以需要这个，是因为我需要根据卷积值重新计算像素数组，以使用特定的过滤器重新绘制图像。

我目前正在尝试使用它来绘制它：

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);
}

使用上面的代码在 canvas 上没有任何反应。我相当确定我做错了什么，但我不确定是什么。如果有人能够为我指明正确的方向，将不胜感激。

Answer 1

您显示的日志不能是 Uint8ClampedArray 中的一个。
固定的 Uint8 值不能为负数，也不能为浮点数。

因此这些要么是 32 位浮点值，要么是 64 位浮点值。

一旦你确定它是哪个，你可以通过

将它转换为钳制的 Uint8 值

const data = new Uint8ClampedArray( original_data.buffer );

如果 original_data 已经是一个 TypedArray。

如果它不是，而是一个普通数组，您必须首先从该数组中的值重建一个 TypedArray，然后进行相同的转换。

假设 64 位浮点值：

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：如果不需要 canvas 上的像素，请不要调用 getImageData，更喜欢 ctx.createImageData(width, height) 甚至new ImageData(width, height)，这将避免你的 canvas 位图缓冲区被（缓慢地）从 GPU 移动到 CPU 没有任何意义

尝试从 canvas 上的像素阵列绘制图像

Trying to draw image from pixel array on canvas

javascript

canvas

image

image-processing

computer-vision