javascript - 使用 Javascript 或 WebAssembly 进行图像插值

Question

我有一张在 Canvas 上逐像素绘制的图片。图像的尺寸:512 * 256。当我将这张图片设为1536 * 768时，图像看起来很糟糕。我想我可以使用插值来解决这个问题。但我找不到好的 javascript 库。它在我找到的库中不起作用。

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

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 的简单方法是将其置于实际大小，然后在其自身上绘制目标 Canvas ，重新缩放，只需使用 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>