How to change file name saving to default file?

Question

I have an HTML5 canvas tag created by Caman.js.

When I click directly in FF and save to a file, the default name is for canvas.png. Since I create many files and need to save them, this is unfortunate because I need to specify a different name for each.

What I would like to do is that when saving the first image in the file dialog box, firstfile.png and second secondfile.png, etc. are displayed. Therefore, I do not need to change the name in the save dialog.

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

Answer 1

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

The simple answer is that we cannot.

Names are generated inside the browser, and we do not have access to the API from a regular web page, and therefore they cannot change this behavior.

There are several reasons for not having direct access to the default context menu, one of which is safe.

Extensions

One of the tasks is to create a plug-in / extension for the browser and provide a custom context menu item that can then give the desired behavior.

Or use some existing ones, such as this or this - this is a random selection, just for example. You might be better off with add-on collections.

Download attribute and context menu

If you control the page from which you want to save images, you can also provide a custom context menu that allows you to save images using the A tag and the download attribute, which allows you to set the file name.

You will need to convert the image to an Object-URL or Data-URI and set it as the source for tag A.

Some may object to using custom context menus for various reasons, but if it is for local use, there is no good reason to say that you cannot, and in other cases a good UX approach can inform the user about this behavior, removing any surprises.

Context Menu Example Using CamanJS

A minimalist example is added to display a menu with a link and a file name. The example uses the CamanJS method using the toBase64() method.

Since CamanJS replaced the original element, it is important to attach event handlers after the canvas has replaced them, because otherwise the handler will die with the original element in the sense that they are no longer available.

 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> 

NOTE: may not work in Stacksnippet with Firefox (it seems like a problem with Stacksnippet). Here is an alternative to a script link .

Answer 2

To change the default name when the Save AS dialog is not possible, but a workaround exists

You can specify the file name for the downloaded file using the Download Attribute in the a tag, like this

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

Convert canvas to data url and assign it href tag a

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

Answer 3

It is not possible to change the default name, but we can create the a tag and provide it with canvas data and set download attr to the file name of your choice and show it as a menu replacing the default menu ...

The code will look something like this:

 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> 

Answer 4

I successfully did this by creating a hidden anchor tag with the correct attributes on the fly, added it, clicked the trigger and hid it, try it, just take care of the id attribute of the canvas element:

 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 you can find a working example ... this is an old experiment that I wrote 2yago and almost left :(, btw, which is important now is the fourth last symbol "export image" (a tooltip appears), click it, name it and click " Export ", ... humm .. yes ... if you draw something with the mouse before exporting, perhaps this is better: D