Npcink Blog
切换菜单

QRCode.js - 用于 JavaScript 的跨浏览器 QRCode 生成器

QRCode.js 是用于制作 QRCode 的 JavaScript 库。QRCode.js 通过 HTML5 Canvas 和 DOM 中的表格标签支持跨浏览器

最后更新于
本页目录7 节

QRCode.js 是用于制作 QRCode 的 JavaScript 库。QRCode.js 通过 HTML5 Canvas 和 DOM 中的表格标签支持跨浏览器。QRCode.js 没有依赖关系。

  • 项目地址：GitHub
  • **项目介绍：

**详情

  • **菜鸟学院：

**详情

基本用法：

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
</script>

控制选项：

<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
  text: "http://jindo.dev.naver.com/collie",
  width: 128,
  height: 128,
  colorDark : "#000000",
  colorLight : "#ffffff",
  correctLevel : QRCode.CorrectLevel.H
});
</script>

你可以使用一些方法：

qrcode.clear(); // clear the code.
qrcode.makeCode("http://naver.com"); // make another code.

浏览器兼容性

IE6〜10，Chrome，Firefox，Safari，Opera，Mobile Safari，Android，Windows Mobile，ETC。

如何使用？

您需要先加载 jquery.js 和 qrcode.js 这两个 JS，（页底提供压缩包）

<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/qrcode.min.js"></script>

这是一个简单的用法

  <div id="value1">https://www.npc.ink/#</div>
  <div id="qrcode-n"></div>
  <script>
    abc = $("#value1").text();
    //document.write(abc);
    new QRCode(document.getElementById("qrcode-n"), abc);
  </script>

底部提供有演示压缩包下载。

如何获取到指定文本会是一个值得思考的问题，您可以参考下文：

在 jquery 中也有支持的。

扩充：

在网页快速生成二维码的演示

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

此代码中，无法去除上一次生成的二维码。

<!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>

扩展：