网页编辑器的 PDF/PNG 导出功能

Question

最近，我的公司给我传来了一个基于 Web 的图形编辑器项目来处理，其中编辑器内的内容可以移动、旋转、调整大小、遮罩、更改字体......等

到目前为止，我能够处理大部分客户端功能。但是，我坚持使用那些导出PDF/PNG功能，这让我很头疼。我一直在研究像JSPDF和HTML2Canvas这样的插件，这些都不能解决我的问题(例如HTML2Canvas不支持clip-path css属性)。

我想知道像Canva或Piktochart这样的流行产品是如何开发如此惊人的导出功能的。因此，我想向具有构建Web编辑器经验的开发人员寻求一些建议：

1. 是否可以仅使用前端技术开发导出功能？
2. 开发导出功能需要哪些知识。[斑点？SVG ？
3. 后端对此功能有什么帮助吗？

PS：我只有2年的前端开发经验和一点后端知识。(是的，我一个人在做这个项目。

多谢！

Answer 1

您可以使用 JavaScript 库。您不需要后端。

• html2canvas - 您可以为任何 HTML 内容创建 HTML 画布。然后，您可以从画布创建图像PNG/JPG。

• pdf.js - 您可以通过创建新的空白页来手动创建 PDF，然后开始在其上绘图。您还可以在 PDF 上绘制图像或画布。

更多信息：

• 画布元素toDataURL- https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
• 触发从数据 URL 下载 - http://danml.com/download.html