Question

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

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

好吧，我可以根据绘制的画布数量导出多页的pdf，但是从画布中绘制的图像质量非常低。最后，我的疑问是，我怎样才能以更高的质量导出它？

Answer 1

有一个聪明的技巧可以提高分辨率。 step 1 像这样将画布放大两倍：

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

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

canvas{ width:100%; }

就是这样。最后，您将图像分辨率提高一倍，并确保在 css 中使用 width:100%; 而不是在 html 中作为其属性。

希望对你有用。

Answer 2

如果您使用 Konva，您应该使用它的方法进行导出。

stage.toDataURL()

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

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