javascript - 高质量的画布drawImage - Javascript

Question

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

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

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

score 1 · Accepted Answer

我有一个聪明的技巧来提高分辨率。 step 1 像这样让你的画布大两倍：

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

step 2 要使画布覆盖整个宽度，请从 css 中设置其宽度和高度，如下所示：

canvas{ width:100%; }

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

希望这对你有用。

score 1 · Accepted Answer

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

stage.toDataURL()

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

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

2 回答 2