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

在JavaScript中，当QRCode.js生成二维码后，它会将一个

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

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

2. 将Canvas转换为Data URL

HTMLCanvasElement对象提供了一个非常有用的方法：toDataURL()。这个方法可以将Canvas上的内容转换为一个Data URL字符串。

/**
 * 将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

3. 创建下载链接

获取到Data URL后，我们就可以将其赋值给标签的href属性，并结合download属性来触发下载。download属性的值将作为下载文件的默认文件名。

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

4. 整合到QR码生成应用中

现在，我们将上述步骤整合到原始的QR码生成逻辑中：

// HTML结构（如上所示）
// &lt;input type=&quot;text&quot; id=&quot;input_text&quot; placeholder=&quot;输入文本生成二维码&quot;&gt;
// <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
};

注意事项

浏览器兼容性：
- 标签的download属性在IE11及以下版本不被支持。对于这些旧版浏览器，可能需要采用服务器端下载或提示用户手动保存图片（例如右键点击保存）。
跨域问题（Canvas污染）：
- 如果Canvas上绘制了来自不同源（不同域名、端口或协议）的图片内容，那么出于安全考虑，toDataURL()方法将无法正常工作，会抛出SecurityError。这被称为“Canvas污染”。
- 要解决此问题，需要确保所有绘制到Canvas上的图片都来自同源，或者服务器支持CORS（跨域资源共享），并且图片加载时设置了crossOrigin = "anonymous"。
文件大小与性能：
- Data URL会将整个图片数据编码为字符串，对于非常大的图片，生成的Data URL会非常长，这会增加HTML文件的大小，并可能对页面加载和JavaScript处理性能产生轻微影响。
- 对于大型图片，更推荐将图片上传到服务器并提供一个标准的URL进行下载。但对于二维码这类小图，Data URL是一个高效便捷的解决方案。
异步生成：
- 某些JavaScript库可能异步生成图片，这意味着在调用生成函数后，Canvas元素可能不会立即出现在DOM中。
- 在上述示例中，我们使用了setTimeout来稍微延迟获取Canvas元素，以确保DOM已更新。更健壮的方法是检查库是否提供回调函数，或者使用MutationObserver来监听DOM变化。
文件名：
- download属性的值是建议的文件名，浏览器可能会根据用户设置或文件类型进行调整。
- 动态生成文件名（如qrcode_${Date.now()}.png）有助于避免文件重名。

总结

通过将动态生成的Canvas元素转换为Data URL，并结合HTML 标签的 href 和 download 属性，我们可以有效地为用户提供下载动态生成图片的功能。在实现过程中，需要注意浏览器兼容性、跨域问题、性能考量以及异步处理，以确保用户体验的流畅和功能的稳定性。这种方法对于前端纯粹生成的小型图片下载需求，是一种非常实用且高效的解决方案。

本篇关于《JavaScript生成二维码并下载方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！