从复杂的 DOM 生成图像（包括 iframe）

Question

我正在开发一个类似于 Canva 的应用程序，其中“画布”是由标准 DOM 元素而不是 HTML 元素构建的。我目前正在研究如何导出画布 DOM 并满足以下要求：

1. 复杂的内容处理：导出的视图应该准确 捕获复杂的 DOM 组件，尤其是 iframe。
2. 多样化的导出格式：解决方案应支持各种文件 类型，特别是 png、jpg、svg，最好有 mp4。
3. 高质量导出：导出的文件应保持高品质 分辨率和保真度，与原始内容非常相似。
4. 支持透明图像。

我正在研究 Puppeteer 和 html2canvas 等工具。虽然两者都有希望，但我不确定它们是否能够满足上述要求以及它们的易用性。我之前用过html2canvas，有点头疼

像 Canva 这样可能有类似要求的平台如何管理此类导出？这个可能性不大，但来自 Canva 的任何人都可以回答：D

对于替代方法的建议、见解或建议将不胜感激。

Answer 1

我听说过的另一个可以执行此操作的工具是

dom-to-image

(https://github.com/tsayen/dom-to-image)。它支持 PNG/JPEG/SVG，并且似乎支持复杂的 DOM（尽管我不太确定 iframe）。还有一个名为

dom-to-image

的

dom-to-image-more

分支，添加了一些修复 (https://github.com/1904labs/dom-to-image-more)。希望这有帮助！