將JavaScript呈現的svg圖像保存爲本地磁盤作爲.png文件

我是SVG新手，而不是JavaScript的高級用戶。我有一個由JavaScript動態呈現svg內容的網頁。在Internet Explorer中，當我右鍵單擊svg內容時，我會看到「Save Picture As」選項，我可以將內容另存爲png或svg。將JavaScript呈現的svg圖像保存爲本地磁盤作爲.png文件

如何以編程方式通過一個按鈕執行操作，並允許用戶將內容保存到他們的機器上。

來源

2011-12-05 Chandan

由於瀏覽器的安全性，這應該是不可能的。只要想想如果您可以在未經用戶同意的情況下使用JavaScript將數據寫入用戶機器，就會帶來危險。 –

還有一個類似的問題。看到這個鏈接 http://stackoverflow.com/questions/2483919/how-to-save-svg-canvas-to-local-filesystem – lya

以前有類似的問題。看到這個一個 http://stackoverflow.com/questions/2483919/how-to-save-svg-canvas-to-local-filesystem – lya

從我的研究沒有辦法做到這一點，沒有發送svg內容到您的服務器，並讓它返回數據保存爲文件下載。

然而，即使這只是一個單一的AJAX風格的請求實現棘手，解決方案是驚人的令人費解。其他人與其他解釋這個問題的帖子有聯繫，但我已經經歷了相同的答案，沒有一個解釋得很好。

這裏是爲我工作的步驟：

使用JavaScript序列化SVG內容。

var svgString = new XMLSerializer().serializeToString(svgElement);
創建一個隱藏的iframe其src是提交網址。給它一個id。
創建一個隱藏的input。將此input的value設置爲序列化的SVG內容。
創建一個表單，其目標是id給予iframe，其action是提交url。將input置於form之內。
提交form。
在你的服務器上，使用任何可用的工具（我不使用.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內容，所以你必須要轉換成PNG之前，您的服務器上進行解碼。

另請注意，如果您在外部樣式表中爲SVG定義了樣式，則它們將不會被序列化。出於這個原因，我決定把所有樣式內聯在presentation attributes上。

我希望這會有所幫助。

來源

2012-01-14 09:26:48

謝謝託尼。它沒有幫助我想達到的目標，但它幫助我走向正確的方向！ – Chandan

將JavaScript呈現的svg圖像保存爲本地磁盤作爲.png文件

回答

相關問題