如何从javascript中的url生成二维码

因此，我构建了一个url shortner，它从python中获取url并生成一个QR码以及shortUrl，我使用jinja2template作为UI，因为我对JavaScript非常陌生，下面的代码主要是从Youtube和Internet复制的

这个类将显示转换后的短URL，并在其旁边有一个复制链接按钮

            <div class = "result__container">
                <div class = "shorturl">
                    <div id="qrcode"></div>
                </div>
                <div>
                    <button onclick = "copyLink()">Copy Link</button>

                </div>
            </div>

复制链接

这是创建qr码的逻辑我在这里使用qrcode.min.js创建qr码

    <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>

    <script>
        const qrcode = new QRCode(document.getElementById('qrcode'), {
            text: response.shortUrl,
            width: 128,
            height: 128,
            colorDark : '#000',
            colorLight : '#fff',
            correctLevel : QRCode.CorrectLevel.H
    });

const qrcode=新的qrcode（document.getElementById（'qrcode'）{
文本：response.shortUrl，
宽度：128，
身高：128，
colorDark:“#000”，
色光：“#fff”，
correctLevel:QRCode.correctLevel.H
});

xhr.onload=函数（）{
const response=JSON.parse（this.responseText）；
console.log（this.status）；
控制台日志（响应）；
如果（this.status==200）{
resultContainer.style.display=“flex”；
shortUrl.innerHTML=`shortUrl:-`
}
否则{
警报（`发生错误，${response.detail}`）
}
};

您使用的是什么

当您执行

新的QRCode（document.getElementById（“QRCode”），url）时

，库期望

document.getElementById（“qrcode”）

返回元素。 在您提供的html代码中，似乎没有该元素

---

您可以尝试在html文件中添加

，以显示输出的QR代码这个由David Shim创建的简单库非常简单

const qrcode=新的qrcode（document.getElementById（'qrcode'）{
正文：'http://jindo.dev.naver.com/collie',
宽度：128，
身高：128，
colorDark:“#000”，
色光：“#fff”，
correctLevel:QRCode.correctLevel.H
});

嘿，谢谢你的回复，我已经用你提供的代码更新了我的代码，但它不起作用。你能告诉我我遗漏了什么吗？我觉得逻辑不错。首先确保您使用的lib已加载并正常工作（例如，通过生成简单的qrcode）。如果可以的话，你应该试着调试你的代码来验证你的
generateQR
是否被调用，以及参数是否符合你的期望。我已经为此工作了这么久，谷歌上的每个链接都变成紫色了，我只是不明白我做错了什么你好，布兰登，谢谢你的详细回答，但我想问一下我应该在哪里添加你提供的代码？@Sayaji你需要先添加
qrcode.min.js
，然后添加你的HTML元素
#qrcode
，然后添加一个
标签，里面有所有的qrcode逻辑（
const qrcode=new qrcode…
）@Sayaji请查看我更新的示例。这两个示例中的代码都将在您自己的代码库中工作。按照我之前的指示添加代码。布兰登，我完全按照你的指示添加了代码，检查编辑，但它不起作用，我甚至找不到哪里出了问题，可能是因为我从未处理过JS@Saysji他的代码在任何标准环境中都能正常工作。您的环境肯定还有另一个问题，我们无法从您提供的代码中看到。请让我知道，如果你想跳转到一个屏幕共享，我可以与你解决这个问题
            xhr.onload = function () {
                const response = JSON.parse(this.responseText);
                console.log(this.status);
                console.log(response);
                if(this.status ==200){
                    resultContainer.style.display = "flex";
                    shortUrl.innerHTML = `SHORT URL :- <a href=${response.shortUrl}>${response.shortUrl}</a>`
                }
                else{
                    alert(`An error occurred, ${response.detail}`)
                }
            };