zoukankan      html  css  js  c++  java
  • JQuery生成二维码,有资源下载

    原文链接:http://www.yxxrui.cn/article/65.shtml

    没时间或者懒得看的,可以直接看加粗部分(或试试手感▼)。

    使用jquery.qrcode来生成二维码,qrcode基于JQuery,所以使用之前必须先引用JQueryQrcode的最新代码地址:https://github.com/jeromeetienne/jquery-qrcode


    1、先添加引用

    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.qrcode.min.js"></script>

    2、添加存放容器

    需要在页面上设置需要显示的地方,用来存放二维码,比如

    <div id=“erweima”></div>

    3、开始调用

    $(‘#erweima’).qrcode('http://www.yxxrui.cn'); //要生成的字符串

    4、大功告成

    ====================优雅的分割线======================

    方法原型:

    $(selector).qrcode(options);

    其中参数options详细设置方法如下:

    (试了试,似乎没啥用▼)

    {
      // render method: 'canvas', 'table'
      render: 'canvas',
      // version range somewhere in 1 .. 40
      minVersion: 1,
      maxVersion: 40,
      // error correction level: 'L', 'M', 'Q' or 'H'
      ecLevel: 'L',
     
      // offset in pixel if drawn onto existing canvas
      left: 0,
      top: 0,
     
      // size in pixel
      size: 200,
     
      // code color or image element
      fill: '#000',
     
      // background color or image element, null for transparent background
      background: null,
     
      // content
      text: 'no text',
     
      // corner radius relative to module  0.0 .. 0.5
      radius: 0,
     
      // quiet zone in modules
      quiet: 0,
     
      // modes
      // 0: normal
      // 1: label strip
      // 2: label box
      // 3: image strip
      // 4: image box
      mode: 0,
     
      mSize: 0.1,
      mPosX: 0.5,
      mPosY: 0.5,
     
      label: 'no label',
      fontname: 'sans',
      fontcolor: '#000',
     
      image: null
    }

    (试了试,似乎没啥用▲)

    常用的有

    $(“#erweima”).qrcode({
      render:"table",
      200,
      height:200,
      background:'#ffffff',//背景颜色
      foreground:'#ff0000',//二维码颜色
      text:"http://www.yxxrui.cn"
    });

    需要注意的是:table的方式效率比较低,canvas方式效率高一点(默认为canvas),但是canvas方式必须在支持html5的浏览器上才能使用,如果使用canvas时会出现无法生成的情况,而使用table时会出现速度慢的情况,所以可以考虑判断当前浏览器是否支持html5.

    加粗部分如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>二维码DEMO</title>
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.qrcode.min.js"></script>
    </head>
    <body>
    <div id="erweima"></div>
    <script type="text/javascript">
      var renderStr;//显示方式,有canvas和table两种
      //检查是否支持html5,也可以使用其他方式
      if (window.applicationCache) {
        renderStr = 'canvas';
      }else{
        renderStr = 'image';
      }
      $('#erweima').qrcode({
        render: renderStr,
         180,
        height:180,
        text: "http://www.yxxrui.cn"
        //可以设置为当前url,如:window.location+""
      });
    </script>
    </body>
    </html>

    加粗部分如上:

    生成的二维码如下:

    360反馈意见截图16490201394546.png

    DEMO下载地址(可直接运行):http://www.yxxrui.cn/article/65.shtml



  • 相关阅读:
    C#之纯数字判断
    C#之仿魔兽登录
    jQuery考试之错题分析
    初学jQuery之jQuery虚假购物车-------与真实数据无关
    Jquery中绑定事件的异同
    总结java基础
    初学jQuery之jQuery事件与动画
    初学jQuery之jQuery选择器
    JavaScript 实现复制到剪贴板的总结
    IE和其他浏览器的表现差异:盒子间的空隙,图片变形,justify-content无效
  • 原文地址:https://www.cnblogs.com/yxxrui/p/6661801.html
Copyright © 2011-2022 走看看