当前位置:主页 > JavsScript库 > 其它 >

带有LOGO和标题的二维码生成器 - EasyQRCodeJS
栏目分类:其它   发布日期:2021-08-16   浏览次数:

EasyQRCodeJS 是一个功能丰富的跨浏览器的纯 JavaScript QRCode 生成库。支持 Canvas, SVG, Table 等绘制方式。支持 JavaScript 模块化加载。支持点状风格,Logo,背景图片,规则色彩控制,标题等设置。支持 Angular, Vue.js, React, Next.js, Svelte 等框架。支持二进制数据模式。(基于客户端 DOM 运行)

EasyQRCodeJS使用它:

将 EasyQRCodeJS 导入 HTML 文档。

<script src="easy.qrcode.js"></script>


创建要放置 QR 码的容器。

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


生成基本的二维码。

var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "https://www.html369.cn"
});


向 QR 码添加自定义LOGO。

var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "https://www.html369.cn",
    logo: "logo.png",
    logoWidth: undefined,
    logoHeight: undefined,
    logoBackgroundColor: '#ffffff',
    logoBackgroundTransparent: false
});


为二维码添加自定义标题和副标题。

var qrcode = new QRCode(document.getElementById("qrcode"), {
    title: "自定义标题内容",
    titleFont: "bold 16px Arial",
    titleColor: "#000000",
    titleBackgroundColor: "#ffffff",
    titleHeight: 0,
    titleTop: 30, 
 
    subTitle: "副标题内容",
    subTitleFont: "14px Arial",
    subTitleColor: "#4F4F4F",
    subTitleTop: 0,
});


自定义二维码的外观。

var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 256,
    height: 256,
    typeNumber: 4,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRErrorCorrectLevel.H,
    quietZone: 0,
    quietZoneColor: 'transparent',
    // === Posotion Pattern(Eye) Color
    PO: undefined, // 全局位置外层颜色。如果未设置,默认为 `colorDark`
    PI: undefined, // 全局位置内层颜色. 如果未设置,则默认为 `colorDark`
    PO_TL: undefined, // 位置外 - Top Left 
    PI_TL: undefined, // 位置内 - Top Left 
    PO_TR: undefined, // 位置外 - Top Right 
    PI_TR: undefined, // 位置内 - Top Right 
    PO_BL: undefined, // 位置外 - Bottom Left 
    PI_BL: undefined, // 位置内 - Bottom Left 
 
    // === Alignment Color
    AO: undefined, // 对齐外。如果未设置,则默认为 `colorDark`
    AI: undefined, // 对齐内。如果未设置,则默认为 `colorDark`
 
    // === 时序模式颜色
    timing: undefined, // 全局时序颜色。如果未设置,则默认为 `colorDark`
    timing_H: undefined, // 水平定时颜色
    timing_V: undefined, // 垂直定时颜色
 
    // ==== 背景图像
    backgroundImage: undefined, // 背景图像
    backgroundImageAlpha: 1, // 背景图片透明度,0 到 1 之间的值。默认为 1。 
    autoColor: false,
    autoColorDark: "rgba(0, 0, 0, .6)", // 自动颜色: dark CSS color
    autoColorLight: "rgba(255, 255, 255, .7)", // 自动颜色: light CSS color
 
    // IE9+ Only
    dotScale: 1,
 
    // from Version 1 to Version 40. 0 表示根据文本自动选择最接近的版本长度。
    version: 0, 
 
    // 是否设置二维码文本为图片的标题属性值
    tooltip: false, 
 
    // 二进制模式与否
    binary: false, 
 
    // 或 'svg'
    drawer: 'canvas',
 
    // 指定检索图像时使用的 CORS 设置
    crossOrigin: null
 
    // ==== Event Handler
    onRenderingStart: undefined,
    onRenderingEnd: undefined,
});


删除二维码。

qrcode.clear();


重新生成新的二维码。

qrcode.makeCode("这里有新内容");


调整二维码大小。

qrcode.resize(460, 460);


官方网站:https://github.com/ushelp/EasyQRCodeJS

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库