将javascript呈现的svg图像保存为本地磁盘为.png文件

Question

我是SVG的新手，而不是JavaScript的高级用户。 我有一个网页，其中包含由javascript动态呈现的svg内容。 在Internet Explorer中，当我右键单击svg内容时，我得到“将图片另存为”选项，我可以将内容保存为png或svg。

如何通过按钮以编程方式执行此操作，并允许用户将png中的内容保存到其计算机上。

Answer 1

根据我的研究，如果不将svg内容发送到您的服务器并让它返回数据以保存为文件下载，则无法执行此操作。

但是，使用单个AJAX样式的请求即使这很难实现，解决方案也令人费解。 其他人已经解释了其他解释这一点的帖子，但我已经完成了相同的答案，但没有一个能够很好地解释它。

以下是适合我的步骤：

1. 使用JavaScript序列化SVG内容。

   var svgString = new XMLSerializer().serializeToString(svgElement);

2. 创建一个隐藏的iframe其src是提交URL。 给它一个id 。
3. 创建隐藏的input 。 将此input的value设置为序列化SVG内容。
4. 创建一个表单，其目标是为iframe提供的id ，其action是提交URL。 将input放在form 。
5. 提交form 。

6. 在您的服务器上，使用任何可用的工具（我不使用.NET，因此您自己在这里......）将SVG文档转换为PNG。 将PNG内容发送回客户端，确保使用标头：

   Content-Type:image/png

   Content-Disposition:attachment; filename=mypng.png

浏览器应该在返回的内容上启动文件下载，虽然这取决于浏览器，但我不确定，但有些浏览器可能会选择在新选项卡中打开图像而不是打开文件下载对话框。

这是一个（不完美的）函数，它将执行AJAX工作（使用JQuery，但你应该得到这个想法）。 data是序列化的SVG：

function ajaxFileDownload(url, data) {
    var iframeId = "uniqueIFrameId";     // Change this to fit your code
    var iframe = $("#" + iframeId); 

    // Remove old iframe if there
    if(iframe) { 
        iframe.remove(); 
    }

    // Create new iframe 
    iframe = $('<iframe src=""' + url + '"" name="' + iframeId + '" id="' + iframeId + '"></iframe>')
        .appendTo(document.body)
        .hide(); 

    // Create input
    var input = '<input type="hidden" name="data" value="' + encodeURIComponent(data) + '" />'; 

    // Create form to send request 
    $('<form action="' + url + '" method="' + 'POST' + '" target="' + iframeId + '">' + input + '</form>')
        .appendTo(document.body)
        .submit()
        .remove();
}

请注意，此URL对SVG内容进行URL编码，因此您必须在转换为PNG之前在服务器上对其进行解码。

另请注意，如果在外部样式表中为SVG定义了样式，则不会对它们进行序列化。 出于这个原因，我决定将所有样式内联在元素上作为表示属性 。

我希望这有帮助。