Force show extension when downloading via javascript

Question

Force show extension when downloading via javascript

Navigation

#1 by (3 votes)

3

I have this image resizing screen:

whenIclickondownload,thisscreenappearstosavethefile,butasyoucansee,thefileappearswithouttheextension,howcanImakethefileappearwiththeextensionautomaticallywhenitissaved?

Ihavethefollowingcodetodownload:

js:

$('.js-crop').on('click',download);download=function(){//Findthepartoftheimagethatisinsidethecropboxvarcanvas,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);//varsrc=$('.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 this? can be with php tbm if need be. this link is my full code so far: link

javascript download canvas

asked by anonymous 28.02.2016 / 18:16

1 answer

Delegates and methods Where I find DOMPDF v.5

score 3 · Accepted Answer

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

To solve the problem you should 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 change button by <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"); the correct is this:

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