image - html5キャンバス、2x画像をエクスポートする方法は？

Question

html5キャンバスを使用してWebアプリを設計しました。画像をエクスポートするには、コードは次のようになります。

var img = canvas.toDataURL("image/png");

2倍の画像をエクスポートする方法はありますか？

アップル網膜ディスプレイのようなhdpiディスプレイ用です。

Answer 1

Yes there are a few ways but every time you stretch a non vector image you will get some pixel distortion. However if its only two times the size you could get away with it using nearest neighbor. The below example shows two different methods, one is just stretching the image, the other uses nearest neighbor with a zoom factor of two.

Live Demo

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    canvas2 = document.getElementById("canvas2"),
    ctx2 = canvas2.getContext("2d"),
    tempCtx = document.createElement('canvas').getContext('2d'),
    img = document.getElementById("testimg"),
    zoom = 2;

tempCtx.drawImage(img, 0, 0);
var imgData = tempCtx.getImageData(0, 0, img.width, img.height).data;

canvas.width = img.width * zoom;
canvas.height = img.height * zoom;;

// nearest neighbor
for (var x = 0; x < img.width; ++x) {
    for (var y = 0; y < img.height; ++y) {
        var i = (y * img.width + x) * 4;
        var r = imgData[i];
        var g = imgData[i + 1];
        var b = imgData[i + 2];
        var a = imgData[i + 3];
        ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + (a / 255) + ")";
        ctx.fillRect(x * zoom, y * zoom, zoom, zoom);
    }
}

// stretched
ctx2.drawImage(img, 0, 0, 140, 140);

@phrogz has a great example of this here as well, showing a few different ways you can accomplish image re-sizing.