高质量画布drawImage - Javascript

Question

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

一个div“画布”来附加所有的画布( konva-canvas

• an

• a div "canvas0/canvas1“等等)，最后添加每个自动生成的div "konvajs-content"

• and，多个画布(取决于

的层数)。

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

我可以根据画布的数量导出多页的pdf，但是从画布上画出来的图像质量很低。最后，我的疑问是，我怎样才能以更高的质量出口？

Answer 1

我有一个巧妙的办法来提高分辨率。step 1使您的画布大两倍于此：

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

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

canvas{ width:100%; }

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

希望这对你有用。

Answer 2

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

stage.toDataURL()

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

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

https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html