QRCode.js：使用js快速生成二维码

1.何为QRCode.js?

QRCode.js是用于生成qrcode(二维码)的javascript库。QRCode.js通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。QRCode.js不依赖任何其他库。

首先需要下载QRCode文件

下载地址 http://davidshimjs.github.io/qrcodejs/

2.基本用法

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"),"https://i.csdn.net/#/uc/profile");
</script>

3.在网页快速生成二维码的demo

只使用一个插件，不使用任何动态编程语言，不调用jq等插件。生成二维码，生成的二维码没有logo以及背景图。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> JS 生成二维码</title>
</head>
<body>
    内容：<input type="text" id="content" value="https://i.csdn.net/#/uc/profile" />  <br><br>
    尺寸：<input type="text" id="size" value="150"><br><br>
    背景：<input type="text" id="color" value="#fff"><br><br>
    前景：<input type="text" id="colorr" value="#000"><br><br>
    <button id="btn">生成二维码</button><br><br>
    <div id="qrcode"></div>
</body>
<script src='qrcode/qrcode.js'></script>
<script type="text/javascript">

    //声明变量啊~~
    let qrcode;
    let content;
    let size;
    let color;
    let colorr;
    // 设置点击事件
    document.getElementById("btn").onclick =function(){
        // 获取内容
        content = document.getElementById("content").value;
        // 获取尺寸
        size = document.getElementById("size").value;
         // 获取背景
        color = document.getElementById("color").value;
         // 获取前景
        colorr = document.getElementById("colorr").value;
        // 清除上一次的二维码
         if(qrcode){
            qrcode.clear();
        }
        // 创建二维码
        qrcode = new QRCode(document.getElementById("qrcode"), {
            width : size,//设置宽高
            height : size,
            colorLight : color,
            colorDark : colorr,
            
        });
        qrcode.makeCode(document.getElementById("content").value);

    }

</script>
</html>

文章由官网发布，如若转载，请注明出处：https://www.veimoz.com/166

QRCode

0 评论

3.7k