其他代码

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

面包多

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

使用方法

在 HTML 文件中引入。

也想出现在这里?联系我们
创客主机

HTML 结构

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

javascript

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

AMD load

  1. require.config({
  2.   // 指定模块id 和其对应文件的相对路径
  3.   paths: {
  4.     QRCode: "<YOUR_PATH>/easy.qrcode.min"
  5.   }
  6.  });
  7.  
  8.  require(["QRCode"], function(QRCode){
  9.  
  10.   // Your code...
  11.  
  12.  });

commonJs

  1. const QRCode = require('easyqrcodejs');

配置参数

  1. var options = {
  2.     // ====== Basic
  3.     text: "https://github.com/ushelp/EasyQRCodeJS",
  4.     width: 256,
  5.     height: 256,
  6.     quietZone: 0,
  7.     colorDark : "#000000",
  8.     colorLight : "#ffffff",
  9.     correctLevel : QRCode.CorrectLevel.H, // L, M, Q, H
  10.     dotScale: 1 // Must be greater than 0, less than or equal to 1. default is 1
  11.  
  12.     // ====== Logo
  13.     //  logo:"../demo/logo.png", // Relative address, relative to `easy.qrcode.min.js`
  14.     //  logo:"http://127.0.0.1:8020/easy-qrcodejs/demo/logo.png", 
  15.     //  logoWidth:80, // widht. default is automatic width
  16.     //  logoHeight:80 // height. default is automatic height
  17.     //  logoBackgroundColor:'#fffff', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
  18.     //  logoBackgroundTransparent:false, // Whether use transparent image, default is false
  19.  
  20.     // ====== Backgroud Image
  21.     //  backgroundImage: '', // Background Image
  22.     //  backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1. 
  23.     //  autoColor: false,
  24.  
  25.  
  26.     // ====== Colorful
  27.     // === Posotion Pattern(Eye) Color
  28.     //  PO: '#e1622f', // Global Posotion Outer color. if not set, the defaut is `colorDark`
  29.     //  PI: '#aa5b71', // Global Posotion Inner color. if not set, the defaut is `colorDark`
  30.     //  PO_TL:'', // Posotion Outer color - Top Left 
  31.     //  PI_TL:'', // Posotion Inner color - Top Left 
  32.     //  PO_TR:'', // Posotion Outer color - Top Right 
  33.     //  PI_TR:'', // Posotion Inner color - Top Right 
  34.     //  PO_BL:'', // Posotion Outer color - Bottom Left 
  35.     //  PI_BL:'', // Posotion Inner color - Bottom Left 
  36.     //  PO_BR:'', // Posotion Outer color - Bottom Right 
  37.     //  PI_BR:'', // Posotion Inner color - Bottom Right 
  38.     // === Alignment Color
  39.     //  AO: '', // Alignment Outer. if not set, the defaut is `colorDark`
  40.     //  AI: '', // Alignment Inner. if not set, the defaut is `colorDark`
  41.     // === Timing Pattern Color
  42.     //  timing: '#e1622f', // Global Timing color. if not set, the defaut is `colorDark`
  43.     //  timing_H: '', // Horizontal timing color
  44.     //  timing_V: '', // Vertical timing color
  45.  
  46.     // ====== Title
  47.     //  title: 'QR Title', // content 
  48.     //  titleFont: "bold 18px Arial", //font. default is "bold 16px Arial"
  49.     //  titleColor: "#004284", // color. default is "#000"
  50.     //  titleBackgroundColor: "#fff", // background color. default is "#fff"
  51.     //  titleHeight: 70, // height, including subTitle. default is 0
  52.     //  titleTop: 25, // draws y coordinates. default is 30
  53.  
  54.     // ====== SubTitle
  55.     //  subTitle: 'QR subTitle', // content
  56.     //  subTitleFont: "14px Arial", // font. default is "14px Arial"
  57.     //  subTitleColor: "#004284", // color. default is "4F4F4F"
  58.     //  subTitleTop: 40, // draws y coordinates. default is 0
  59.  
  60.     // ===== Event Handler
  61.     //  onRender: undefined
  62. }

Github 网址:https://github.com/ushelp/EasyQRCodeJS

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!