使用“打开方式”对话框命名从Canvas保存的PNG文件

时间:2011-05-18 13:35:23

标签: javascript html5 canvas

我正在使用canvas,我可以将我的Canvas保存到png。

通过环顾四周,我发现了W3C给出的伟大的toDataURL()函数。

我也在使用nihilogic中的canvas2image,我们可以在此页面找到:http://www.nihilogic.dk/labs/canvas2image/

我注意到在canvas2image上,开发人员使用“image / octet-stream”打开“打开方式”对话框但是出了点问题:

-picture name是toDataUrl()返回的ascii。

- 文件扩展名为.part时下载

简而言之,点击按钮时,我会提示“打开方式”对话框,例如“myImage.png”。

有可能吗?任何帮助将不胜感激。

编辑:我有使用Javascript的禁令,我无法使用some nice PHP trick

3 个答案:

答案 0 :(得分:6)

如果您的目标只是现代浏览器并且不关心跨浏览器,那么可以使用元素的“下载”属性。 以下是您的信息的一个示例:

<a target="_blank" href="https://www.google.com/intl/en_com/images/srpr/logo3w.png" download="testXXX.jpg">DOWNLOAD ME!</a>

只有一行,没有javascript,是的!您可以将href部分更改为数据网址,这也可以。

在html5rocks上查看Eric's tutorial以获取更多详细信息。

答案 1 :(得分:5)

不幸的是没有。目前data URI(由canvas2image模块使用;实际上非常简洁)不支持指定文件名或内容处置标头,因此强制浏览器生成另存为的唯一方法dialog是将content-type设置为octet-stream。

答案 2 :(得分:1)

根据

,在现实世界的网络应用程序中,Hangrui Gao的解决方案远非可接受

http://caniuse.com/#feat=download

您将拒绝所有IE,Safari,IOS Safari,Android用户使用此功能。

我认为考虑到Canvas2Image中的这个限制,更好的解决方案是使用一些服务器端逻辑,如here所述

Linuxatico