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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6045603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 19:16:42  来源:igfitidea点击:

Name a PNG file saved from Canvas using an "open with" dialog

javascripthtmlcanvas

提问by Tim

I am working with canvas and I would be able to save my Canvas to png.

我正在使用画布,我可以将我的画布保存为 png。

By looking around, I discover the great toDataURL() function given by the W3C.

通过环顾四周,我发现了 W3C 提供的很棒的 toDataURL() 函数。

I am also already using the canvas2image from nihilogic that we can found on this page : http://www.nihilogic.dk/labs/canvas2image/

我也已经在使用我们可以在这个页面上找到的 nihilogic 的 canvas2image:http://www.nihilogic.dk/labs/canvas2image/

I noticed that on canvas2image, the developpers use the "image/octet-stream" which open the "open with" dialog box but give some problem :

我注意到在 canvas2image 上,开发人员使用“图像/八位字节流”打开“打开方式”对话框,但出现了一些问题:

-picture name is the ascii returned by toDataUrl().

-图片名称是 toDataUrl() 返回的 ascii。

-file extension is .part when downloaded

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

In short, I would prompt the "open with" dialog box with something like "myImage.png" when clicking on a button.

简而言之,当单击按钮时,我会用“myImage.png”之类的内容提示“打开方式”对话框。

Is it possible ? Any help would be appreciated.

是否可以 ?任何帮助,将不胜感激。

Edit : I have the contraint to use only Javascript, I can't use some nice PHP trick

编辑:我有限制只使用 Javascript,我不能使用一些不错的 PHP 技巧

采纳答案by Hanrui Gao

if you aim to only modern browsers and don't care cross-browser that much, there's a possible solution with "download" attribute of element. Here's one sample for your information:

如果您只针对现代浏览器并且不太关心跨浏览器,那么有一个可能的解决方案是元素的“下载”属性。这是供您参考的一个示例:

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

Only one line, no javascript, yeah! You can change the href part into data url, and that works too.

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

Check this Eric's tutorialon html5rocks for more details.

查看Eric在 html5rocks 上的教程以获取更多详细信息。

回答by Femi

Unfortunately not. Currently dataURIs (used by that canvas2image module; quite neat, actually) do not support specifying filename or content-disposition headers, so the only way to force the browser to generate a save asdialog is to set the content-type to octet-stream.

不幸的是没有。当前dataURI(由 canvas2image 模块使用;实际上非常简洁)不支持指定文件名或内容处置标头,因此强制浏览器生成另存为对话框的唯一方法是将内容类型设置为八位字节流.

回答by linuxatico

Well, in the real world web applications Hangrui Gao's solution is far from acceptable, according to

那么,在现实世界的 Web 应用程序中,高航瑞的解决方案远不能被接受,据

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

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

you'll deny this feature to all IE, Safari, IOS Safari, Android's users.

您将拒绝向所有 IE、Safari、IOS Safari、Android 用户提供此功能。

I think that given this limit in Canvas2Image, a better solution is to use some server side logic as explained here

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

Linuxatico

Linuxatico