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的一個很好的例子還有，呈現出一些不同的方法可以實現圖像尺寸調整。