HTML 二维码生成源代码

二维码是一种将信息编码成黑白图案的存储技术，是近年来比较流行的一种信息传递方式。在 HTML 中，我们可以使用第三方的库，比如 QRCode.js，来生成二维码。

QRCode.js 是一个轻量级的 JavaScript 库，可以生成 QR 码。它支持多种颜色和容错级别，并且可以自定义二维码的大小。除了生成二维码外，它还支持将二维码转换为 Data URI，方便在页面中直接显示二维码。

生成二维码

使用 QRCode.js 生成二维码非常简单。如果要生成一个大小为 200x200 的二维码，可以使用以下代码：

            div id="qrcode">
    /div>
                script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js">
    /script>
                script>
                var qrcode = new QRCode(document.getElementById("qrcode"), {
                  width : 200,                  height : 200                }
    );
                    qrcode.makeCode("Hello, world!");
                /script>
            

以上代码中，我们在 HTML 中定义了一个 `div` 元素，用于容纳生成的二维码。在 JavaScript 中，我们使用 QRCode.js 首先创建了一个 QRCode 实例，然后传入要生成的二维码的大小参数。最后，调用 `makeCode` 方法生成二维码。

将二维码转换为 Data URI

如果你想在页面中直接显示二维码，可以将二维码转换为 Data URI，然后在 `img` 元素中使用。以下是将二维码转换为 Data URI 的代码：

            script>
                var qrcode = new QRCode("qrcode", {
                    text: "http://www.example.com",                    width: 128,                    height: 128,                    colorDark : "#000000",                    colorLight : "#ffffff",                    correctLevel : QRCode.CorrectLevel.H                }
    );
                                   var canvas = document.getElementById("qrcode canvas");
                                   var dataURL = canvas.toDataURL();
                                   document.getElementById("qrcode img").src = dataURL;
                /script>
                canvas id="qrcode canvas">
    /canvas>
                img id="qrcode img" alt="qrcode">
            

以上代码中，我们在 `canvas` 元素中生成二维码，然后使用 `toDataURL()` 方法将二维码转换为 Data URI。最后，将 Data URI 赋值给 `img` 元素的 `src` 属性，就可以在页面中显示二维码了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！