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

【问题标题】：How to change save image to file default name?如何将保存图像更改为文件默认名称？
【发布时间】：2021-04-13 21:23:14
【问题描述】：

我有一个由 Caman.js 创建的 canvas HTML5 标记。

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

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

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

【问题讨论】：

使用 phantomjs 保存会更容易我认为如果你需要做很多。
嗨@tomaszs，您无法更改默认文件名，但可以用自定义菜单替换默认菜单...查看下面的答案；-)
我有同样的问题，但对于加载到页面中的外部图像。我想知道是否可以使用 PHP Curl 获取文件，临时保存到服务器，然后在呈现页面之前重命名文件名

标签： javascript jquery html

【解决方案1】：

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

简单的答案是我们不能。

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

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

扩展

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

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

下载属性和上下文菜单

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

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

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

使用 CamanJS 的上下文菜单示例

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

由于 CamanJS 替换了原始元素，因此在画布替换它们之后附加事件处理程序非常重要，否则处理程序将与原始元素一起死亡，因为它们不再可用。 p>

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 中可能无法在 Stacksn-p 中工作（似乎是 Stacksn-p 的问题）。在这种情况下，这是一个替代fiddle link。

【讨论】：

我可以访问，这是我的网站。最后一段似乎很有趣
@tomaszs 为上下文菜单添加了一个极简示例 + 设置链接
不是我投反对票
@tomaszs 我不这么认为，这更多是为了不知名的用户。猜猜这是一次战略性投票，因为没有发布任何理由。哦，好吧。

【解决方案2】：

在“另存为”对话框无法直接更改时更改默认名称，但有一个解决方法

您可以像这样使用a标签中的Download属性指定要下载的文件的文件名

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

将您的画布to data url 转换为href 的a 标签

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

【讨论】：

我不同意..是可能的
完全正确.. 当你说这不可能直接发生时，我不同意，......它是，我什至会直接说足够：D
其实我更喜欢你的答案而不是 K3N 的答案...（是的，显然我的答案是最好的）然后你获得了赞成票；）
该死的我错过了“上下文菜单”......我太老了......你是对的......顺便说一句，不应该依赖默认的上下文菜单......我认为是滥用它是一个坏习惯。

【解决方案3】：

更改默认名称不太可能，但我们可以创建一个a 标记并为其提供画布数据并将download attr 设置为选择的文件名，并将其显示为替换默认菜单的菜单...

代码看起来像这样......

jQuery(function($) {
  $('<a id="download-canvas">Save as image</a>').appendTo('body'); // Adding the tag to body
  var link = $('#download-canvas')

  $('body').click(function(e) {
    link.hide(0) // Hide the link on clicking anywhere else
  })
  $(document).on("contextmenu", function(e) {
    link.hide(0)
    if (e.target.nodeName == "CANVAS") { // Proceed for CANVAS nodes only
      e.preventDefault(); // Dont show default menu

      link
        .attr({ //Set the attributes for link
          href: e.target.toDataURL(),
          download: 'my-file.png'
        })
        .css({ // Position the link to current mouse position
          top: e.clientY,
          left: e.clientX,
          display: 'block'
        });

    }
  });
});

///////////////////////////////////
// Just drawing something on canvas
var canvas = document.getElementById('canvas-id'),
  ctx = canvas.getContext('2d');
ctx.fillStyle = '#0cf';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
ctx.font = '60px sans-serif';
ctx.fillText('Hi from Canvas!', 10, canvas.height / 2 - 15);
ctx.font = '26px sans-serif';
ctx.fillText('Just right click me to download ;-)', 15, canvas.height / 2 + 35);

/* Position the tag absolute and make it look pretty */

#download-canvas {
  display: block;
  background: #fff;
  padding: 7px;
  font: 14px sans-serif;
  color: #555;
  border: 1px solid #ccc;
  position: absolute;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas width="500" height="300" id="canvas-id">Sorry, Your browser doesn't support canvas.</canvas>

【讨论】：

【解决方案4】：

我成功地动态创建了一个anchor隐藏标签，带有正确的属性，附加，触发点击，隐藏它，试试看，只需要注意画布元素的id属性：

var basename = 'myfile';
function downloadAs = (function () {
    var n = 1;
    return function () {
        var afake = document.createElement('a'),
            cnv = document.getElementById('canvasId'),
            img = cnv.toDataURL("image/png");
        afake.href = img;
        afake.download = basename + "" + n++;
        afake.style.display = 'none';
        document.body.appendChild(afake);
        afake.click();
        window.setTimeout(function () {
            document.body.removeChild(afake);
        }, 200);
    };
})();

Here 你可以找到一个工作示例...这是我在 2yago 写的一个旧实验，几乎被放弃了:(，顺便说一句，现在重要的是倒数第四个图标“导出图像”（应该出现一个工具提示）点击，命名并按导出，...嗯.. 是的...如果您在导出之前用鼠标绘制一些东西可能会更好：D

【讨论】：

【解决方案5】：

如果服务器发送一个文件名，Hello 看起来是可能的

<img src="https://s3-eu-west-2.amazonaws.com/se-odoo-stage-1/4e35c1945e3eb656548f6ff7a0d33774c1b011f9">  TRY

<br>

<img src="https://s3-eu-west-2.amazonaws.com/se-odoo-stage-1/220347c51e4b24358d2e1a85dc2574e8a15a4014"> TO SAVE


<br>

<img src="https://s3-eu-west-2.amazonaws.com/se-odoo-stage-1/e1e9ffcaa77b5a1efc742d1031325a6cfe6efccf"> THIS IMAGES

如果您尝试保存此图片，它会自动保存为 google

现在如果你去网络工具和https://s3-eu-west-2.amazonaws.com/se-odoo-stage-1/4e35c1945e3eb656548f6ff7a0d33774c1b011f9分析这个请求的响应头，你可以在其中找到Content-Disposition：附件；文件名=谷歌。因此，如果服务器以某种方式发送文件名，则可以说设置默认图像名称。

【讨论】：

【解决方案6】：

我知道这个问题被标记为 HTML 和 JS，但我需要这样做，对我来说，用 PHP 来做是有意义的。如果您能够编写 HTML 和 JS，那么您很可能也能够编写 PHP，所以这可能会对某人有所帮助。

<?php 
$url = "https://yourwebsite.com/assets/image.png";
$contents = file_get_contents($url);
$myfile = fopen("images/custom_name.png", "w") or die("Unable to open file!");
fwrite($myfile, $contents);
fclose($myfile)

?>
<a href="https://yourwebsite.com/images/custom_name.png" download>
    <button>Download image</button>
</a>

然后您可以轻松地将其包装在多个图像的循环中，循环整数成为文件名的一部分。

【讨论】：