JavaScript动态生成图片下载教程：获取并保存二维码图片

<input type="text" id="input_text" placeholder="输入文本生成二维码">
<button id="generateBtn">生成二维码</button>
<div id="qr-code-box"></div>
<a id="downloadLink" href="#" download="qrcode.png" style="display: none;">下载二维码</a>

let qrCodeBox = document.getElementById('qr-code-box');
// ... 其他DOM元素获取

// 在二维码生成后，获取canvas元素
let canvasElement = qrCodeBox.querySelector('canvas');

/**
 * 将Canvas内容转换为Data URL
 * @param {HTMLCanvasElement} canvas - 要转换的Canvas元素
 * @param {string} type - 图片类型，如 'image/png' (默认), 'image/jpeg', 'image/webp'
 * @param {number} encoderOptions - 图像质量，对于JPEG和WebP有效，范围0-1
 * @returns {string} Data URL字符串
 */
let imageDataURL = canvasElement.toDataURL('image/png'); // 转换为PNG格式的Data URL
// 如果需要JPEG格式并控制质量：
// let imageDataURL = canvasElement.toDataURL('image/jpeg', 0.8); // 80%质量的JPEG

let downloadLink = document.getElementById('downloadLink');
downloadLink.href = imageDataURL; // 将Data URL赋值给href
downloadLink.download = 'my_qrcode.png'; // 设置下载文件名
downloadLink.style.display = 'block'; // 显示下载按钮

// HTML结构（如上所示）
// <input type="text" id="input_text" placeholder="输入文本生成二维码">
// <button id="generateBtn">生成二维码</button>
// <div id="qr-code-box"></div>
// <a id="downloadLink" href="#" download="qrcode.png" style="display: none;">下载二维码</a>

let qrCodeBox = document.getElementById('qr-code-box');
let generateBtn = document.getElementById('generateBtn');
let downloadLink = document.getElementById('downloadLink');
let userInput = document.getElementById("input_text");

generateBtn.onclick = () => {
    if (userInput.value.trim() === '') {
        alert('请输入内容以生成二维码！');
        return;
    }

    // 1. 清空旧的二维码及隐藏下载链接
    qrCodeBox.innerHTML = '';
    downloadLink.style.display = 'none';
    downloadLink.href = '#'; // 重置href，防止重复下载旧图

    // 2. 生成新的二维码
    // QRCode.js库会异步或同步地将Canvas添加到qrCodeBox
    const qrCodeInstance = new QRCode(qrCodeBox, {
        text: userInput.value,
        width: 180,
        height: 180,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });

    // 3. 延迟获取Canvas并生成下载链接
    // QRCode.js通常会立即添加canvas，但为了确保DOM更新，可以稍作延迟
    // 或者直接在下一事件循环中获取
    setTimeout(() => {
        let canvasElement = qrCodeBox.querySelector('canvas');
        if (canvasElement) {
            // 4. 将Canvas转换为Data URL
            let imageDataURL = canvasElement.toDataURL('image/png');

            // 5. 更新下载链接
            downloadLink.href = imageDataURL;
            downloadLink.download = `qrcode_${Date.now()}.png`; // 动态文件名
            downloadLink.style.display = 'block'; // 显示下载按钮
        } else {
            console.error('未找到Canvas元素，可能二维码生成失败或时序问题。');
            alert('二维码生成失败，请稍后再试。');
        }
    }, 50); // 50ms的延迟通常足够确保Canvas已添加到DOM
};