javascript - 如何将保存图像更改为文件默认名称？

Question

我有一个由 Caman.js 创建的 Canvas HTML5 标签。

当我在 FF 中单击右键并保存到文件时，文件的默认名称是 canvas.png。由于我创建了很多文件并需要保存它们，这很不幸，因为我需要为每个文件设置不同的名称。

我想要完成的是，当保存第一个图像时，保存到文件对话框显示 firstfile.png 和第二个 secondfile.png 等等。所以我不需要在保存对话框窗口中更改名称。

如何使用 HTML 和 JS 更改 FF 中保存到文件对话框的默认名称？

Answer 1

How to change the default name of save to file dialog in FF using HTML and JS?

简单的答案是我们不能。

名称是在浏览器内部生成的，我们无法从普通网页访问 API，因此无法更改此行为。

无法直接访问默认上下文菜单的原因有多种，其中之一是安全性。

扩展

不过，一种解决方法是为浏览器编写一个插件/扩展，并提供一个自定义上下文菜单 item，然后您可以提供所需的行为。

或者使用一些现有的，比如 this或 this - 这些是随机选择的，仅作为示例。您可能能够更好地适应附加集合。

下载属性和上下文菜单

如果您正在控制要从中保存图像的页面，您还可以提供一个自定义上下文菜单，该菜单允许您使用 A 标签和 download 属性保存图像，该属性允许您设置文件名。

您需要将图像转换为 Object-URL 或 Data-URI，并将其设置为 A-tag 的源。

有些人可能出于各种原因反对使用自定义上下文菜单，但如果这是为了本地使用，则没有充分的理由说你不能，而在其他情况下，良好的 UX 方法可以告知用户这种行为，从而消除任何惊喜。

使用 CamanJS 的上下文菜单示例

添加了一个极简示例来弹出带有链接和文件名的菜单。该示例使用 toBase64() 方法使用 CamanJS。

由于 CamanJS 替换了原始元素，因此在 canvas 替换它们之后 附加事件处理程序很重要，否则处理程序将与原始元素一起消失，因为它们不再可用。

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 的问题)。这是一个替代方案 fiddle link 在这种情况下。