帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

js生成二维码插件

帝国模板之家 2020-12-18 网页特效 评论

介绍

基于JavaScript、HTML5画布和HTML表格的客户端二维码生成器插件, 支持自定义二维码标题、内容、logo。

使用方法

在页面中引入二维码生成器js插件

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

创建一个要放置二维码的容器。

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

生成一个基本的二维码。

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

生成一个带logo的二维码。

var qrcode = new QRCode(document.getElementById("qrcode"), {
      text: "https://www.moyouyouw.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, // Global Posotion Outer color. if not set, the defaut is `colorDark`
    PI: undefined, // Global Posotion Inner color. if not set, the defaut is `colorDark`
    PO_TL: undefined, // Posotion Outer - Top Left 
    PI_TL: undefined, // Posotion Inner - Top Left 
    PO_TR: undefined, // Posotion Outer - Top Right 
    PI_TR: undefined, // Posotion Inner - Top Right 
    PO_BL: undefined, // Posotion Outer - Bottom Left 
    PI_BL: undefined, // Posotion Inner - Bottom Left 

    // === Alignment Color
    AO: undefined, // Alignment Outer. if not set, the defaut is `colorDark`
    AI: undefined, // Alignment Inner. if not set, the defaut is `colorDark`

    // === Timing Pattern Color
    timing: undefined, // Global Timing color. if not set, the defaut is `colorDark`
    timing_H: undefined, // Horizontal timing color
    timing_V: undefined, // Vertical timing color

    // ==== Backgroud Image
    backgroundImage: undefined, // Background Image
    backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1. 
    autoColor: false,

    // IE9+ Only
    dotScale: 1,

    // from Version 1 to Version 40. 0 means automatically choose the closest version based on the text length.
    version: 0, 

    // Whether set the QRCode Text as the title attribute value of the image
    tooltip: false, 

    // binary mode or not
    binary: false, 

    // or 'svg'
    drawer: 'canvas',

    // ==== Event Handler
    onRenderingStart: undefined,
    onRenderingEnd: undefined,
});

清除二维码。

qrcode.clear();

重新生成新的二维码。

qrcode.makeCode("http://www.moyouyouw.cn");

设置二维码的大小。

qrcode.resize(460, 460);
不要总是怀疑别人,真诚地接受别人的意见,其实是聪明人的选择。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言