高分辨率HTML5畫布屏幕截圖

我一直在嘗試使用包含矩形和圓圈的可視化組件的HTML5 canvas元素的高分辨率截圖。 canvas.toDataURL()的效果很好，只不過所製作的圖像僅限於原始畫布的大小。我真正喜歡的是截取4或5倍於原始畫布的截圖。高分辨率HTML5畫布屏幕截圖

我的策略，然而，一直到建立一個臨時的帆布關閉屏幕像下面這樣：

function renderScreenshot(canvas, scaleFactor) { 
    var ctx = canvas.getContext('2d'); 
    var screenshotCanvas = document.createElement('canvas'); 
    var screenshotCtx = screenshotCanvas.getContext('2d'); 
    screenshotCanvas.width = canvas.width * scaleFactor; 
    screenshotCanvas.height = canvas.height * scaleFactor; 
    screenshotCtx.drawImage(canvas, 0, 0, canvas.width * scaleFactor, canvas.height * scaleFactor); 
    return screenshotCanvas.toDataURL(); 
}

現在的問題是，縮放後的圖像是模糊和像素化，並沒有做我任何好。這是什麼方式？

來源

2013-07-29 Sam

不幸的是，儘管您可以像繪製矢量圖一樣繪製路徑，但一旦繪製了它們，它們就會被柵格化並且無法在沒有插值的情況下進行縮放。

相反，您需要完全重新繪製所有內容，將所有座標乘以比例因子，以正確渲染路徑元素。

來源

2013-07-29 07:41:11

這是正確的，請參閱此主題以瞭解如何縮小圖像的示例：http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas?rq=1 – jdog

高分辨率HTML5畫布屏幕截圖

回答

相關問題