作者fr730149 ()
看板Ajax
標題[問題] JQuery圖片下載按鈕
時間Fri Jul 18 21:09:27 2014
請教各位前輩
我想作一個功能：
點一個"匯出"按鈕，就能把svg匯出成jpg或png之類的圖片檔
目前已作到，將svg轉成img tag
但不知如何把img弄成"另存新檔"的視窗，供使用者下載
在網路上有找到"FileSaver"套件，但這個似乎沒有提供img
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 58.99.73.122
※ 文章網址: http://webptt.com/m.aspx?n=bbs/Ajax/M.1405688969.A.320.html
1F：→ mmis1000:沒辦法取到blob嗎？或是用一個a，在上面加上download屬性 07/18 22:57
2F：→ mmis1000:讓使用者自己點 07/18 22:58
3F：→ fr730149:有取到blob 07/18 23:06
網路上找到的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
4F：→ mmis1000:是否能找個地方，把目前的code po出來？像 jsbin.com 07/19 13:35
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
5F：→ mmis1000:就只是讀取順序問題，ToImg重頭到尾都沒被呼叫到 07/19 15:51
這個就奇怪了，同樣的寫法…在localhost就可以work
或許是$.fn.toImage = function () {...這一段，我在localhost是用引入js檔方式
只要跑上面那一段，就可以把svg tag轉成img tag，只不過在jsfiddle上不能運作
先輩的寫法是把它save as svg，不知是否可改成save as png/jpg？
7F：→ mmis1000:然後一片空白貌似是ie的問題 07/19 16:03
Blob我記得似乎止支援IE10+
不知道是否可用非Blob的方式把svg匯出來…
8F：→ mmis1000:不知為何，它生成的svg標籤有2個 xmlns，導致讀取錯誤 07/19 16:08
最後，非常感謝您的解答
※ 編輯: fr730149 (58.99.73.122), 07/19/2014 17:30:45
9F：→ mmis1000:jsfiddle的code預設是插在onload裡，所以那種寫法穩死 07/19 19:39
10F：→ mmis1000:除了blob外，就算不支援也可以用data uri scheme輸出 07/19 19:44
11F：→ mmis1000:缺點是不支援自訂檔名 07/19 19:45
12F：→ mmis1000:至於轉png，可以透過canvas的 .toDataURL(); 達成 07/19 19:46
15F：→ mmis1000:不知為何他連data URL的網址都擋。 07/19 21:26
16F：→ mmis1000:真的要支援ie建議還是用伺服器端支援，ie的問題太多了... 07/19 21:27
17F：→ mmis1000:轉jpg的範例 07/19 21:31