Skip to content

Instantly share code, notes, and snippets.

@nuintun
Last active September 24, 2021 08:38
Show Gist options
  • Save nuintun/92a0722548601e712705 to your computer and use it in GitHub Desktop.
Save nuintun/92a0722548601e712705 to your computer and use it in GitHub Desktop.
利用联图二维码API生成二维码的jQuery插件
(function ($){
  $.fn.qrcode = function (options){
    // 如果参数书字符串,默认设置成二维码内容
    if (typeof options === 'string') {
      options = { text: options };
    }

    // 参数合并
    options = $.extend({}, {
      text: '', // 二维码内容
      logo: '', // 二维码Logo
      size: 256, // 二维码尺寸
      margin: 0, // 二维码边距
      level: 'h', // 二维码纠错等级
      point: '000000', // 定位点外框颜色
      inpoint: '000000', // 定位到内部颜色
      background: "ffffff", // 二维码背景色
      foreground: "000000", // 二维码前景色
      loading: '/Res/images/default/loading.gif' // 加载等待图片
    }, options);

    // 遍历元素生成二维码
    return this.each(function (){
      var box = $(this),
        qrcode = 'http://qr.liantu.com/api.php'
          + '?text=' + encodeURIComponent(options.text)
          + '&w=' + options.size
          + '&m=' + options.margin
          + '&el=' + options.level
          + '&bg=' + options.background
          + '&fg=' + options.foreground
          + '&pt=' + options.point
          + '&inpt=' + options.inpoint
          + (options.logo ? '&logo=' + options.logo : ''),
        image = $('<img title="qrcode" alt="qrcode" src="' + qrcode + '"/>'),
        loading = '<span style="display:inline-block;margin:0;padding:0;'
          + 'width:' + options.size + 'px;'
          + 'height:' + options.size + 'px;'
          + 'background:url(' + options.loading + ') no-repeat center;'
          + '*zoom:1;"></span>';

      // 生成加载等待图标
      box.html(loading);

      // 二维码加载成功
      image.on('load.qrcode', function (){
        // 渲染二维码
        box.empty().append(this);
        // 解除所有事件
        image.off('load.qrcode');
        image.off('error.qrcode');
        // 触发load事件
        box.triggerHandler('load', image[0]);
      });

      // 二维码加载错误
      image.on('error.qrcode', function (){
        // 解除所有事件
        image.off('load.qrcode');
        image.off('error.qrcode');
        // 触发error事件
        box.triggerHandler('error', image[0]);
      });
    });
  };
}(jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment