[問題] JQuery圖片下載按鈕

[fr730149 ()]

請教各位前輩
我想作一個功能：
點一個"匯出"按鈕，就能把svg匯出成jpg或png之類的圖片檔
目前已作到，將svg轉成img tag
但不知如何把img弄成"另存新檔"的視窗，供使用者下載

在網路上有找到"FileSaver"套件，但這個似乎沒有提供img

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 58.99.73.122
※ 文章網址: http://www.ptt.cc/bbs/Ajax/M.1405688969.A.320.html
→ mmis1000:沒辦法取到blob嗎？或是用一個a，在上面加上download屬性
→ mmis1000:讓使用者自己點
→ fr730149:有取到blob
網路上找到的SVG轉IMG範圍
http://0rz.tw/5XNZW
其中就有用到blob

但我在
var blob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
這行之後加上
saveAs(blob, "pretty image.png");

下載圖片後是空白的…
※ 編輯: fr730149 (58.99.73.122), 07/18/2014 23:17:16
→ mmis1000:是否能找個地方，把目前的code po出來？像 jsbin.com
http://jsfiddle.net/qaMs5/
chart(svg檔)的部份是用componentOne Chat的套件
script 71行 是svg轉img的語法

我的想法是按頁面上的button，就能直接把chart匯出來。
但目前只能作到，按button後把svg轉img…
※ 編輯: fr730149 (58.99.73.122), 07/19/2014 15:22:46
→ mmis1000:就只是讀取順序問題，ToImg重頭到尾都沒被呼叫到
這個就奇怪了，同樣的寫法…在localhost就可以work
或許是$.fn.toImage = function () {...這一段，我在localhost是用引入js檔方式
只要跑上面那一段，就可以把svg tag轉成img tag，只不過在jsfiddle上不能運作
→ mmis1000:http://jsfiddle.net/qaMs5/2/ 你說有轉換成功是錯覺吧？
先輩的寫法是把它save as svg，不知是否可改成save as png/jpg？
→ mmis1000:然後一片空白貌似是ie的問題
Blob我記得似乎止支援IE10+

不知道是否可用非Blob的方式把svg匯出來…
→ mmis1000:不知為何，它生成的svg標籤有2個 xmlns，導致讀取錯誤
最後，非常感謝您的解答
※ 編輯: fr730149 (58.99.73.122), 07/19/2014 17:30:45
→ mmis1000:jsfiddle的code預設是插在onload裡，所以那種寫法穩死
→ mmis1000:除了blob外，就算不支援也可以用data uri scheme輸出
→ mmis1000:缺點是不支援自訂檔名
→ mmis1000:至於轉png，可以透過canvas的 .toDataURL(); 達成
→ mmis1000:http://jsbin.com/fobev/1/edit data uri scheme的範例
→ mmis1000:但ie沒辦法在客戶端轉圖片，因為 http://goo.gl/kaY2KP
→ mmis1000:不知為何他連data URL的網址都擋。
→ mmis1000:真的要支援ie建議還是用伺服器端支援，ie的問題太多了...
→ mmis1000:轉jpg的範例
→ mmis1000:http://jsfiddle.net/qaMs5/7/