跨浏览器纯JavaScript QRCode二维码插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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 模块加载规范

使用方法

npm

npm install easyqrcodejs

在HTML文件中引入。

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

HTML结构

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

javascript

var options = {
  text: "https://github.com/ushelp/EasyQRCodeJS"
};

// Create QRCode Object
new QRCode(document.getElementById("qrcode"), options);

AMD load

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

commonJs

const QRCode = require('easyqrcodejs');

配置参数

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
}

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