将 SVG 组转换为多个“单独的”PN​​G 文件

Posted 2023-03-25

【中文标题】将 SVG 组转换为多个“单独的”PN​​G 文件

【英文标题】：Convert SVG groups into multiple "individual" PNG files

【发布时间】：2021-08-14 18:23:15

【问题描述】：

我有一个包含多个标签的 SVG 文件。将文件加载到 html 画布中时，这些组被识别为单独的对象。但是，我想使用 javascript / Node 将这些单独的对象中的每一个转换为它们各自的图像 PNG URI 字符串。

例如，输入一个包含 3 个对象的 SVG 文件应该返回一个包含每个对象的 3 个 PNG URI 字符串的列表。我一直在思考这个问题，并在网上搜索了一个类似的问题，但没有找到任何有用的东西。

我目前的主要想法是使用 canvas.toDataURL() ，但是这会转换整个画布而不是单个对象。使用类似object.toDataURL() 的函数会很好，但它似乎不存在。

【参考方案1】：

您可以使用getBBox() 或getBoundingClientRect() 获取SVG 元素的边界。您可以使用该信息来确定该元素在 Canvas 上的位置。然后copy that portion of your Canvas to an offscreen Canvas 大小合适。然后对新的 Canvas 图像做任何你想做的事情。