资料搜索

选择star最多的两个

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

支持中文

  1. //qrcode.js
  2. function QR8bitByte(data) {
  3. this.mode = QRMode.MODE_8BIT_BYTE;
  4. this.data = data;
  5. }
  6.  
  7. QR8bitByte.prototype = {
  8.  
  9. getLength : function(buffer) {
  10. return this.data.length;
  11. },
  12.  
  13. write : function(buffer) {
  14. for (var i = 0; i < this.data.length; i++) {
  15. // not JIS ...
  16. buffer.put(this.data.charCodeAt(i), 8);
  17. }
  18. }
  19. };

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

  1. function QR8bitByte(data) {
  2. this.mode = QRMode.MODE_8BIT_BYTE;
  3. this.data = data;
  4. this.parsedData = [];
  5.  
  6. // Added to support UTF-8 Characters
  7. for (var i = 0, l = this.data.length; i < l; i++) {
  8. var byteArray = [];
  9. var code = this.data.charCodeAt(i);
  10.  
  11. if (code > 0x10000) {
  12. byteArray[0] = 0xF0 | ((code & 0x1C0000) >>> 18);
  13. byteArray[1] = 0x80 | ((code & 0x3F000) >>> 12);
  14. byteArray[2] = 0x80 | ((code & 0xFC0) >>> 6);
  15. byteArray[3] = 0x80 | (code & 0x3F);
  16. } else if (code > 0x800) {
  17. byteArray[0] = 0xE0 | ((code & 0xF000) >>> 12);
  18. byteArray[1] = 0x80 | ((code & 0xFC0) >>> 6);
  19. byteArray[2] = 0x80 | (code & 0x3F);
  20. } else if (code > 0x80) {
  21. byteArray[0] = 0xC0 | ((code & 0x7C0) >>> 6);
  22. byteArray[1] = 0x80 | (code & 0x3F);
  23. } else {
  24. byteArray[0] = code;
  25. }
  26.  
  27. this.parsedData.push(byteArray);
  28. }
  29.  
  30. this.parsedData = Array.prototype.concat.apply([], this.parsedData);
  31.  
  32. if (this.parsedData.length != this.data.length) {
  33. this.parsedData.unshift(191);
  34. this.parsedData.unshift(187);
  35. this.parsedData.unshift(239);
  36. }
  37. }
  38.  
  39. QR8bitByte.prototype = {
  40. getLength: function (buffer) {
  41. return this.parsedData.length;
  42. },
  43. write: function (buffer) {
  44. for (var i = 0, l = this.parsedData.length; i < l; i++) {
  45. buffer.put(this.parsedData[i], 8);
  46. }
  47. }
  48. };
  1.  

网上也提供的解决方案:

  1. //在传入文本处转码也可
  2. function utf16to8(str) {
  3. var out, i, len, c;
  4. out = "";
  5. len = str.length;
  6. for(i = 0; i < len; i++) {
  7. c = str.charCodeAt(i);
  8. if ((c >= 0x0001) && (c <= 0x007F)) {
  9. out += str.charAt(i);
  10. } else if (c > 0x07FF) {
  11. out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
  12. out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
  13. out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
  14. } else {
  15. out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
  16. out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
  17. }
  18. }
  19. return out;
  20. }

支持自定义logo

  • 修改jquery.qrcode.js,createCanvas函数
  1. var createCanvas = function(){
  2. // create the qrcode itself
  3. var qrcode = new QRCode(options.typeNumber, options.correctLevel);
  4. qrcode.addData(options.text);
  5. qrcode.make();
  6.  
  7. // create canvas element
  8. var canvas = document.createElement('canvas');
  9. canvas.width = options.width;
  10. canvas.height = options.height;
  11. var ctx = canvas.getContext('2d');
  12.  
  13. //增加以下代码,把图片画出来
  14. if( options.src ) {//传进来的图片地址
  15. //图片大小
  16. options.imgWidth = options.imgWidth || options.width / 4.7;
  17. options.imgHeight = options.imgHeight || options.height / 4.7;
  18. var img = new Image();
  19. img.src = options.src;
  20. //不放在onload里,图片出不来
  21. img.onload = function () {
  22. ctx.drawImage(img, (options.width - options.imgWidth) / 2, (options.height - options.imgHeight) / 2, options.imgWidth, options.imgHeight);
  23. }
  24. }
  25. // compute tileW/tileH based on options.width/options.height
  26. var tileW = options.width / qrcode.getModuleCount();
  27. var tileH = options.height / qrcode.getModuleCount();
  28.  
  29. // draw in the canvas
  30. for( var row = 0; row < qrcode.getModuleCount(); row++ ){
  31. for( var col = 0; col < qrcode.getModuleCount(); col++ ){
  32. ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;
  33. var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));
  34. var h = (Math.ceil((row+1)*tileW) - Math.floor(row*tileW));
  35. ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h);
  36. }
  37. }
  38. // return just built canvas
  39. return canvas;
  40. };
  • 修改jquery.qrcode.js,createTable函数(不支持canvas用table画二维码)
  1. var createTable = function(){
  2. // create the qrcode itself
  3. var qrcode = new QRCode(options.typeNumber, options.correctLevel);
  4. qrcode.addData(options.text);
  5. qrcode.make();
  6.  
  7. // create table element
  8. var $table = $('<table></table>')
  9. .css("width", options.width+"px")
  10. .css("height", options.height+"px")
  11. .css("border", "0px")
  12. .css("border-collapse", "collapse")
  13. .css('background-color', options.background);
  14.  
  15. // compute tileS percentage
  16. var tileW = options.width / qrcode.getModuleCount();
  17. var tileH = options.height / qrcode.getModuleCount();
  18.  
  19. // draw in the table
  20. for(var row = 0; row < qrcode.getModuleCount(); row++ ){
  21. var $row = $('<tr></tr>').css('height', tileH+"px").appendTo($table);
  22.  
  23. for(var col = 0; col < qrcode.getModuleCount(); col++ ){
  24. $('<td></td>')
  25. .css('width', tileW+"px")
  26. .css('background-color', qrcode.isDark(row, col) ? options.foreground : options.background)
  27. .appendTo($row);
  28. }
  29. }
  30.  
  31. //主要思想,把table,和img标签放在同一个div下,div relative定位,然后使得图片absolute定位在table中间
  32. if( options.src ) {
  33. options.imgWidth = options.imgWidth || options.width / 4.7;
  34. options.imgHeight = options.imgHeight || options.height / 4.7;
  35. var $img = $('<img>').attr("src", options.src)
  36. .css("width", options.imgWidth)
  37. .css("height", options.imgHeight)
  38. .css("position", "absolute")
  39. .css("left", (options.width - options.imgWidth) / 2)
  40. .css("top", (options.height - options.imgHeight) / 2);
  41. $table = $('<div style="position:relative;"></div>')
  42. .append($table)
  43. .append($img);
  44. }
  45.  
  46. // return just built canvas
  47. return $table;
  48. };
  • 对IE做特殊判断,大家懂的
  1. //判断是否IE, IE8以下,用 table,否则用 canvas
  2. var isIE = function() {
  3. var b = document.createElement('b');
  4. b.innerHTML = '<!--[if IE]><i></i><![endif]-->';
  5. return b.getElementsByTagName('i').length === 1;
  6. };
  7. options.render = options.render ||
  8. (isIE(6) || isIE(7) || isIE(8))? "table": "canvas";
  • 改过后的jquery.qrcode.js如下:
  1. (function( $ ){
  2. $.fn.qrcode = function(options) {
  3. // if options is string,
  4. if( typeof options === 'string' ){
  5. options = { text: options };
  6. }
  7.  
  8. //判断是否IE, IE8以下,用 table,否则用 canvas
  9. var isIE = function() {
  10. var b = document.createElement('b');
  11. b.innerHTML = '<!--[if IE]><i></i><![endif]-->';
  12. return b.getElementsByTagName('i').length === 1;
  13. };
  14. options.render = options.render ||
  15. (isIE(6) || isIE(7) || isIE(8))? "table": "canvas";
  16. // set default values
  17. // typeNumber < 1 for automatic calculation
  18. options = $.extend( {}, {
  19. // render : "canvas",
  20. width : 256,
  21. height : 256,
  22. typeNumber : -1,
  23. correctLevel : QRErrorCorrectLevel.H,
  24. background : "#ffffff",
  25. foreground : "#000000"
  26. }, options);
  27.  
  28. var createCanvas = function(){
  29. // create the qrcode itself
  30. var qrcode = new QRCode(options.typeNumber, options.correctLevel);
  31. qrcode.addData(options.text);
  32. qrcode.make();
  33.  
  34. // create canvas element
  35. var canvas = document.createElement('canvas');
  36. canvas.width = options.width;
  37. canvas.height = options.height;
  38. var ctx = canvas.getContext('2d');
  39.  
  40. //在中间画logo
  41. if( options.src ) {
  42. options.imgWidth = options.imgWidth || options.width / 4.7;
  43. options.imgHeight = options.imgHeight || options.height / 4.7;
  44. var img = new Image();
  45. img.src = options.src;
  46. img.onload = function () {
  47. ctx.drawImage(img, (options.width - options.imgWidth) / 2, (options.height - options.imgHeight) / 2, options.imgWidth, options.imgHeight);
  48. }
  49. }
  50. // compute tileW/tileH based on options.width/options.height
  51. var tileW = options.width / qrcode.getModuleCount();
  52. var tileH = options.height / qrcode.getModuleCount();
  53.  
  54. // draw in the canvas
  55. for( var row = 0; row < qrcode.getModuleCount(); row++ ){
  56. for( var col = 0; col < qrcode.getModuleCount(); col++ ){
  57. ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;
  58. var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));
  59. var h = (Math.ceil((row+1)*tileW) - Math.floor(row*tileW));
  60. ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h);
  61. }
  62. }
  63. // return just built canvas
  64. return canvas;
  65. };
  66.  
  67. // from Jon-Carlos Rivera (https://github.com/imbcmdth)
  68. var createTable = function(){
  69. // create the qrcode itself
  70. var qrcode = new QRCode(options.typeNumber, options.correctLevel);
  71. qrcode.addData(options.text);
  72. qrcode.make();
  73.  
  74. // create table element
  75. var $table = $('<table></table>')
  76. .css("width", options.width+"px")
  77. .css("height", options.height+"px")
  78. .css("border", "0px")
  79. .css("border-collapse", "collapse")
  80. .css('background-color', options.background);
  81.  
  82. // compute tileS percentage
  83. var tileW = options.width / qrcode.getModuleCount();
  84. var tileH = options.height / qrcode.getModuleCount();
  85.  
  86. // draw in the table
  87. for(var row = 0; row < qrcode.getModuleCount(); row++ ){
  88. var $row = $('<tr></tr>').css('height', tileH+"px").appendTo($table);
  89.  
  90. for(var col = 0; col < qrcode.getModuleCount(); col++ ){
  91. $('<td></td>')
  92. .css('width', tileW+"px")
  93. .css('background-color', qrcode.isDark(row, col) ? options.foreground : options.background)
  94. .appendTo($row);
  95. }
  96. }
  97.  
  98. //生成logo
  99. if( options.src ) {
  100. options.imgWidth = options.imgWidth || options.width / 4.7;
  101. options.imgHeight = options.imgHeight || options.height / 4.7;
  102. var $img = $('<img>').attr("src", options.src)
  103. .css("width", options.imgWidth)
  104. .css("height", options.imgHeight)
  105. .css("position", "absolute")
  106. .css("left", (options.width - options.imgWidth) / 2)
  107. .css("top", (options.height - options.imgHeight) / 2);
  108. $table = $('<div style="position:relative;"></div>')
  109. .append($table)
  110. .append($img);
  111. }
  112.  
  113. // return just built canvas
  114. return $table;
  115. };
  116.  
  117. return this.each(function(){
  118. var element = options.render == "canvas" ? createCanvas() : createTable();
  119. $(element).appendTo(this);
  120. });
  121. };
  122. })( jQuery );
  • 测试
  1. jQuery('#qrcodeTable').qrcode({
  2. render : "table",
  3. text : "中文://jetienne.com",
  4. src: './logo32.png'
  5. });
    jQuery('#qrcodeCanvas').qrcode({
  6. text : "中午你://jetienne.com",
  7. src: './logo32.png'
  8. });

javaScript生成二维码(支持中文,生成logo)的更多相关文章

  1. 使用jquery-qrcode在页面上生成二维码,支持中文

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. C#Qrcode生成二维码支持中文,带图片,带文字

    C#Qrcode生成二维码支持中文带图片的操作请看二楼的帖子,当然开始需要下载一下C#Qrcode的源码 下载地址 : http://www.codeproject.com/Articles/2057 ...

  3. C# Qrcode生成二维码支持中文,带图片,带文字 2015-01-22 15:11 616人阅读 评论(1) 收藏

    1.下载Qrcode库源码,下载地址:http://www.codeproject.com/Articles/20574/Open-Source-QRCode-Library 2.打开源码时,部分类库 ...

  4. Qrcode生成二维码支持中文,带图片,带文字

    1.下载Qrcode库源码, 下载地址:http://www.codeproject.com/Articles/20574/Open-Source-QRCode-Library2.打开源码时, 部分类 ...

  5. jquery.qrcode生成二维码支持中文

    基本使用方法: 1.首先在页面中加入jquery库文件和qrcode插件. <script type="text/javascript" src="jquery.j ...

  6. 使用jquery.qrcode生成二维码支持logo,和中文

    /* utf.js - UTF-8 <=> UTF-16 convertion * * Copyright (C) 1999 Masanao Izumo <iz@onicos.co. ...

  7. spring boot:用zxing生成二维码,支持logo(spring boot 2.3.2)

    一,zxing是什么? 1,zxing的用途 如果我们做二维码的生成和扫描,通常会用到zxing这个库, ZXing是一个开源的,用Java实现的多种格式的1D/2D条码图像处理库. zxing还可以 ...

  8. 使用PHP生成二维码支持自定义logo

    require_once 'phpqrcode/phpqrcode.php'; //引入类库 $text = "https://www.baidu.com/";//要生成二维码的文 ...

  9. jquery.qrcode.js生成二维码(前端生成二维码)

    官网地址:http://jeromeetienne.github.io/jquery-qrcode/ 第一步引入插件: <script type='text/javascript' src='h ...

  10. QRCode生成二维码,jq QRCode生成二维码,QRCode生成电子名片

    [QRCode官网]http://phpqrcode.sourceforge.net/ PHP QRCode生成二维码 官网下载QRCode源码包,引入源码包中的 qrlib.php . <?p ...

随机推荐

  1. B树——算法导论(25)

    B树 1. 简介 在之前我们学习了红黑树,今天再学习一种树--B树.它与红黑树有许多类似的地方,比如都是平衡搜索树,但它们在功能和结构上却有较大的差别. 从功能上看,B树是为磁盘或其他存储设备设计的, ...

  2. SQL Server-表表达式基础回顾(二十四)

    前言 从这一节开始我们开始进入表表达式章节的学习,Microsoft SQL Server支持4种类型的表表达式:派生表.公用表表达式(CTE).视图.内嵌表值函数(TVF).简短的内容,深入的理解, ...

  3. 【开源】.Net Aop(静态织入)框架 BSF.Aop

    BSF.Aop .Net 免费开源,静态Aop织入(直接修改IL中间语言)框架,类似PostSharp(收费): 实现前后Aop切面和INotifyPropertyChanged注入方式. 开源地址: ...

  4. .net erp(办公oa)开发平台架构概要说明之表单设计器

    背景:搭建一个适合公司erp业务的开发平台.   架构概要图: 表单设计开发部署示例图    表单设计开发部署示例说明1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,但是如 ...

  5. CSS 3学习——文本效果和@font-face

    文本效果 关于文本效果,这里仅仅记录得到大多数浏览器支持的几个属性,分别是: text-overflow text-shadow word-break word-wrap text-overflow ...

  6. 通过自定义特性,使用EF6拦截器完成创建人、创建时间、更新人、更新时间的统一赋值(使用数据库服务器时间赋值,接上一篇)

    目录: 前言 设计(完成扩展) 实现效果 扩展设计方案 扩展后代码结构 集思广益(问题) 前言: 在上一篇文章我写了如何重建IDbCommandTreeInterceptor来实现创建人.创建时间.更 ...

  7. Activity之概览屏幕(Overview Screen)

    概览屏幕 概览屏幕(也称为最新动态屏幕.最近任务列表或最近使用的应用)是一个系统级别 UI,其中列出了最近访问过的 Activity 和任务. 用户可以浏览该列表并选择要恢复的任务,也可以通过滑动清除 ...

  8. Android程序中--不能改变的事情

    有时,开发人员会对应用程序进行更改,当安装为以前版本的更新时出现令人惊讶的结果 - 快捷方式断开,小部件消失或甚至根本无法安装. 应用程序的某些部分在发布后是不可变的,您可以通过理解它们来避免意外. ...

  9. U盘安装Kali 出现cd-rom无法挂载 已解决

    用U盘安装Kali Linux的过程中,出现cd-rom无法挂载的现象,百度坑比啊,醉了.下面亲测成功 出现无法挂载后,选择执行shell 第一步:df -m此时会看到挂载信息,最下面的是/dev/* ...

  10. [css]实现垂直居中水平居中的几种方式

    转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...