我有一个由 Caman.js 创建的画布 HTML5 标签。
当我在 FF 中单击右键并保存到文件时，文件的默认名称是 canvas.png。由于我创建了很多文件并需要保存它们，这很不幸，因为我需要为每个文件设置不同的名称。
我想要完成的是，当保存第一个图像时，“保存到文件”对话框显示firstfile.png和第二个secondfile.png等。所以我不需要在保存对话框窗口中更改名称。
如何使用HTML和JS更改FF中保存到文件对话框的默认名称？
如何使用HTML和JS更改FF中保存到文件对话框的默认名称？
简单的答案是我们不能。
这些名称是在浏览器内部生成的，我们无法从普通网页访问此名称，因此无法更改此行为。
无法直接访问默认上下文菜单有多种原因，其中之一是安全性。
扩展
一种解决方法是为浏览器编写插件/扩展并提供自定义上下文菜单item然后您可以给出所需的行为。
或者使用一些现有的，例如this or this- 这些是随机选择的，仅作为示例。您可能会更适合浏览附加集合。
下载属性和上下文菜单
如果您正在控制要从中保存图像的页面，您还可以提供自定义上下文菜单，该菜单允许您使用 A 标签和download属性允许您设置文件名。
您需要将图像转换为对象 URL 或数据 URI，并将其设置为 A 标签的源。
有些人可能会出于各种原因反对使用自定义上下文菜单，但如果这是为了本地使用，则没有充分的理由说不能，并且在其他情况下，良好的用户体验方法可以告知用户此行为，从而消除任何意外。
使用 CamanJS 的上下文菜单示例
添加了一个简约的示例来弹出带有链接和文件名的菜单。该示例使用 CamanJS 使用toBase64() method.
由于 CamanJS 替换了原始元素，因此附加事件处理程序非常重要aftercanvas 已经取代了它们，否则处理程序将与原始元素一起消失，因为它们不再可用。
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>
注意：可能无法在 Firefox 中的 Stacksnippet 中工作（似乎是 Stacksnippet 的问题）。这是一个替代方案小提琴链接在这种情况下。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
