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

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

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

高分辨率HTML5画布截图

1 个答案: