移动端获取JS动态生成二维码图片src并实现下载按钮求助

问题现象 #

• 基于表单数据通过qrcode.js动态生成二维码后，桌面端和Android Chrome「请求桌面网站」模式下，下载按钮可正常保存二维码图片；但Android Chrome普通模式下，点击下载按钮会保存整个HTML文件
• 排查发现：普通移动端模式下，通过qr.querySelector("img").src获取到的是空字符串，而桌面端/桌面模式能正常拿到二维码的base64格式src
• 动态生成的二维码无法通过长按保存，静态图片则可以正常长按下载

涉及代码 #

const form = document.getElementById('generate-form');
const qr = document.getElementById('qrcode');

const onGenerateSubmit = (e) => {
    e.preventDefault();

    clearUI();

    const name = document.getElementById('name').value;
    var radios = document.getElementsByName("svc");
    let reference = service + ' ' + name;
    
    setTimeout(() => {
        // 生成二维码
        generateQRCode(reference);

        setTimeout(() => {
            // 获取二维码图片src
            const saveUrl = qr.querySelector("img").src;
            createSaveBtn(saveUrl);
        }, 1000);
    }, 50);

}

const generateQRCode = (url) => {
    const qrcode = new QRCode('qrcode', {
        text: url,
        width: 300,
        height: 300,
    });
}

const createSaveBtn = (saveUrl) => {
    const link = document.createElement('a');
    link.id = 'save-link';
    alert(saveUrl);
    link.classList = 'bg-red-500 hover:bg-red-700  text-white font-bold py-2 rounded w-1/3 m-auto my-5';
    link.href = saveUrl;
    link.download = 'qrcode';
    link.innerHTML = 'Save Image';
    document.getElementById('generated').appendChild(link);
};

const clearUI = () => {
    qr.innerHTML = '';
    const saveBtn = document.getElementById('save-link');
    if (saveBtn) saveBtn.remove();
}

form.addEventListener('submit', onGenerateSubmit);

问题根源 #

qrcode.js内部用于识别Android设备的正则表达式存在错误，导致在Android Chrome普通模式下，没有正确生成带有base64格式src的<img>标签，而是生成了<canvas>元素（或未完成canvas到img的转换），因此无法通过img.src获取有效地址。

修复方法 #

修改qrcode.js中的设备检测逻辑：找到代码中用于判断是否使用canvas渲染的正则部分，将原错误的正则替换为正确的匹配规则，确保能正确识别Android Chrome普通模式，从而生成可获取src的img标签。

内容的提问来源于stack exchange，提问作者izlim