javascriptでレンダリングされたsvgイメージを.pngファイルとしてローカルディスクに保存します

Question

JavaScriptの上級ユーザーではなくSVGを初めて使用しています。私は動的にjavascriptによってレンダリングされるコンテンツを持つWebページを持っています。 Internet Explorerでsvgコンテンツを右クリックすると、「Save Picture As」オプションが表示され、コンテンツをpngまたはsvgとして保存できます。

どのように私はプログラム的にボタンを持っていることによってそれを行うと、ユーザーが自分のマシンにPNG形式でコンテンツを保存することができます。

Answer 1

私の研究からサーバーにSVGコンテンツを送信し、それがファイルのダウンロードとして保存するデータを返すことなく、これを行う方法はありません。

しかし、これは、単一のAJAXスタイルの要求を達成することは難しいですし、解決策は驚くほど複雑です。他の人はこれを説明する他の投稿にリンクしていますが、私はすでに同じ回答をしており、どれもそれをとてもうまく説明していません。

1. JavaScriptを使用SVGコンテンツをシリアル化する：ここで

   は私のために働いた手順です。

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

2. そのsrc提出したURLである隠されたiframeを作成します。 idを付けてください。
3. 隠しファイルinputを作成します。このinputのvalueをシリアル化されたSVGコンテンツに設定します。
4. そのターゲットidがiframeに与えられ、そしてそのaction提出したURLでフォームを作成します。 の中にinputを入れてください。
5. formを送信してください。

6. サーバー上では、SVGドキュメントをPNGに変換するために、使用できるツールを使用します（私は.NETを使用していないため、あなた自身でここにいます...）。ヘッダーを使用することを確認して、クライアントにPNGのコンテンツを送信する：

   Content-Type:image/png

   Content-Disposition:attachment; filename=mypng.png

これはブラウザ - ですが、返されたコンテンツ上のファイルのダウンロードを開始すべきブラウザファイルのダウンロードダイアログを開くのではなく、新しいタブで画像を開くことを選択するブラウザがあります。ここで

は、AJAXの作業を行います（不完全な）機能（jQueryのを使用していますが、あなたのアイデアを得る必要があります）です。あなたはPNGに変換する前に、サーバー上でそれをデコードする必要がありますので、この、SVGコンテンツのURLは、コードすること

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(); 
} 

注：dataは、シリアライズSVGです。

はまた、あなたが外部スタイルシートであなたのSVGのスタイルを定義した場合、彼らはシリアライズされないことに注意してください。私はこの理由から、すべてのスタイルを要素にインラインで入れてpresentation attributesと決めました。

こちらがお役に立てば幸いです。