P5js SVG导出

Question

我有一个P5js草图，该草图创建了一种字体，用户可以键入所需的任何字体。我想允许用户下载其结果的svg / pdf（矢量）版本。到目前为止，我已经成功地让他们使用保存顺序下载了.jpg版本并保存了我的屏幕快照。有任何想法吗？

Answer 1

这是一个旧线程，但也许我的解决方案对某人有用。要将 P5js 中的矢量图形导出到 SVG 文件，首先我使用p5.svg.js库中的 SVG 渲染器 - 这会将svg元素直接放入 HTML 文档中。导出是提取该元素的内容（通过outerHTML属性）并将其保存到文件中（如本文中所示）。例如，您的“另存为 SVG”按钮回调函数可能如下所示：

function downloadSvg()
{
    let svgElement = document.getElementsByTagName('svg')[0];
    let svg = svgElement.outerHTML;
    let file = new Blob([svg], { type: 'plain/text' });
    let a = document.createElement("a"), url = URL.createObjectURL(file);

    a.href = url;
    a.download = 'exported.svg';    
    document.body.appendChild(a);
    a.click();

    setTimeout(function() 
    {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);  
    }, 0); 
}

Answer 2

从谷歌搜索“p5.js svg”来看，p5.js 中似乎没有内置的方法来处理 SVG 图像。

然而，该搜索返回了几个有希望的结果：

这是一个 GitHub 问题，其中讨论了有关在 p5.js 中使用 SVG 的问题。

这是一个尝试向 p5.js 添加 SVG 支持的项目：

p5.SVG 的主要目标是为 p5.js 提供 SVG 运行时，以便我们可以在 <svg> 中使用 p5 强大的 API 进行绘制，将内容保存到 svg 文件并在不进行光栅化的情况下操作现有的 SVG 文件。

另一个讨论链接到另外两个 SVG 库。

p5.SVG 库听起来特别有前途。我建议您尝试一下，如果遇到困难，请发布MCVE 。