QRCode.js在线生成二维码插件 - 资源分享

QRCode.js在线生成二维码插件

发布于 2017-04-25 字数 3084 浏览 2859 评论 0

QRCode.js 是一个用于生成二维码图片的插件,使用方便简单,插件提供了大量的可选自定义参数和回调函数,方便我们自定义配置插件的显示效果,生成的二维码基本都能识别,QRcode.js支持DOM的跨浏览器的HTML5画布和表格标签。QRCode.js没有依赖任何第三方插件脚本。

基本用法

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

使用方法

载入 JavaScript 文件

<script src="qrcode.js"></script>

DOM 结构

<div id="qrcode"></div>

调用

// 简单方式
new QRCode(document.getElementById('qrcode'), 'your content');

// 设置参数方式
var qrcode = new QRCode('qrcode', {
  text: 'your content',
  width: 256,
  height: 256,
  colorDark : '#000000',
  colorLight : '#ffffff',
  correctLevel : QRCode.CorrectLevel.H
});

// 使用 API
qrcode.clear();
qrcode.makeCode('new content');

参数说明

new QRCode(element, option)
名称 默认值 说明
element 显示二维码的元素或该元素的 ID
option 参数配置

option 参数说明

名称 默认值 说明
width 256 图像宽度
height 256 图像高度
typeNumber 4
colorDark “#000000” 前景色
colorLight “#ffffff” 背景色
correctLevel QRCode.CorrectLevel.L 容错级别,可设置为:

QRCode.CorrectLevel.L

QRCode.CorrectLevel.M

QRCode.CorrectLevel.Q

QRCode.CorrectLevel.H

API 接口

名称 说明
makeCode(text) 设置二维码内容
clear() 清除二维码。(仅在不支持 Canvas 的浏览器下有效)

相关链接

Github地址:https://github.com/davidshimjs/qrcodejs

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0