Jump to content
DanielF

Como Fazer Download de Imagem Gerada Pelo Site com js

Recommended Posts

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>

<script src="qrcode.min.js"></script>
<script>
    qrcode.innerHTML="<img src='limpo.png'>";
    function gerarqr(){
var qrcode=document.getElementById('qrcode');
qrcode.innerHTML=" ";
var texto=document.getElementById("qrtexto").value;
    var qrcodee = new QRCode(qrcode, {
    text: texto,
    width: 300,
    height: 300,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Emitim1298
      const shape = { radius: 10, diameter() { return this.radius * 2; }, perimeter: () => 2 * Math.PI * this.radius }; shape.diameter(); shape.perimeter();
    • By Jack Oliveira
      Ola pessoal boa noite preciso salvar umas coisas no banco de dados usando ao clicar no botão que esteja aparecendo sem que recarregue a página
       
      Seria isso aqui
       
      HTML do botão
      <div class="btn-group"> <a href="javascript:void(0)" class="rate-btn toggole-contnet"> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Sim </a> <a href="javascript:void(0)" class="rate-btn toggole-contnet"> <i class="fa fa-thumbs-o-down" aria-hidden="true"></i> Não </a> </div> No PHP para salvar no banco esta da seguinte forma.
      <?php if(isset($_POST['AvaliComentario'])) { // Se o cookie ainda não foi setado $cookie = isset($_COOKIE["avali_comentario_".$Comentario['id']]) ? $_COOKIE["avali_comentario_".$Comentario['id']] : null; if (!isset($cookie)) { $Adicionar = array( 'comentario_id' => $Comentario['id'], 'up' => post('up'), 'down' => post('down') ); $Query = DBCreate('avali_comentario', $Adicionar); // Se for um sucesso a query if ($Query) { // Seta um cookie setcookie("avali_comentario_".$Comentario['id']."", true, time()+60*60*24*6004); // Retorna false, ou seja, sucesso echo false; Redireciona(''.$URLSHARE.''); }else{ //AbreAlerta("Erro! Ouve um erro ao ".$dados['titulo']."!"); //Redireciona(''.$URLSHARE.''); } }else{ //Sweet('Atenção!!!', 'Você já deu sua Curtida para '.$dados['titulo'].'!', 'warning', 'Fechar'); //AbreAlerta("Ops! Você já deu sua Curtida para ".$dados['titulo']."!"); //Redireciona(''.$URLSHARE.''); } } Só preciso para quando clicar uns dos botão ele salvar sem precisar carregar a página...
       
      Se ter um forma diferente para fazer fico grato pelas dicas que puderem dar ai..
       
       
    • By dayvidham
      Olá, atualmente faço parte de uma comunidade brasileira que está imersa em um projeto DeFi de um Token que roda na rede BSC.
      Temos um Token chamado SkyRocketSR criado a 31 dias e ja somos mais de 5000 pessoas interessadas no seu sucesso.
      Estamos em busca de programadores, designers e todos que poderem somar à comunidade de alguma forma.
      Alguém gostaria de saber mais do projeto e quem sabe compor a equipe da linha de frente já que somos uma comunidade?
      Obrigado e contamos com você.

      https://skyrocketsr.com/en/

      Aqui há mais sobre nós!
    • By dayvidham
      Olá, atualmente faço parte de uma comunidade brasileira que está imersa em um projeto DeFi de um Token que roda na rede BSC.
      Temos um Token chamado SkyRocketSR criado a 31 dias e ja somos mais de 5000 pessoas interessadas no seu sucesso.
      Estamos em busca de programadores, designers e todos que poderem somar à comunidade de alguma forma.
      Alguém gostaria de saber mais do projeto e quem sabe compor a equipe da linha de frente já que somos uma comunidade?
      Obrigado e contamos com você.

      https://skyrocketsr.com/en/

      Aqui há mais sobre nós!
    • By Felper
      Criei um sistema de login com php e mysql mas não consigo realizar o login mesmo tendo certeza de que os dados foram cadastrados com sucesso. Não sei o que fiz de errado. Vejam o código:
      <?php $login2 = $_POST['loginlogar']; $senha2 = $_POST['senhalogar']; $link = mysqli_connect("localhost", "root", "", "bancolanche") or die("<h1>Não foi possível conectar!!</h1>". mysqli_error()); $banco = mysqli_select_db($link, "bancolanche") or die("<h1>Não foi possível abrir banco de dados!!</h1>". mysqli_error()); $sql = "SELECT login, senha FROM users"; $resulta = mysqli_query($link, $sql); while ($book = $resulta->fetch_object()) { $logindb = $book->login; $senhadb = $book->senha; } if($login2 == "" || $senha2 == ""){ $_SESSION['msg'] = "<h1 style='color:red'>Erro ao logar! Há campos de preenchimento obrigatório em branco.</h1>"; header("Location: logar.php"); } else { if($logindb==$login2 && $senhadb==$senha2){ $_SESSION['msg'] = "<h1 style='color:green'>Logoff realizado com sucesso!</h1>"; header("Location: index.html"); } else { $_SESSION['msg'] = "<h1 style='color:red'>Erro ao logar! Usuário inexistente ou senha incorreta.</h1>"; header("Location: logar.php"); } } mysqli_close($link); ?>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.