前端生成二维码 --- QRCode.js

一、简介

QRCode.js是一个通过js生成二维码图片的插件。通过引用这个js，前端可以很方便的生成二维码图案，不需要再通过后端进行生成调用，大大的节省了时间和资源。
点击查看文档

二、使用方法

（1）引入js文件(下载QRCode.js)

（2）DOM结构

（3）js调用

    /* 1、生成简单二维码 
        优点：API简单，代码简洁
        缺点：不可设置二维码的样式参数
    */
    new QRCode(document.getElementById('myCode'),'二维码内容');
    
    /* 2、通过配置参数生成二维码
        优点：可以设置二维码的颜色和大小等参数
        缺点：参数比较多，建议二次封装成一个公共函数
    */
       var QRC = new QRCode('myCode', {
         text: '二维码内容',
         width: 256,
         height: 256,
         colorDark : '#000000',
         colorLight : '#ffffff',
         correctLevel : QRCode.CorrectLevel.H
       });
       
       // 使用 API
       qrcode.clear();
       qrcode.makeCode('new content');  
    

三、API介绍

（1）参数介绍

    new QRCode(ele,opt)

参数名称	默认值	参数说明
ele	-	生成二维码所在的元素ID
opt	-	二维码的参数

（2）二维码配置参数

参数名称	默认值	参数说明
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

(3) API接口

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