script.js

const qrText = document.getElementById('qr-text');
const generateBtn = document.getElementById('generate-btn');
const qrCodeDiv = document.getElementById('qr-code');
const downloadBtn = document.getElementById('download-btn');
const qrSize = document.getElementById('qr-size');

let qrcode = null;

generateBtn.addEventListener('click', () => {
    const text = qrText.value.trim();
    const size = parseInt(qrSize.value); 

    if (text) {
        qrCodeDiv.innerHTML = '';
        downloadBtn.style.display = 'none';

        qrcode = new QRCode(qrCodeDiv, {
            text: text,
            width: size,
            height: size,
        });

        setTimeout(() => {
            downloadBtn.style.display = 'block';
        }, 100);

    } else {
        alert('Por favor, digite um texto ou URL para gerar o QR Code.');
        qrCodeDiv.innerHTML = '<p>Seu QR code aparecerá aqui</p>';
        downloadBtn.style.display = 'none';
    }
});

downloadBtn.addEventListener('click', () => {
    const qrCanvas = qrCodeDiv.querySelector('canvas');

    if (qrCanvas) {
        const originalSize = qrCanvas.width;
        const borderSize = 20; // Tamanho da borda em pixels
        const newSize = originalSize + 2 * borderSize;

        // Cria um novo canvas maior com fundo branco
        const borderedCanvas = document.createElement('canvas');
        borderedCanvas.width = newSize;
        borderedCanvas.height = newSize;
        const ctx = borderedCanvas.getContext('2d');

        // Preenche o fundo com branco
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, newSize, newSize);

        // Desenha o QR code original no centro do novo canvas
        const offsetX = borderSize;
        const offsetY = borderSize;
        ctx.drawImage(qrCanvas, offsetX, offsetY);

        // Obtém a URL da imagem com a borda
        const imageUrl = borderedCanvas.toDataURL('image/png');

        // Cria e simula o clique no link para download
        const link = document.createElement('a');
        link.href = imageUrl;
        link.download = 'qr-code.png';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
});