我正在使用 konva.js 在 HTML Canvas 上绘制元素。当用户在画布中完成设计时,可以将创作导出为 PDF 文件。在这种情况下,我的 HTML 结构如下:
因此,要导出 PDF,我必须遍历每个 div“canvas + number”,然后遍历每个画布 childNodes 以使用 getContext('2d') 和 drawImage 函数来绘制包含每个画布内容的图像(希望这个描述不会太混乱......)。
好吧,我可以根据绘制的画布数量导出多页的pdf,但是从画布中绘制的图像质量非常低。最后,我的疑问是,我怎样才能以更高的质量导出它?
答案 0 :(得分:1)
有一个聪明的技巧可以提高分辨率。
step 1
像这样将画布放大两倍:
canvas.width=innerWidth*2;
canvas.height=innerHeight*2;
step 2
要使画布覆盖整个宽度,请像这样从 css 设置其宽度和高度:
canvas{ width:100%; }
就是这样。最后,您将图像分辨率提高一倍,并确保在 css 中使用 width:100%;
而不是在 html 中作为其属性。
希望对你有用。
答案 1 :(得分:1)
如果您使用 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