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

最新推荐文章于 2024-09-14 16:29:27 发布
最新推荐文章于 2024-09-14 16:29:27 发布
阅读量1.2k 收藏
点赞数

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

支持中文

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//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);
     }
   }
};

修改如下（就是复制粘贴了第二份代码的头部）：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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);
     }
   }
};

 网上也提供的解决方案：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//在传入文本处转码也可
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函数

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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画二维码）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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做特殊判断，大家懂的

?
1
2
3
4
5
6
7
8
//判断是否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如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
( 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 );

测试

?
1
2
3
4
5
6
7
8
9
jQuery( '#qrcodeTable' ).qrcode({
   render : "table" ,
   text  : "中文://jetienne.com" ,
   src: './logo32.png'
});
jQuery( '#qrcodeCanvas' ).qrcode({
   text  : "中午你://jetienne.com" ,
   src: './logo32.png'
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

qmdweb
关注
js jquery.qrcode生成二维码 带logo 支持中文
04-28
js jquery.qrcode生成二维码 带logo 支持中文 详细介绍：http://happyqing.iteye.com/blog/2294628
jquery.qrcode.js生成带logo的二维码
03-15
jquery.qrcode.js生成二维码插件&转成图片格式 var qrcode =$('#code').qrcode({   render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好           text : url,    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接           width : "200",            // //二维码的宽度           height : "200",              //二维码的高度           background : "#ffffff",       //二维码的后景色           foreground : "#000000",        //二维码的前景色           src: '/favicon.png',//二维码中间的图片 }).hide(); var canvas=qrcode.find('canvas').get(0); $('#imgOne').attr('src',canvas.toDataURL('image/jpg'));
实现JavaScript中文二维码生成的完整指南
最新发布
weixin_28999139的博客
09-14 1380
本文还有配套的精品资源，点击获取 简介：二维码作为广泛使用的编码技术，在移动互联网中应用广泛。在JavaScript中实现支持中文字符的二维码生成是前端开发的一个实用功能。本文将介绍如何在JavaScript中创建支持中文的二维码，包括理解二维码原理、选择合适的库、处理中文字符编码等技术细节，并提供实际操作步骤和示例代码。 1. 二维码基本原理与应用 1.1...
jquery.qrcode.js
04-24
这个是改过的jquery.qrcode.js，添加了中间生成Logo的功能， $('#code').qrcode({ text : "hello world", //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接 width : "200", // //二维码的宽度 height : "200", //二维码的高度 background : "#ffffff", //二维码的后景色 foreground : "#000000", //二维码的前景色 src : 'head.jpg' //二维码中间的图片 }); src填写路径即可
（转）js jquery.qrcode生成二维码 带logo 支持中文
weixin_33682719的博客
10-12 170
场景：公司最最近在开发二维码支付业务，所以需要做一个html5中的二维码生成和部署！ 前天用js生成二维码，节省服务器资源及带宽 原版jquery.qrcode不能生成logo，本文采用的是修改版   1 显示效果 2 页面 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;生成带有logo的二维码&...
js生成二维码jquery.qrcode.js
03-12
"js生成二维码jquery.qrcode.js" 是一个基于JavaScript和jQuery的库，用于在网页上动态生成二维码。这个功能在移动互联网应用、网站链接分享、电子票务等领域有广泛的应用。 首先，我们要理解JavaScript（简称JS）...
前端生产二维码jquery.qrcode.min.js下载
03-25
本文将详细介绍使用jQuery插件`jquery.qrcode.min.js`在前端生成二维码的相关知识点。 首先，`jquery.qrcode.min.js`是一个轻量级的jQuery插件，专门用于在网页中生成二维码。它简化了生成二维码的过程，使得开发者...
动态生成二维码插件 jquery.qrcode.js
weixin_30782293的博客
12-05 144
前段时间做项目，需要动态生成一个二维码，于是就在网上找了一下发现一个jquery插件jquery.qrcode.js，所以今天就简单说一下这个插件的使用： jquery.qrcode.js是依赖jquery的,所以要先引入jquery再引入jquery.qrcode.js <script type='text/javascript' src='js/jquery.min.js'...
JS qrcode 带logo 支持中文deme
09-07
JS qrcode 带logo 支持中文demo,还是不错的一个小demo方便实用。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。100个字真的好多啊
jquery.qrcode生成带logo和文本的二维码，并生成图片
星星点灯的博客
08-15 425
jquery.qrcode 生成带logo和文本的二维码，并生成图片
JS生成QRCode二维码带Logo.zip
07-06
使用jquery.qrcode.min.js，生成中间带有Logo的二维码
JavaScript生成带logo的二维码
11-13
JavaScript生成带logo图标的二维码，内附js文件，下载即可使用。祝各位前程似锦，升职加薪
jquery.qrcode.js（qrcode生成二维码插件）
05-23
官网下载的qrcode.js不支持在二维码中携带logo,也不支持中文 jquery.qrcode.js可以
js生成二维码附带logo
HuangHe201691的博客
08-12 763
我这里用的是qrcode.js 1，首先页面引入js 2，页面准备载体 class='none' 这里需要隐藏此图片 3，具体生成方法 text中的内容是跳转路径。width，height等根据具体场景自行定义。
JS生成带logo的二维码
chouwuqi4969的博客
03-25 354
开门见上，先看效果： 源代码： <!DOCTYPEHTML> <html> <head> <title>生成带有logo的二维码</title> <metahttp-equiv="Content-Type"co...
js生成带logo的二维码
weixin_30628077的博客
09-07 487
作为一名java程序员，一直以来都是使用服务端生成二维码，最近接触前端的设计，感觉二维码这块如果放到前端去生成，一方面可以减轻服务端的压力，访问带宽，另一方面，前端页面控制比较顺畅 闲话少叙，说下我的思路，先使用jquery.qrcode.js生成一个二维码（关于中文问题接下来讨论），由于此插件本身不支持带自定义logo的，所以差强人意吧，但是已经为我们省去不少工作，接下来的工作我们自己搞 简...
改造jQuery.qrcode.js实现中文带logo二维码
本文主要介绍了如何利用JavaScript生成支持中文并带有logo的二维码，特别关注了如何对jquery.qrcode.js库进行改造，以实现这一功能。jQuery.qrcode.js最初并不支持中文字符，也不具备添加logo的能力，这对于需要处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值