image - html5画布，如何导出2x图像？

Question

我设计了一个带有 html5 画布的网络应用程序。要导出图像，代码如下：

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

有什么方法可以导出 2x 图像吗？

它适用于苹果视网膜显示器等 hdpi 显示器。

Answer 1

是的，有几种方法，但每次拉伸非矢量图像时，都会出现一些像素失真。但是，如果它只有两倍的大小，您可以使用最近的邻居来摆脱它。下面的示例显示了两种不同的方法，一种只是拉伸图像，另一种使用最近邻，缩放因子为 2。

现场演示

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 在这里也有一个很好的例子，展示了几种不同的方法可以完成图像大小调整。