javascript - 高分辨率 HTML5 Canvas 屏幕截图

Question

我一直在尝试获取 HTML5 Canvas 元素的高分辨率屏幕截图，该元素用于由矩形和圆形组成的可视化。 canvas.toDataURL() 效果很好，只是生成的图像仅限于原始 Canvas 的大小。我真正想要的是截取原始 Canvas 4 或 5 倍的屏幕截图。

但是，我的策略是在屏幕外创建一个临时 Canvas ，如下所示:

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();
}

现在的问题是缩放后的图像模糊且像素化，对我没有任何好处。有什么办法解决这个问题吗？

Answer 1

不幸的是，虽然您可以像在矢量图像中一样绘制路径，但一旦绘制它们就会变得光栅化，并且在没有插值的情况下无法缩放。

相反，您需要完全重绘所有内容，将所有坐标乘以比例因子，才能正确渲染路径元素。