download Como Fazer Download de Imagem Gerada Pelo Site com js

DanielF · Novembro 2, 2019

Pessoal Eu Recentemente estava fazendo um gerador de qr-code, e preciso criar um botão que quando a pessoa clique apareça para poder baixar/fazerdownload da imagem gerada, pode me ajuda? to preso nisso faz tempo, e se puderem podem Organizar o codigo para mim?

<!DOCTYPE html>
<html>
<head>
   <title>QR-Code</title>
   <style type="text/css">
       #qrcode {
           border: 1pt solid gray;
           display: inline-block;
       }
   </style>
</head>
<body>
   <center>
       <input type="text" name="qrtexto" id="qrtexto" onkeypress="gerarqr();" onkeyup="gerarqr();"><br>
       <br>
       <button onclick="gerarqr();" on>Gerar</button>
       <button onclick="limpar();" on>Limpar</button>
   </center>
   <br>
   <br>
<center>
   <div id="qrcode"></div>
</center>
<br>
<center>
<button onclick="baixar();">Baixar (Em Breve)</button>
</center>

});
}
function limpar(){
qrcode.innerHTML="<img src='limpo.png'>";
}
function baixar() {

}
</script><br><br><br><br><br><br><br>
<h6 align="center">Feito por Itz_Topz</h6>
</body>
</html>

Jack Oliveira · Novembro 3, 2019

@DanielF

Vou mostrar 4 exemplos aqui espero que alguns deles podem lhe ajudar

1º Exemplo

O Javascript para baixa uma imagem é o seguinte:

var a = $("<a>")
    .attr("href", ".http://NOME-DO-DOMINIO.BR/NOME-DA-PASTA/SUA-IMAGEM-AQUI.jpg")
    .attr("download", "img.png")
    .appendTo("body");

a[0].click();

a.remove();

ou basta fazer um for percorrendo o numero de item que deseja ser baixando

var url = "http://NOME-DO-DOMINIO.BR/NOME-DA-PASTA/"

for(var x = 1;x <= 25; x++ ){
if( x < 10)
var url = url + "0" + x + ".jpg";
else
var url = url + x + ".jpg";

var a = $("<a>")
    .attr("href", "http://NOME-DO-DOMINIO.BR/NOME-DA-PASTA/SUA-IMAGEM-AQUI.jpg")
    .attr("download", "img.png")
    .appendTo("body");

a[0].click();

a.remove();
}

2º Exemplo

Você poderá obter a imagem do tipo MIME (jpeg, png, gif, etc) com mais pesquisas, se necessário. Pode haver uma maneira de fazer algo semelhante a isso também nos vídeos. Espero que isso ajude você!

var image = new Image();
image.crossOrigin = "anonymous";
image.src = "http://NOME-DO-DOMINIO.BR/NOME-DA-PASTA/NOME-DA-IMAGEM.JPG";
// Obter nome do arquivo - pode ser necessário modificá-lo se o URL da imagem não contiver uma extensão de arquivo, caso contrário, você poderá definir o nome do arquivo manualmente
var fileName = image.src.split(/(\\|\/)/g).pop();
image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth; // No width se você quiser um tamanho especial / dimensionado
    canvas.height = this.naturalHeight; // No height se você quiser um tamanho especial / escalado
    canvas.getContext('2d').drawImage(this, 0, 0);
    var blob;
    // ... obter como URI de dados
    if (image.src.indexOf(".jpg") > -1) {
    blob = canvas.toDataURL("image/jpeg");
    } else if (image.src.indexOf(".png") > -1) {
    blob = canvas.toDataURL("image/png");
    } else if (image.src.indexOf(".gif") > -1) {
    blob = canvas.toDataURL("image/gif");
    } else {
    blob = canvas.toDataURL("image/png");
    }
    $("body").html("<b>Clique na Imagem para fazer o download.</b><br><a download='" + fileName + "' href='" + blob + "'><img src='" + blob + "'/></a>");
};

3º Exemplo

Esta é uma solução geral para o seu problema. Mas há uma parte muito importante que a extensão do arquivo deve corresponder à sua codificação. E, é claro, esse parâmetro de conteúdo da função downlowadImage deve ser uma string codificada em base64 da sua imagem

const clearUrl = url => url.replace(/^data:image\/\w+;base64,/, '');

const downloadImage = (name, content, type) => {
  var link = document.createElement('a');
  link.style = 'position: fixed; left -10000px;';
  link.href = `data:application/octet-stream;base64,${encodeURIComponent(content)}`;
  link.download = /\.\w+/.test(name) ? name : `${name}.${type}`;

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

['png', 'jpg', 'gif'].forEach(type => {
  var download = document.querySelector(`#${type}`);
  download.addEventListener('click', function() {
    var img = document.querySelector('#img');

    downloadImage('myImage', clearUrl(img.src), type);
  });
});

uma imagem gif: <image id="img" src="data:image/gif;base64,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" />


<button id="png">Download da Imagem PNG</button>
<button id="jpg">Download  da Imagem JPG</button>
<button id="gif">Download da Imagem  GIF</button>

4º Exemplo

Ou você pode usar com PHP

Você também pode usar esse código se o arquivo estiver em outro diretório

$file = 'test.png';
 $filepath = "images/" . $file;


    if(file_exists($filepath)) {
        header('Content-Description: File Transfer');
        header('Content-Type: application/octet-stream');
        header('Content-Disposition: attachment; filename="'.basename($filepath).'"');
        header('Expires: 0');
        header('Cache-Control: must-revalidate');
        header('Pragma: public');
        header('Content-Length: ' . filesize($filepath));
        flush(); 
        readfile($filepath);
        exit;
    }

Aqui neste links a baixo mostra mais de como usar com php

LINK 01

FÓRUM

Espero ter ajudando de alguma forma..

Omar~ · Novembro 4, 2019

Em 02/11/2019 at 20:04, DanielF disse:

poder baixar/fazerdownload da imagem gerada

Como essa imagem será gerada?

Veja isso:

https://github.com/Spell-Master/sm-web/tree/master/javascript/FileTransfer

DanielF · Novembro 5, 2019

Agora, Omar~ disse:

Como essa imagem será gerada?

Veja isso:

https://github.com/Spell-Master/sm-web/tree/master/javascript/FileTransfer

Ela Será gerada dentro de uma div

Para ver como ta o script da uma olhada ai, https://qrcodegeneratorfree.000webhostapp.com

Entrar

download Como Fazer Download de Imagem Gerada Pelo Site com js

Recommended Posts

DanielF 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

DanielF 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

PHP - Agradecimento e uma Dúvida

PHP - Agradecimento e uma Dúvida

PHP - Abrir e Fechar janela

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante