使用 Javascript 或 WebAssembly 进行图像插值

Question

我有一张图片，我在画布上逐个像素地绘制。图像尺寸：512 * 256。当我制作这张1536 * 768的照片时，图像看起来非常糟糕。我想我可以使用插值来解决这个问题。但是我找不到一个好的JavaScript库。它在我找到的库中不起作用。

我的代码如下。我根据值找到等效的颜色，并将该颜色反映在屏幕上。

function ImageData(ctx, points) {
var data = ctx.createImageData(512, 256);
for (var i = 0; i < data.data.length; i += 4)
{
var colorIndex = GetColorCode(points[i/4], minColorIndex, maxColorIndex);
var color = colormap[colorIndex];
data.data[i+0] = color[0];
data.data[i+1] = color[1];
data.data[i+2] = color[2];
data.data[i+3] = 255;
}
return data;
}
function Draw (points)
{
var canvas = document.getElementById("myCanvas");
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
var data = ImageData(ctx, points);
ctx.putImageData(data, 0, 0);
}

有没有人可以帮助我解决这个问题？

Answer 1

重新采样 ImageData 的简单方法是将其按其实际大小放置，然后在自身上绘制目标画布，重新缩放，只需使用drawImage即可。

const canvas = document.getElementById( 'canvas' );
const ctx = canvas.getContext( '2d' );
// prepare our 50*50 ImageData
const data = new Uint32Array( 50 * 50 );
crypto.getRandomValues( data ); // make some noise
const imgData = new ImageData( new Uint8ClampedArray( data.buffer ), 50, 50 );
// put it on canvas @scale(1)
ctx.putImageData( imgData, 0, 0 );
// at this step, our canvas only contains this 50*50 ImageData
// resize using the default interpolation
// we first change the composite mode to be able to clear while drawing
ctx.globalCompositeOperation = "copy";
ctx.scale( 10, 10 ); // so 500x500
// newest browsers can control interpolation quality
ctx.imageSmoothingQuality = "high";
ctx.drawImage( canvas, 0, 0 );
// clean
ctx.globalCompositeOperation = "source-over";
ctx.setTransform( 1, 0, 0, 1, 0, 0);

<canvas id="canvas" width="500" height="500"></canvas>

为了避免插值(最近邻(，然后执行相同的操作，但imageSmoothingEnabled设置为 false：

const canvas = document.getElementById( 'canvas' );
const ctx = canvas.getContext( '2d' );
const data = new Uint32Array( 50 * 50 );
crypto.getRandomValues( data ); // make some noise
const imgData = new ImageData( new Uint8ClampedArray( data.buffer ), 50, 50 );
ctx.putImageData( imgData, 0, 0 );
ctx.globalCompositeOperation = "copy";
ctx.scale( 10, 10 ); // so 500x500
ctx.imageSmoothingEnabled = false;
ctx.drawImage( canvas, 0, 0 );
// clean
ctx.imageSmoothingEnabled = true;
ctx.globalCompositeOperation = "source-over";
ctx.setTransform( 1, 0, 0, 1, 0, 0);

<canvas id="canvas" width="500" height="500"></canvas>