手机版 | ------------全站资源有,统一解压码,解码平台,请点这里 ------------ 设首页 | 加收藏
当前位置: 网站首页 > jQuery库 > 文章 当前位置: jQ > 文章

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

时间:2020-06-25    点击: 次    来源:网络    作者:佚名 - 小 + 大

跨浏览器纯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 模块加载规范

使用方法

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 Objectnew 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

 跨浏览器纯JavaScript QRCode二维码插件 本地下载

上一篇:js堆叠卡片轮播图插件stackedCards

下一篇:jQuery和CSS3堆叠式轮播图特效

推荐阅读
浙ICP备14024822号  |   QQ:79720816  |  地址:蚂蚁分享-一个只做有用的分享。  |  电话:13388629007  |  
Copyright © 2020 天人文章管理系统 版权所有,授权www.antqq.com使用 Powered by 55TR.COM