Question

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

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

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

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

Answer 1

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

简单的答案是我们不能。

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

没有直接访问默认上下文菜单的原因有几个，一个是安全性。

扩展

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

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

下载属性和上下文菜单

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

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

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

使用CamanJS的上下文菜单示例

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

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

＆＃13;
＆＃13;
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"};
＆＃13;
#menu { position:fixed; background:#444; padding:4px 7px; box-shadow:3px 3px 3px #000; display:none; } #menu a {color:#fff;font:14px sans-serif}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

注意：在使用Firefox的Stacksnippet中可能无效（似乎是Stacksnippet的问题）。在这种情况下，可以选择 fiddle link 。

Answer 2

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

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

<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;

Answer 3

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

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

＆＃13;

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);

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 4

我成功地动态创建了一个anchor隐藏标签，其中包含正确的属性，附加，触发点击，并隐藏它，试一试，只需关注canvas元素的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并且几乎被遗弃的旧实验:(顺便说一下，现在重要的是第四个最后一个图标＆＃39;导出图像＆＃39; （应该出现一个工具提示）点击，命名并按下导出，... humm .. yes ...如果你在导出之前用鼠标画东西可能更好：D

Answer 5

如果服务器发送文件名，您好看起来很可能

<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：附件； filename = google。因此，如果文件名以某种方式由服务器发送，则可以说设置默认图像名称。

Answer 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>

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

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

6 个答案:

扩展

下载属性和上下文菜单

使用CamanJS的上下文菜单示例