通过 qrcode.js 提取生成的 img 的源属性

Question

就像我在标题中所说的，我的问题是我得到了一个空字符串。

我从 https://github.com/davidshimjs/qrcodejs 判断 qrcode.js .

我的代码：

    <script src="qrcode.js"></script>
<div id="qr"></div>

<img id="test" src="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">


<script type="text/javascript">
var qrCode = new QRCode(
    document.getElementById('qr'),
    {
        text: 'www.google.de',
        width: 150,
        height: 150,
        onSuccess: (value) => {
            console.log('value',value);
        }
    }
);

</script>

<script>
var test = document.getElementById("test").src;
console.log(test);
var base64 = document.getElementById("qr_neu").src;
console.log(base64);
console.log(typeof base64);
console.log(base64.length);
var dom = document.getElementById("qr_neu").attributes;
console.log(dom);
var code = dom[3];
console.log(code);
</script>

生成的 QR-Code 工作正常，在 chrome 的开发者设置中我可以看到两个

的 src

截图： console in chrome

现在我不明白为什么我无法访问 qr-code 的 src 属性但是在 google img.

我也尝试了 github 问题部分描述的回调版本，但它也不起作用。我想要的只是 base64 代码作为其他应用程序的 var。

感谢您的帮助！

Answer 1

即使您可以在开发工具中看到 src 值，您得到一个空字符串的原因是生成 QR 码需要很短的时间。

所以var base64 = document.getElementById("qr_neu").src;在生成二维码之前被调用。

qrcode.js 存储库中有一个相关问题：https://github.com/davidshimjs/qrcodejs/issues/160。

这是适合您的代码的解决方案：

const qrDiv = document.getElementById('qr')
var qrCode = new QRCode(
    qrDiv,
    {
        text: 'www.google.de',
        width: 150,
        height: 150,
        onSuccess: (value) => {
            console.log('value',value);
        }
    }
);
const src = qrDiv.children[0].toDataURL("image/png");
console.info(src);

通过 qrcode.js 提取生成的 img 的源属性

Extracting source attribute of generated img by qrcode.js

javascript

base64

dom