html5 canvas，如何导出2x图片？

Question

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

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

有没有什么办法可以导出一个2倍图像？

这是为苹果视网膜显示器的hdpi显示。

Answer 1

是的，有几种方法，但每当你拉伸一个非矢量图像时，你会得到一些像素失真。但是，如果它的大小只有它的两倍，那么你可以用最近的邻居来避开它。下面的例子显示了两种不同的方法，一种只是拉伸图像，另一种使用最近的邻居，放大倍数为2。

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有这个here的一个很好的例子还有，呈现出一些不同的方法可以实现图像尺寸调整。