跨浏览器纯JavaScript QRCode二维码插件

在微信时代里，二维码是再常见不过的东西了，我们为了显示自己的与众不同，会尝试去做一些比较特殊的二维码图形，今天，我就来跟大家分享一个二维码绘画插件【EasyQRCodeJS】，它是一款功能丰富的跨浏览器的纯 JavaScript QRCode 生成库。

支持 JavaScript 模块化加载。

支持点状风格，Logo，背景图片，规则色彩控制，标题等设置。

它的特点还有：

• 跨浏览器，支持基于 HTML5 Canvas 和 Table 的二维码生成

• 支持点形风格的 Required Patterns

• 支持 Quiet Zone 设置

• 支持自定义 Position Pattern 内填充和外边框颜色

• 支持自定义 Alignment Pattern 内填充和外边框颜色

• 支持自定义 Timing Patterns 垂直，水平颜色

• 支持 Logo 图片（包括背景透明的 PNG 图片）

• 支持 Background Image 背景图片

• 支持标题，副标题设置

• 不依赖任何第三方

• 支持 AMD，CMD, CommonJS/Node.js JavaScript 模块加载规范

 

实现效果截图如下：

 

EasyQRCodeJS插件的github网址为： https://github.com/ushelp/EasyQRCodeJS

 

使用方法

npm

1	npm install easyqrcodejs

 

在HTML文件中引入。

 

1 2 3

<script src="dist/easy.qrcode.min.js" type="text/javascript" charset="utf-8"> </script>

 

HTML结构

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

 

 

javascript

1 2 3 4 5

var options = { text: "https://github.com/ushelp/EasyQRCodeJS" }; // Create QRCode Object new QRCode(document.getElementById("qrcode"), options);

 

AMD load

 

1 2 3 4 5 6 7 8 9

<strong>require.config({ // 指定模块id 和其对应文件的相对路径   paths: { QRCode: "<YOUR_PATH>/easy.qrcode.min"   }  });  require(["QRCode"], function(QRCode){   // Your code...  });   </strong>

 

commonJs

 

 

1	<strong>const QRCode = require('easyqrcodejs');  </strong>

 

 

配置参数

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

var options = {     // ====== Basic     text: "https://github.com/ushelp/EasyQRCodeJS",     width: 256,     height: 256,     quietZone: 0,     colorDark : "#000000",     colorLight : "#ffffff",     correctLevel : QRCode.CorrectLevel.H, // L, M, Q, H     dotScale: 1 // Must be greater than 0, less than or equal to 1. default is 1            // ====== Logo     //  logo:"../demo/logo.png", // Relative address, relative to `easy.qrcode.min.js`     //  logo:"http://127.0.0.1:8020/easy-qrcodejs/demo/logo.png",     //  logoWidth:80, // widht. default is automatic width     //  logoHeight:80 // height. default is automatic height     //  logoBackgroundColor:'#fffff', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'     //  logoBackgroundTransparent:false, // Whether use transparent image, default is false          // ====== Backgroud Image     //  backgroundImage: '', // Background Image     //  backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1.     //  autoColor: false,                   // ====== Colorful     // === Posotion Pattern(Eye) Color     //  PO: '#e1622f', // Global Posotion Outer color. if not set, the defaut is `colorDark`     //  PI: '#aa5b71', // Global Posotion Inner color. if not set, the defaut is `colorDark`     //  PO_TL:'', // Posotion Outer color - Top Left     //  PI_TL:'', // Posotion Inner color - Top Left     //  PO_TR:'', // Posotion Outer color - Top Right     //  PI_TR:'', // Posotion Inner color - Top Right     //  PO_BL:'', // Posotion Outer color - Bottom Left     //  PI_BL:'', // Posotion Inner color - Bottom Left     //  PO_BR:'', // Posotion Outer color - Bottom Right     //  PI_BR:'', // Posotion Inner color - Bottom Right     // === Alignment Color     //  AO: '', // Alignment Outer. if not set, the defaut is `colorDark`     //  AI: '', // Alignment Inner. if not set, the defaut is `colorDark`     // === Timing Pattern Color     //  timing: '#e1622f', // Global Timing color. if not set, the defaut is `colorDark`     //  timing_H: '', // Horizontal timing color     //  timing_V: '', // Vertical timing color            // ====== Title     //  title: 'QR Title', // content     //  titleFont: "bold 18px Arial", //font. default is "bold 16px Arial"     //  titleColor: "#004284", // color. default is "#000"     //  titleBackgroundColor: "#fff", // background color. default is "#fff"     //  titleHeight: 70, // height, including subTitle. default is 0     //  titleTop: 25, // draws y coordinates. default is 30            // ====== SubTitle     //  subTitle: 'QR subTitle', // content     //  subTitleFont: "14px Arial", // font. default is "14px Arial"     //  subTitleColor: "#004284", // color. default is "4F4F4F"     //  subTitleTop: 40, // draws y coordinates. default is 0            // ===== Event Handler     //  onRender: undefined }