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

Question

我有一个由Caman.js创建的画布HTML5标签.

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

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

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

Answer 1

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

简单的答案是我们做不到.

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

有几个原因导致无法直接访问默认上下文菜单,其中一个是安全性.

扩展

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

或者使用像这样或这样的现有的- 这些是随机选择的,仅作为例子.您可以通过附加集合更好地适应.

下载属性和上下文菜单

如果您正在控制要保存图像的页面,您还可以提供自定义上下文菜单,该菜单允许您使用A-tag和download允许您设置文件名的属性来保存图像.

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

有些人可能会出于各种原因反对使用自定义上下文菜单,但如果这是出于本地使用的话,没有充分的理由说你做不到,而在其他情况下,良好的用户体验方法可以告知用户这种行为可以消除任何意外.

使用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的问题).在这种情况下,这是另一种小提琴链接.

Answer 2

要在无法直接使用"保存AS"对话框时更改默认名称,但有一种解决方法

您可以使用标签中的DownloadAttribute 指定要下载的文件的文件名a

<a href="ImageLocation" download="filename">

转换你的画布来传输数据的URL,并将其分配到href的a标签

var canvas = document.getElementById('canvasId');
var yourlink= document.getElementById('linkId');
var dataURL = canvas.toDataURL();
yourlink.href=dataURL;