试图从画布上的像素阵列中绘制图像

Question

我有一个256值的像素阵列，看起来像这样：

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

我试图实现的是，在画布上绘制这个像素阵列图像。我之所以需要这个，是因为我需要根据卷积值重新计算像素阵列，用特定的滤波器重新绘制图像

我目前正在尝试使用以下方法绘制它：

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

使用上面的代码，画布上不会发生任何事情。我很确定我做错了什么，但我不确定是什么。如果有人能为我指明正确的方向，我将不胜感激。

Answer 1

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

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

一旦您确定了它是什么，您就可以通过将其转换为钳制的Uint8值

const data = new Uint8ClampedArray( original_data.buffer );

如果CCD_ 2已经是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：如果你不需要画布上的像素，不要调用getImageData，更喜欢ctx.createImageData(宽度，高度(甚至新的ImageData(宽，高度(，这两种方法都可以避免你的画布位图缓冲区从GPU(缓慢(移到CPU而不需要任何东西