Estoy trabajando en la aplicación QR Code Generator donde el usuario ingresa el texto y hace clic en generar. Obtienen el código qr generado, pero quiero agregar el botón de descarga y para eso necesito src, pero la imagen se genera dinámicamente, entonces, ¿cómo puedo hacer esto?
let qrCodeBox = document.querySelector('.qr-code') let dnload = document.querySelector('.download') btn.onclick = () => { let user_input = document.querySelector("#input_text"); if (qrCodeBox.childElementCount == 0) { generate(user_input); qrCodeBox.style.display = "block"; console.log(qrCodeBox.childNodes[1]); // dnload.innerHTML = `<a href="${qrCodeBox.childNodes[1]}">Download</a>` } else { qrCodeBox.innerHTML = ""; generate(user_input); } } const generate = (user_input) => { let qrCode = new QRCode(qrCodeBox, { text: `${user_input.value}`, width: 180, //default 128 height: 180, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }) }Puede intentar convertirlo en una URL de datos.
var dataURL = document.getElementById('qrcode').toDataURL();Y luego guárdalo así. (puede agregar esto desde js)
<a href="dataURL" target="_blank" download="image.png">Nota: No todos los navegadores admitirán esto. Pero los navegadores modernos lo harán.
Para obtener el src del código qr puedes usar
const src = document.querySelector("#qrcode > img").src; Como la biblioteca que está utilizando crea una etiqueta de imagen en un contenedor qrcode , por lo que puede obtener src a través del código anterior.