將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定義了樣式，則不會對它們進行序列化。 出於這個原因，我決定將所有樣式內聯在元素上作為表示屬性 。

我希望這有幫助。