Canvas 高质量绘制图像 - Javascript

Question

我正在使用 konva.js 在 HTML Canvas 上绘制元素。当用户在 canvas 中完成其设计时，可以将创作导出为 PDF 文件。在这种情况下，我的 HTML 结构如下：

因此，要导出 PDF，我必须遍历每个 div“canvas + 数字”，然后遍历每个 canvas 子节点以使用 getContext('2d' ) 和 drawImage 函数用每个 canvas 的内容绘制图像（希望这个描述不会太混乱...）。

好吧，我可以根据绘制的 canvas 数量导出多页 pdf，但是从 canvas 绘制的图像质量很差。最后，我的疑问是，如何才能导出更高质量的文件？

Answer 1

我有一个提高分辨率的小窍门。 step 1 像这样使 canvas 大两倍：

canvas.width=innerWidth*2;
canvas.height=innerHeight*2;

step 2 要使 canvas 覆盖整个宽度，请像这样从 css 设置其宽度和高度：

canvas{ width:100%; }

就是这样。最后你将图像分辨率加倍，并确保你在 css 中使用 width:100%; 而不是在 html.

中使用它的属性

希望对你有用。

Answer 2

如果您正在使用 Konva，您应该使用其方法进行导出。

stage.toDataURL()

如果您想提高输出图像的质量，可以使用 pixelRatio 属性。

// it will produce 4x bigger image
stage.toDataURL({ pixelRatio: 2})

Canvas drawImage with high quality - Javascript