Estoy usando esta biblioteca que genera códigos QR como imágenes PNG: https://davidshimjs.github.io/qrcodejs/
Quiero tener un botón de descarga para el código QR generado, sin embargo, el lienzo solo aparece cuando se genera la imagen. ¿Algún consejo sobre cómo poner un botón de descarga?
Aquí está mi código de muestra para mi proyecto:
PHP:
<div> <!-- <input type="text" id="qr-data" value="<?php echo uniqid();; ?>"/> --> <button onclick="generateQR()">Generate</button> <div id="qrcode"></div> <script src="qrcode.min.js"></script> </div>JavaScript:
<script> var qrdata = document.getElementById("qr-data"); var qrcode = new QRCode(document.getElementById("qrcode")); function generateQR() { var data = qrdata.value; qrcode.makeCode(data); } </script>Una búsqueda rápida muestra una forma sencilla de descargar una imagen al hacer clic en ella :
download ;href que la imagen src ; La imagen src que buscamos no existe hasta que se genera el código. Entonces necesitamos copiarlo dinámicamente una vez que se crea. Por lo tanto, necesitaremos agregar un enlace/botón de descarga a su HTML y copiar el código QR src al enlace href después de generarlo.
Entonces, primero, agregue el enlace:
<a id="download" href="" download="qr.png"><button>Download</button></a> A continuación, necesitamos copiar el src generado. Un inconveniente es que debemos esperar a que se genere el código QR antes de poder copiarlo. Intentar hacer la copia inmediatamente después de su línea makeCode() no funciona, porque makeCode() tarda un tiempo en ejecutarse y se ejecuta de forma asíncrona. Eso significa que el código inmediatamente después de esa línea se ejecutará antes de que makeCode() haya terminado. ¡No podemos copiar el src antes de que exista el src !
No hay eventos documentados de tipo exitoso o terminado o devoluciones de llamada para QRCode.js, por lo que la opción más segura parece ser hacerlo más tarde, cuando se hace clic en el botón de descarga. Así que agregue un detector de eventos para nuestro enlace de descarga:
var link = document.getElementById("download"); link.addEventListener("click", setUpDownload); Y agregue la función setUpDownload() que realmente hace la copia:
function setUpDownload() { // Find the image inside the #qrcode div var image = document.getElementById("qrcode").getElementsByTagName("img"); // Get the src attribute of the image, which is the data-encoded QR code var qr = image[0].src; // Copy that to the download link link.href = qr; }¡Y hemos terminado! Trabajando JSFiddle .
Nota al margen
Se considera una buena práctica separar su HTML de su JS. Eso significa usar controladores de eventos en JS, en lugar de usar onclick() en línea. Yo sugeriría cambiar esto:
<button onclick="generateQR()">Generate</button> A esto (déle una id para que sea fácil de consultar más adelante):
<button id="button">Generate</button>Y agregar un detector de eventos en su JS para hacer el mismo trabajo:
var button = document.getElementById("button"); button.addEventListener("click", generateQR);