19

次のように、キャンバスにレンダリングしている小さな画像があります。

ctx.drawImage(img, 0, 0, img.width*2, img.height*2);

シャープなアップサイズの画像 (画像ピクセルごとに 4 つの同一ピクセル) を表示したいと思います。ただし、このコード (Mac の Chrome 29) では画像がぼやけます。Photoshop の用語では、「Nearest Neighbour」ではなく「Bicubic」リサンプリングを使用しているように見えます。

あると便利な状況（レトロゲームなど）で、鮮明なアップサイズ画像を生成することは可能ですか、それともサーバー上に画像のサイズごとに別の画像ファイルを用意する必要がありますか?

4

2 に答える 2

4

このフィドルを確認してください：http://jsfiddle.net/yPFjg/

画像をキャンバスにロードし、サイズ変更されたコピーを作成し、それをスプライトとして使用します。

少し変更するだけで、その場で画像のサイズを変更する画像ローダーを実装できます。

var ctx = document.getElementById('canvas1').getContext('2d');
var img = new Image();
var original = document.createElement("canvas");
var scaled = document.createElement("canvas");

img.onload = function() {
    var oc = original.getContext('2d');
    var sc = scaled.getContext('2d');
    oc.canvas.width = oc.canvas.height = 16;
    sc.canvas.width = sc.canvas.height = 32;
    oc.drawImage(this, 0, 0);    
    var od = oc.getImageData(0,0,16,16);
    var sd = sc.getImageData(0,0,32,32);
    for (var x=0; x<32; x++) {
        for (var y=0; y<32; y++) {
            for (var c=0; c<4; c++) {        
                // you can improve these calculations, I let them so for clarity        
                sd.data[(y*32+x)*4+c] = od.data[((y>>1)*16+(x>>1))*4+c];
            }
        }
    }
    sc.putImageData(sd, 0, 0);
    ctx.drawImage(scaled, 0, 0);    
}

img.src = document.getElementById('sprite').src;

getImageData に関する注意事項: 配列を持つオブジェクトを返します。配列のサイズは、高さ*幅*4 です。色成分は RGBA 順 (赤、緑、青、アルファ、各値 8 ビット) で格納されます。

于 2013-08-31T12:02:40.803 に答える