特效介绍
qrcode.js支持将传入的字符串生成二维码,并放在制定的容器当中。使用简单,小巧玲珑,整个文件才33kb,生成速度快,支持设置二维码的颜色,背景色、尺寸大小,还可以设置容错级别,让二维码更容易被识别等,详见下面的文档。我爱模板网已经将它用在了app当中。效果图如下:使用方法
1、引入qrcode.js
<script type="text/javascript" src="qrcode.js"></script>2、定义一个容器,来放置生成后的二维码:
<div id="qrcode"></div>3、调用js
var qrcodeBox = document.getElementById("qrcode"); qrcodeBox.innerHTML = ''; var qrcode = new QRCode(qrcodeBox, { text: '这里是要生成二维码的内容', width: qrcodeBox.offsetHeight, height: qrcodeBox.offsetHeight, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.L });参数说明:
new QRCode(element,params); //生成二维码element
类型:HTMLElement
默认值:null
作用:内容区
是否必传:是
params
类型:object
内部字段:
{ text:"二维码内容",//生成的二维码内容 width:100,//图像宽度 height:100,//图像高度 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 的浏览器下有效)NODE使用方法:
1、安装:
//安装在当前项目 npm install --save qrcode //全局安装 npm install -g qrcode2、使用:
var QRCode = require('qrcode') created() { QRCode.toDataURL('http://www.5imoban.net!', function (err, url) { console.log(url) }) }