Android浏览器中Base64String无法显示的解决方案问询

问题根源 #

Android浏览器对qrcode.js生成的图片src处理存在两个常见问题：

• 二维码生成后，图片未完全加载就获取src，导致值无法正常解析
• 部分浏览器会自动把data URL转成blob URL，直接赋值到文本容器会显示空白

修复方案 #

1. 等待图片完全加载后再获取Base64 #

利用qrcode.js的回调和图片的load事件，确保src完全可用：

修改后的完整代码 #

HTML

<div id="qrcode"></div>
<button id="testClick">Test</button>
<textarea id="base64Textarea" rows="10" cols="50"></textarea>
<p id="base64Paragraph"></p>

JavaScript

var qrcode = new QRCode("qrcode", {
    width: 256,
    height: 256,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

// 用makeCode的回调确保二维码生成完成
qrcode.makeCode("KAJFAK23", function() {
    const qrcodeEl = document.getElementById("qrcode");
    const imgEl = qrcodeEl.querySelector("img");

    // 监听图片加载完成事件
    imgEl.addEventListener("load", function() {
        const clickBtn = document.getElementById("testClick");
        clickBtn.addEventListener("click", async () => {
            let base64Str = imgEl.src;

            // 处理Android浏览器可能转换的blob URL
            if (base64Str.startsWith("blob:")) {
                const response = await fetch(base64Str);
                const blob = await response.blob();
                // 把blob转成base64
                const reader = new FileReader();
                reader.onload = function() {
                    base64Str = reader.result;
                    // 赋值到textarea和段落
                    document.getElementById("base64Textarea").value = base64Str;
                    document.getElementById("base64Paragraph").textContent = base64Str;
                };
                reader.readAsDataURL(blob);
            } else {
                // 直接赋值
                document.getElementById("base64Textarea").value = base64Str;
                document.getElementById("base64Paragraph").textContent = base64Str;
            }
        });
    });
});

关键说明 #

• 用makeCode的回调函数确保二维码生成逻辑完成，避免提前获取未生成的img元素
• 监听img的load事件，保证图片资源完全加载后再读取src
• 增加blob URL转base64的逻辑，适配部分Android浏览器的自动转换行为

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