如何将保存图像更改为文件默认名称？
我有一个由Caman.js创建的canvas HTML5标记。
当我在FF中单击并保存到文件时，文件的默认名称是canvas.png。 由于我创建了大量文件并需要保存它们，这很不幸，因为我需要为每个文件设置不同的名称。
我想要完成的是，保存第一个图像保存到文件对话框时显示firstfile.png和second secondfile.png等等。 所以我不需要在保存对话框窗口中更改名称。
如何使用HTML和JS更改FF中保存到文件对话框的默认名称？
如何使用HTML和JS更改FF中保存到文件对话框的默认名称？
简单的答案是我们做不到。
这些名称是在浏览器内部生成的，我们无法从普通网页访问此API，因此无法更改此行为。
有几个原因导致无法直接访问默认上下文菜单，其中一个是安全性。
扩展
一种解决方法是为浏览器编写插件/扩展，并提供自定义上下文菜单项 ，然后您可以提供所需的行为。
或者使用像这样或这样的现有的 – 这些是随机选择的，仅作为例子。 您可以更好地适应附加集合。
下载属性和上下文菜单
如果您正在控制要保存图像的页面，您还可以提供自定义上下文菜单，该菜单允许您使用A-tag和download属性保存图像，该属性允许您设置文件名。
您需要将图像转换为Object-URL或Data-URI，并将其设置为A-tag的源。
有些人可能会出于各种原因反对使用自定义上下文菜单，但如果这是出于本地使用，则没有充分的理由说你做不到，而在其他情况下，良好的用户体验方法可以告知用户这种行为可以消除任何意外。
使用CamanJS的上下文菜单示例
添加了一个极简主义示例，用于弹出带有链接和文件名的菜单。 该示例使用toBase64 toBase64()方法使用toBase64() 。
由于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}
要在无法直接使用“保存AS”对话框时更改默认名称，但有一种解决方法
您可以使用此标记中的“ Download属性”指定要下载的文件的文件名
将canvas转换为数据URL并将其指定给标记的href
var canvas = document.getElementById('canvasId'); var yourlink= document.getElementById('linkId'); var dataURL = canvas.toDataURL(); yourlink.href=dataURL;
更改默认名称是不太可能的，但是我们可以创建a标签并给它canvas数据并将download attr设置为选择的文件名，并将其显示为替换默认菜单的菜单…
代码看起来像这样……
jQuery(function($) { $('Save as image').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; }
我成功地在飞行中创建了一个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); }; })();
在这里你可以找到一个工作的例子…这是我写的2yago并且几乎被遗弃的旧实验:(，顺便说一下现在重要的是第四个最后一个图标’导出图像’（应该出现工具提示）点击，命名并按导出，…哼..是的…如果你在导出之前用鼠标绘制东西可能更好：D