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

本文介绍了使用“打开方式"命名从 Canvas 保存的 PNG 文件对话的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用画布，我可以将我的画布保存为 png.

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

环顾四周，我发现了 W3C 提供的很棒的 toDataURL() 函数.

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

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

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

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

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

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

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

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

-file extension is .part when downloaded

简而言之，我会在单击按钮时提示打开方式"对话框，其中包含myImage.png"之类的内容.

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

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

Is it possible ? Any help would be appreciated.

我有限制只使用 Javascript，我不能使用 一些不错的 PHP 技巧

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

推荐答案

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

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="www.google/intl/en_com/images/srpr/logo3w.png" download="testXXX.jpg">DOWNLOAD ME!</a>

只有一行，没有 javascript，是的！您可以将 href 部分更改为数据 url，也可以.

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

查看关于 html5rocks 的 Eric 的教程了解更多详情.

Check this Eric's tutorial on html5rocks for more details.