高分辨率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画布屏幕截图

回答

相关问题