javascript - P5js SVG 导出

Question

我有一个 P5js 草图，它创建了一种用户可以键入他们想要的任何内容的字体。我想让用户下载他们结果的 svg/pdf(矢量)版本。到目前为止，我已经成功地让他们使用保存命令下载了 .jpg 版本并保存了我的屏幕截图。有什么想法吗？

Answer 1

这是一个旧线程，但也许我的解决方案对某些人有用。要将 P5js 中的矢量图形导出到 SVG 文件，首先我使用来自 p5.svg.js 的 SVG 渲染器library - 这会将 svg 元素直接放入 HTML 文档中。导出是提取该元素的内容(通过 outerHTML 属性)并将其保存到文件中(如 this 帖子)。因此，例如，您的“另存为 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); 
}