Web编辑器的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 Canvas。 然后，您可以从画布创建图像PNG / JPG。

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

更多信息：

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