除通过JavaScript来本地磁盘作为.png文件渲染SVG图像 [英] Save svg image rendered by a javascript to local disk as .png file

问题描述

我是新来的SVG和JavaScript的不是高级用户。我有被JavaScript动态呈现SVG内容的网页。在Internet Explorer中，当我右键单击SVG内容，我得到的选择图片另存为，我能够将内容保存为PNG或SVG。

I am new to SVG and not an advanced user of JavaScript. I have a webpage with svg content dynamically rendered by javascript. In Internet Explorer when I right click on the svg content, I get option "Save Picture As" and I am able to save the content as png or svg.

我如何编程方式做到这一点通过让一个按钮，允许用户将内容保存为PNG到他们的机器。

How do I programatically do it by having a button and allow user to save the content in png on to their machine.

推荐答案

从我的研究是没有办法做到这一点不发送SVG内容到您的服务器并让它返回数据保存为文件下载。

From my research there is no way to do this without sending the svg content to your server and having it return the data to save as a file download.

然而，即使是这样棘手的实现与单一的AJAX风格的要求，解决的办法是惊人费解。另一些国家将要解释这个其他职位，但我已经经历了同样的答案，没有人解释得非常好。

However, even this is tricky to achieve with a single AJAX-style request and the solution is amazingly convoluted. Others have linked to other posts that explain this, but I already went through the same answers and none of them explain it very well.

下面是为我工作的步骤：

Here are the steps that worked for me:

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

1. Use JavaScript to serialize the SVG content.

VAR svgString =新的XMLSerializer（）serializeToString（svgElement）;

在你的服务器，使用任何工具（我不​​使用.NET，所以你对你自己在这里...）到SVG文件转换为PNG。发送PNG内容返回给客户端，并确保使用头文件：

On your server, use whatever tools are available (I don't use .NET so you're on your own here...) to convert the SVG document to a PNG. Send the PNG content back to the client, making sure to use the headers:

内容类型：图像/ PNG

内容处置：附件;文件名= mypng.png

浏览器应该启动一个文件下载在返回的内容，虽然这是依赖于浏览器，我不能肯定，但有些浏览器可能会选择在新标签中打开打开一个文件下载对话框的图像，而不是

The browser should initiate a file download on the returned content, although this is browser-dependent and I'm not certain but some browsers may choose to open images in a new tab instead of opening a file download dialog.

下面是一个（不完全）函数，将做AJAX的工作（使用JQuery的，但你应该明白了吧）。 数据是序列化的SVG：

Here is an (imperfect) function that will do the AJAX work (uses JQuery but you should get the idea). data is the serialized 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恩codeS的SVG内容，所以你将不得不去$ C C $它在服务器上转换成PNG之前。

Note that this URL-encodes the SVG content, so you will have to decode it on your server before converting to PNG.

另外请注意，如果你在一个外部的样式表定义的样式为您的SVG，他们不会被序列化。我决定把所有的款式内联的元素 presentation属性出于这样的原因。

Also note that if you have defined styles for your SVG in an external stylesheet, they will not be serialized. I decided to put all styles inline on the elements as presentation attributes for this reason.

我希望这有助于。

这篇关于除通过JavaScript来本地磁盘作为.png文件渲染SVG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！