首页 文章

高分辨率HTML5画布截图

提问于
浏览 次
0

我一直在尝试使用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();
}

现在的问题是缩放的图像模糊和像素化，并没有任何好处 . 这是怎么回事？

javascript html5 html5-canvas

1 回答

  • 2

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

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

    回复于

相关问题