如何将保存图像更改为文件默认名称？ [英] How to change save image to file default name?
问题描述
我有一个由Caman.js创建的画布HTML5标签。
I have a canvas HTML5 tag that is created by Caman.js.
当我在FF中单击并保存到文件时，文件的默认名称是canvas巴纽。由于我创建了大量文件并需要保存它们，这是不幸的，因为我需要为每个文件设置不同的名称。
When I click right in FF and save to file the default name for the file is canvas.png. Since I create a lot of files and need to save them this is unfortunate, because I need to set the different name for each.
我想要完成的是保存第一个图像保存到文件对话框时显示firstfile.png和second secondfile.png等。所以我不需要在保存对话框窗口中更改名称。
What I would like to accomplish is that when saving first image save to file dialog shows firstfile.png and second secondfile.png and so on. So I don't need to change the name in the save dialog window.
如何使用HTML和JS更改FF中保存到文件对话框的默认名称？
How to change the default name of save to file dialog in FF using HTML and JS?
推荐答案
如何使用HTML和JS更改FF中保存到文件对话框的默认名称？
How to change the default name of save to file dialog in FF using HTML and JS?
简单的答案是我们不能。
The simple answer is that we can't.
名字是在浏览器内部生成，我们没有从普通网页访问此API，因此无法更改此行为。
The names are generated internally in the browser and we have no API access to this from an ordinary web page, and therefor can't change this behavior.
没有直接访问默认上下文菜单的原因有几个，一个是安全性。
There are several reasons for not having direct access to the default context menu, one being security.
一个解决方法是为浏览器编写插件/扩展名并提供自定义上下文菜单 item 然后您可以给它期望的行为。
One work-around though is to write a plugin/extension for the browser and provide a custom context menu item which you can then give the desired behavior.
或者使用一些现有的行为，例如这个或这个 - 这些是随机选择只是作为例子。您可以更好地适应附加集合。
Or use some existing ones like this or this - these are randomly selected just meant as examples. You may be able a better fit going through the add-on collections.
如果您正在控制要保存图像的页面，您还可以提供自定义上下文菜单，该菜单允许您使用A-tag和 download 属性保存图像允许您设置文件名。
If you are controlling the page you want to save the images from, you could also provide a custom context menu which allows you to save images using the A-tag and the download attribute which allows you to set a filename.
您需要将图像转换为Object-URL或Data-URI，并将其设置为A-tag的源。
You would need to convert the image to an Object-URL or Data-URI and set that as source for the A-tag.
有些人可能出于各种原因反对使用自定义上下文菜单，但如果这是出于本地使用的话，没有充分的理由说你做不到，而在其他情况下良好的用户体验方法可以告知用户这种行为消除任何意外。
Some may object to using custom context menus for various reasons, but if this is for local usage there is no good reason saying you can't, and in other cases a good UX approach can inform the user of this behavior removing any surprises.
已添加一个极简主义的例子，用链接和文件名弹出菜单。该示例使用CamanJS使用 toBase64（）方法。
Added a minimalist example to pop up the menu with a link and filename. The example uses CamanJS using the toBase64() method.
由于CamanJS替换了原始元素，因此附加很重要事件处理程序在 canvas之后替换它们，否则处理程序将与原始元素一起死亡，因为它们不再可用。
Since CamanJS replaced the original element it is important to attach event handlers after canvas has replaced them as otherwise the handler will die together with the original element in the sense they are no longer available.
Caman(img, function() {
var me = this;
// from inside callback as img is now a different element
img.oncontextmenu = function(e) {
e.preventDefault(); // prevent default action
lnk.download = lnk.innerHTML = "Myfile.jpg"; // set file and link name
lnk.href = me.toBase64(); // get Data-URI from CamanJS
menu.style.cssText = // show the menu
"left:" + e.clientX + "px; top:" + e.clientY + "px; display:block";
};
});
window.onclick = function() {menu.style.display="none"};
#menu {
position:fixed;
background:#444;
padding:4px 7px;
box-shadow:3px 3px 3px #000;
display:none;
}
#menu a {color:#fff;font:14px sans-serif}
<script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js"></script>
<img id=img src="//i.imgur.com/67E6Ujdb.jpg" crossOrigin="anonymous">
<div id="menu">
<a id="lnk"></a>
</div>
注意：可能无法在Stacksnippet中使用Firefox（似乎成为Stacksnippet的一个问题。在这种情况下，这里有一个替代 小提琴链接 。
NOTE: may not work in Stacksnippet with Firefox (seem to be an issue with Stacksnippet). Here is a alternative fiddle link in that case.
这篇关于如何将保存图像更改为文件默认名称？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
