js生成二维码_使用QRCode.js插件生成二维码

最新推荐文章于 2022-07-28 13:49:05 发布

最新推荐文章于 2022-07-28 13:49:05 发布 · 272 阅读

文章标签：

#js生成二维码 #在线车牌生成效果图

本文介绍了QRCode.js，它是一个用于生成二维码的JavaScript库，不依赖其他库，通过HTML5 Canvas绘制。文中说明了其基本用法，列举了支持的浏览器，给出了实例代码及效果图，还提供了资源下载地址和草料二维码生成器信息。

什么是 QRCode.js？

QRCode.js 是一个用于生成二维码的JavaScript库，不依赖任何库，通过HTML5 Canvas绘制。

基本用法

new QRCode(document.getElementById("qrcode"), "http://www.runoob.com"); // 设置要生成二维码的链接

或者使用一些可选参数设置：

var qrcode = new QRCode("test", { text: "http://www.runoob.com", width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H });

同样我们可以使用以下方法：

浏览器支持

支持该库的浏览器有：IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。

实例代码

HTML 代码

<input id="text" type="text" value="http://www.aliyun01.com"><br>
<div id="qrcode"></div>

CSS 代码

#qrcode {
width:160px;
  height:160px;
  margin-top:15px;
}

JavaScript 代码

var qrcode = new QRCode("qrcode");

function makeCode () {      
    var elText = document.getElementById("text");
    
    if (!elText.value) {
        alert("Input a text");
        elText.focus();
        return;
    }
    
    qrcode.makeCode(elText.value);
}

makeCode();

$("#text").
on("blur", function () {
    makeCode();
}).
on("keydown", function (e) {
    if (e.keyCode == 13) {
        makeCode();
    }
});