3

Tenho essa tela, de redimensionamento de imagem:

inserir a descrição da imagem aqui quando clico em download, aparece essa tela pra salvar o arquivo, mas como podem ver, o arquivo aparece sem a extensão, como posso fazer pra o arquivo aparecer com a extensão automaticamente quando for salvar?

inserir a descrição da imagem aqui

tenho o seguinte codigo que faz o download:

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

Tem alguma forma de fazer isso? pode ser com php tbm se for necessário. nesse link está o meu codigo full até o momento: https://www.dropbox.com/s/5ptiq8h5y4r4akc/ImageResizeCropCanvas.zip?dl=0

1 Resposta 1

3

Primeiro sempre declare a função antes de usa-las ou definir ao .on ou então use neste formato function ...() ao invés deste ... = function().

Pra resolver o problema você deve criar um link usando algo como <a download="nome.jpeg" href="..."> dinamicamente, assim:

$('.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;
  }

e troque button por <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 -->

Detalhes extras

Isto está errado canvas.toDataURL("image/png;base64"); o correto é isto:

  • canvas.toDataURL(); e canvas.toDataURL("image/png"); pra PNG
  • canvas.toDataURL("image/jpeg"); pra imagens JPEG
6
  • @guiilherme tem que fazer aguma coisa no html além disso do javascript? porque aqui assim não funcionou, nem é chamado a função download... Commented 28/02/2016 às 17:46
  • não aparece nada, por isso disse (acho) que não é chamado a função download. Commented 28/02/2016 às 17:58
  • ta só na minha maquina... que site que posso usar pra hospedar isso? Commented 28/02/2016 às 18:00
  • 1
    não usei o codepen pq são alguns niveis de pastas e arquivos, n da muito certo usando ele aqui... Commented 28/02/2016 às 19:04
  • 1
    @AlexandreMartinsMontebelo corrigi o código.
    – Syzoth
    Commented 28/02/2016 às 22:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .