Download images

Question

I have the following code:

 <section class="margem-base-80 coluna  sombra-suave" id="recipiente-topo">

<h1 class="margem-topo-50 recipiente letra-branca">Gerar QRcode 
gratuitamente</h1>
<main class="em-linha" id="main-index">

<article class="recipiente" id="campo-qr">
  <form class="coluna" method="post">
    <label for="gerar-qr">Endereço web (URL)</label>
    <input type="text" name="code" id="code-input" 
placeholder="http://exemplo.com" required />
    <input type="hidden" name="gerar" value="s">
    <div>
    <button class="btn-azul margem-topo-50">Gerar QR code</button>
    </div>
  </form>
</article>

<?php

  if(isset($_POST['gerar'])) {

    require_once "interno/phpqrcode/qrlib.php";

    $valor = $_POST['code'];

    $code = $valor;

    QRcode::png($code, "Imagem_QRCODE_M.png", QR_ECLEVEL_M, 8);

    $qr= '<img id="tamanho-code" src="Imagem_QRCODE_M.png"/>';
  ?>  
<article class="recipiente" id="qr-campo">
  <?=$qr?>
</article>
  <?php
  } else { ?>
<article class="recipiente" id="qr-campo">
</article>
 <?php
  }
?>

</main>
</section>

This example image is not in a database and is also not in a folder among the files of the site, it is only being displayed on the site through my html code for being a qr code image that the site generates receiving the data via post. For some user to save this image on their computer it has to right-click and then go on to save images. How can I add my button download this image as soon as the customer clicks on it?

Answer 1

I’m not sure I understand, but if you want a button to download an image, that’s it:

<a href="caminho_do_arquivo.txt" download="Nome do arquivo"><button>Download</button></a>

The attribute download causes the file mentioned in href is downloaded with the given name in it may contain spaces, but the name in href cannot contain spaces

Note: For your html code to appear you need to put 4 spaces before type, instead of

code...

place:

código...

These 4 spaces is for the site to understand that what you are going to type is a code block and not a code, so it is literally appearing a button, because you have put a <button>

That’s it?