跨浏览器纯JavaScript QRCode二维码插件【附DEMO源码】-白红宇

跨浏览器纯JavaScript QRCode二维码插件【附DEMO源码】

阅读量：4116 次

发布时间：2019-05-25

本文共 3992 字，大约阅读时间需要 13 分钟。

640?wx_fmt=jpeg

在微信时代里，二维码是再常见不过的东西了，我们为了显示自己的与众不同，会尝试去做一些比较特殊的二维码图形，今天，我就来跟大家分享一个二维码绘画插件【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 模块加载规范

实现效果截图如下：

640?wx_fmt=png

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

使用方法

npm

npm install easyqrcodejs

在HTML文件中引入。

HTML结构

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: "
          
           /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	}

DEMO源码下载地址：

https://tc5.us/file/21793581-403701978

640?wx_fmt=jpeg

640?wx_fmt=png

转载地址：http://yffpi.baihongyu.com/

你可能感兴趣的文章