How to change save image to file default name?

Question

I have a canvas HTML5 tag that is created by Caman.js.

When I click right in FF and save to file the default name for the file is canvas.png. Since I create a lot of

Answer 1

It's not quite possible to change default name, but we can create an a tag and give it canvas data and set download attr to filename of choice, and show it like a menu replacing default menu...

Code will look something like this...

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

Sorry, Your browser doesn't support canvas.