高分辨率 HTML5 画布屏幕截图

Question

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

然而，我的策略是在屏幕外创建一个临时画布，如下所示：

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

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

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