javaScript生成支持中文带logo的二维码(jquery.qrcode.js)


Posted in Javascript onJanuary 03, 2017

本文实例为大家分享了支持中文,且带logo的二维码的生成代码,供大家参考,具体内容如下

资料搜索

javaScript生成支持中文带logo的二维码(jquery.qrcode.js)

选择star最多的两个

javaScript生成支持中文带logo的二维码(jquery.qrcode.js)

第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrcode.js,支持中文。

支持中文

//qrcode.js
function QR8bitByte(data) {
  this.mode = QRMode.MODE_8BIT_BYTE;
  this.data = data;
}

QR8bitByte.prototype = {

  getLength : function(buffer) {
    return this.data.length;
  },

  write : function(buffer) {
    for (var i = 0; i < this.data.length; i++) {
      // not JIS ...
      buffer.put(this.data.charCodeAt(i), 8);
    }
  }
};

修改如下(就是复制粘贴了第二份代码的头部):

function QR8bitByte(data) {
  this.mode = QRMode.MODE_8BIT_BYTE;
  this.data = data;
  this.parsedData = [];

  // Added to support UTF-8 Characters
  for (var i = 0, l = this.data.length; i < l; i++) {
    var byteArray = [];
    var code = this.data.charCodeAt(i);

    if (code > 0x10000) {
      byteArray[0] = 0xF0 | ((code & 0x1C0000) >>> 18);
      byteArray[1] = 0x80 | ((code & 0x3F000) >>> 12);
      byteArray[2] = 0x80 | ((code & 0xFC0) >>> 6);
      byteArray[3] = 0x80 | (code & 0x3F);
    } else if (code > 0x800) {
      byteArray[0] = 0xE0 | ((code & 0xF000) >>> 12);
      byteArray[1] = 0x80 | ((code & 0xFC0) >>> 6);
      byteArray[2] = 0x80 | (code & 0x3F);
    } else if (code > 0x80) {
      byteArray[0] = 0xC0 | ((code & 0x7C0) >>> 6);
      byteArray[1] = 0x80 | (code & 0x3F);
    } else {
      byteArray[0] = code;
    }

    this.parsedData.push(byteArray);
  }

  this.parsedData = Array.prototype.concat.apply([], this.parsedData);

  if (this.parsedData.length != this.data.length) {
    this.parsedData.unshift(191);
    this.parsedData.unshift(187);
    this.parsedData.unshift(239);
  }
}

QR8bitByte.prototype = {
  getLength: function (buffer) {
    return this.parsedData.length;
  },
  write: function (buffer) {
    for (var i = 0, l = this.parsedData.length; i < l; i++) {
      buffer.put(this.parsedData[i], 8);
    }
  }
};

 网上也提供的解决方案:

//在传入文本处转码也可
function utf16to8(str) {
  var out, i, len, c;
  out = "";
  len = str.length;
  for(i = 0; i < len; i++) {
    c = str.charCodeAt(i);
    if ((c >= 0x0001) && (c <= 0x007F)) {
      out += str.charAt(i);
    } else if (c > 0x07FF) {
      out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
      out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
      out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
    } else {
      out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
      out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
    }
  }
  return out;
}

支持自定义logo

修改jquery.qrcode.js,createCanvas函数

var createCanvas  = function(){
      // create the qrcode itself
      var qrcode = new QRCode(options.typeNumber, options.correctLevel);
      qrcode.addData(options.text);
      qrcode.make();

      // create canvas element
      var canvas = document.createElement('canvas');
      canvas.width  = options.width;
      canvas.height  = options.height;
      var ctx   = canvas.getContext('2d');

      //增加以下代码,把图片画出来
      if( options.src ) {//传进来的图片地址
        //图片大小
        options.imgWidth = options.imgWidth || options.width / 4.7;
        options.imgHeight = options.imgHeight || options.height / 4.7;
        var img = new Image();
        img.src = options.src;
        //不放在onload里,图片出不来
        img.onload = function () {
          ctx.drawImage(img, (options.width - options.imgWidth) / 2, (options.height - options.imgHeight) / 2, options.imgWidth, options.imgHeight);
        }
      }
      // compute tileW/tileH based on options.width/options.height
      var tileW  = options.width / qrcode.getModuleCount();
      var tileH  = options.height / qrcode.getModuleCount();

      // draw in the canvas
      for( var row = 0; row < qrcode.getModuleCount(); row++ ){
        for( var col = 0; col < qrcode.getModuleCount(); col++ ){
          ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;
          var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));
          var h = (Math.ceil((row+1)*tileW) - Math.floor(row*tileW));
          ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h); 
        }  
      }
      // return just built canvas
      return canvas;
    };

修改jquery.qrcode.js,createTable函数(不支持canvas用table画二维码)

var createTable = function(){
      // create the qrcode itself
      var qrcode = new QRCode(options.typeNumber, options.correctLevel);
      qrcode.addData(options.text);
      qrcode.make();

      // create table element
      var $table  = $('<table></table>')
        .css("width", options.width+"px")
        .css("height", options.height+"px")
        .css("border", "0px")
        .css("border-collapse", "collapse")
        .css('background-color', options.background);

      // compute tileS percentage
      var tileW  = options.width / qrcode.getModuleCount();
      var tileH  = options.height / qrcode.getModuleCount();

      // draw in the table
      for(var row = 0; row < qrcode.getModuleCount(); row++ ){
        var $row = $('<tr></tr>').css('height', tileH+"px").appendTo($table);

        for(var col = 0; col < qrcode.getModuleCount(); col++ ){
          $('<td></td>')
            .css('width', tileW+"px")
            .css('background-color', qrcode.isDark(row, col) ? options.foreground : options.background)
            .appendTo($row);
        }  
      }

      //主要思想,把table,和img标签放在同一个div下,div relative定位,然后使得图片absolute定位在table中间
      if( options.src ) {
        options.imgWidth = options.imgWidth || options.width / 4.7;
        options.imgHeight = options.imgHeight || options.height / 4.7;
        var $img = $('<img>').attr("src", options.src)
          .css("width", options.imgWidth)
          .css("height", options.imgHeight)
          .css("position", "absolute")
          .css("left", (options.width - options.imgWidth) / 2)
          .css("top", (options.height - options.imgHeight) / 2);
        $table = $('<div style="position:relative;"></div>')
          .append($table)
          .append($img);
      }

      // return just built canvas
      return $table;
    };

对IE做特殊判断,大家懂的

//判断是否IE, IE8以下,用 table,否则用 canvas
    var isIE = function() {
      var b = document.createElement('b');
      b.innerHTML = '<!--[if IE]><i></i><![endif]-->';
      return b.getElementsByTagName('i').length === 1;
    };
    options.render = options.render ||
      (isIE(6) || isIE(7) || isIE(8))? "table": "canvas";

改过后的jquery.qrcode.js如下:

(function( $ ){
  $.fn.qrcode = function(options) {
    // if options is string, 
    if( typeof options === 'string' ){
      options = { text: options };
    }

    //判断是否IE, IE8以下,用 table,否则用 canvas
    var isIE = function() {
      var b = document.createElement('b');
      b.innerHTML = '<!--[if IE]><i></i><![endif]-->';
      return b.getElementsByTagName('i').length === 1;
    };
    options.render = options.render ||
      (isIE(6) || isIE(7) || isIE(8))? "table": "canvas";
    // set default values
    // typeNumber < 1 for automatic calculation
    options = $.extend( {}, {
      // render    : "canvas",
      width    : 256,
      height   : 256,
      typeNumber : -1,
      correctLevel  : QRErrorCorrectLevel.H,
            background   : "#ffffff",
            foreground   : "#000000"
    }, options);

    var createCanvas  = function(){
      // create the qrcode itself
      var qrcode = new QRCode(options.typeNumber, options.correctLevel);
      qrcode.addData(options.text);
      qrcode.make();

      // create canvas element
      var canvas = document.createElement('canvas');
      canvas.width  = options.width;
      canvas.height  = options.height;
      var ctx   = canvas.getContext('2d');

      //在中间画logo
      if( options.src ) {
        options.imgWidth = options.imgWidth || options.width / 4.7;
        options.imgHeight = options.imgHeight || options.height / 4.7;
        var img = new Image();
        img.src = options.src;
        img.onload = function () {
          ctx.drawImage(img, (options.width - options.imgWidth) / 2, (options.height - options.imgHeight) / 2, options.imgWidth, options.imgHeight);
        }
      }
      // compute tileW/tileH based on options.width/options.height
      var tileW  = options.width / qrcode.getModuleCount();
      var tileH  = options.height / qrcode.getModuleCount();

      // draw in the canvas
      for( var row = 0; row < qrcode.getModuleCount(); row++ ){
        for( var col = 0; col < qrcode.getModuleCount(); col++ ){
          ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;
          var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));
          var h = (Math.ceil((row+1)*tileW) - Math.floor(row*tileW));
          ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h); 
        }  
      }
      // return just built canvas
      return canvas;
    };

    // from Jon-Carlos Rivera (https://github.com/imbcmdth)
    var createTable = function(){
      // create the qrcode itself
      var qrcode = new QRCode(options.typeNumber, options.correctLevel);
      qrcode.addData(options.text);
      qrcode.make();

      // create table element
      var $table  = $('<table></table>')
        .css("width", options.width+"px")
        .css("height", options.height+"px")
        .css("border", "0px")
        .css("border-collapse", "collapse")
        .css('background-color', options.background);

      // compute tileS percentage
      var tileW  = options.width / qrcode.getModuleCount();
      var tileH  = options.height / qrcode.getModuleCount();

      // draw in the table
      for(var row = 0; row < qrcode.getModuleCount(); row++ ){
        var $row = $('<tr></tr>').css('height', tileH+"px").appendTo($table);

        for(var col = 0; col < qrcode.getModuleCount(); col++ ){
          $('<td></td>')
            .css('width', tileW+"px")
            .css('background-color', qrcode.isDark(row, col) ? options.foreground : options.background)
            .appendTo($row);
        }  
      }

      //生成logo
      if( options.src ) {
        options.imgWidth = options.imgWidth || options.width / 4.7;
        options.imgHeight = options.imgHeight || options.height / 4.7;
        var $img = $('<img>').attr("src", options.src)
          .css("width", options.imgWidth)
          .css("height", options.imgHeight)
          .css("position", "absolute")
          .css("left", (options.width - options.imgWidth) / 2)
          .css("top", (options.height - options.imgHeight) / 2);
        $table = $('<div style="position:relative;"></div>')
          .append($table)
          .append($img);
      }

      // return just built canvas
      return $table;
    };


    return this.each(function(){
      var element = options.render == "canvas" ? createCanvas() : createTable();
      $(element).appendTo(this);
    });
  };
})( jQuery );

测试

jQuery('#qrcodeTable').qrcode({
  render : "table",
  text  : "中文://jetienne.com",
  src: './logo32.png'
});
jQuery('#qrcodeCanvas').qrcode({
  text  : "中午你://jetienne.com",
  src: './logo32.png'
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Archive Network 集合
May 12 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 #Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 #Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 #Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 #Javascript
使用Angular缓存父页面数据的方法
Jan 03 #Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 #Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 #Javascript
You might like
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
nodejs基础应用
2017/02/03 NodeJs
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
使用Python的内建模块collections的教程
2015/04/28 Python
详解Django配置优化方法
2019/11/18 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
幼儿园儿童节主持词
2014/03/21 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
酒会邀请函
2015/01/31 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
2016年学校招生广告语
2016/01/28 职场文书
人民调解协议书
2016/03/21 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js
新手初学Java网络编程
2021/07/07 Java/Android
vue中data里面的数据相互使用方式
2022/06/05 Vue.js