高质量的画布drawImage - Javascript答案

【问题标题】：Canvas drawImage with high quality - Javascript高质量的画布drawImage - Javascript
【发布时间】：2021-08-06 20:51:47
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

stage.toDataURL()

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

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

【讨论】：

嗨@lavrton，感谢您的回答。如果我直接从 konva-canvas 导出到 pdf，那将很有用。但我使用 document.getContext('2d') 添加图像，然后添加到最终 PDF，这是画布内容质量下降的地方。

【解决方案2】：

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

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

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

canvas{ width:100%; }

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

希望对你有用。

【讨论】：