作者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/cn.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