Force extension appear when downloading via javascript

Question

I have this screen, image resizing:

when I click download, this screen appears to save the file, but as you can see, the file appears without the extension, how can I make the file appear with the extension automatically when saving?

I have the following code that downloads:

js:

$('.js-crop').on('click', download);

download = function(){
    //Find the part of the image that is inside the crop box
      var canvas,
      left = $('.resize-image').offset().left - $container.offset().left,
      top =  $('.resize-image').offset().top - $container.offset().top,
      width = $('.resize-image').width(),
      height = $('.resize-image').height();

      canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
      //var src = $('.resize-image').attr('src');
      //alert(src);
      //canvas.toDataURL("image/png;base64");
      var ImageData = canvas.toDataURL("image/png;base64");
      ImageData = ImageData.replace("image/png", "image/octet-stream");
      document.location.href = ImageData;
  }

html:

<div class="content">
                <div class="component">
                    <img class="resize-image" src="img/image.jpg" alt="image for resizing">
                    <button class="btn-crop js-crop">Download<img class="icon-crop" src="img/crop.svg"></button>
                </div>
            </div><!-- /content -->

Is there any way to do that? can be with php tbm if necessary. on that link is my full code so far: https://www.dropbox.com/s/5ptiq8h5y4r4akc/ImageResizeCropCanvas.zip?dl=0

Answer 1

First always declare the function before using them or set to the .on or use this format function ...() instead of this ... = function().

To solve the problem you must create a link using something like <a download="nome.jpeg" href="..."> dynamically, like this:

$('.js-crop').on('click', download);

function download(){
    //Find the part of the image that is inside the crop box
      var canvas,
      left = $('.resize-image').offset().left - $container.offset().left,
      top =  $('.resize-image').offset().top - $container.offset().top,
      width = $('.resize-image').width(),
      height = $('.resize-image').height();

      canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
      //var src = $('.resize-image').attr('src');
      //alert(src);
      //canvas.toDataURL("image/png;base64");
      var ImageData = canvas.toDataURL("image/png;base64");
      ImageData = ImageData.replace("image/png", "image/octet-stream");


      var ImageData = canvas.toDataURL("image/jpeg");
      ImageData = ImageData.replace("image/png", "image/octet-stream");

      //Define o nome do arquivo
      this.download = "download.png";

      //Seta a url data:
      this.href = ImageData;
  }

and trade button for <a>:

<div class="content">
            <div class="component">
                <img class="resize-image" src="img/image.jpg" alt="image for resizing">
                <a href="javascript:void(0);" class="btn-crop js-crop">Download<img class="icon-crop" src="img/crop.svg"></a>
            </div>
        </div><!-- /content -->

Extra details

This is wrong canvas.toDataURL("image/png;base64"); this is correct:

• canvas.toDataURL(); and canvas.toDataURL("image/png"); for PNG
• canvas.toDataURL("image/jpeg"); for JPEG images