个人中心
gpt4 book ai didi

使用jquery.qrcode生成彩色二维码实例

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章使用jquery.qrcode生成彩色二维码实例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

jquery.qrcode.js 是居于jquery类库的绘制二维码的插件，用它来实现二维码图形渲染支持canvas和table两种绘图方式。（jquery.qrcode.js 设置显示方式为table时在webkit核心浏览器如chrome下会变形，这个需要注意。） 。

下面为测试代码（增加了颜色控制，可以设置4个区块的颜色值，需要指定render为table。），效果如下

使用jquery.qrcode生成彩色二维码实例

代码如下:

?
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
< html >
< head >
< title >JS生成二维码</ title >
< script type = "text/javascript" src = "jquery-1.4.2.min.js" ></ script >
< script type = "text/javascript" src = "jquery.qrcode.min.js" ></ script >
< style >
  #output{
  margin-left:300px;
  margin-top:100px;
  }
</ style >
</ head >
< body >
< div id = "output" ></ div >
< script >
  window.onload = function () {
  var trs = $('#output').qrcode({
   width: 100,
   height: 100,
   render: "canvas", //设置渲染方式 table canvas
   text: utf16to8("javascript生成二维码"),
   background: "#ffffff", //背景颜色
   foreground: "red" //前景颜色
  }).find('tr'), trLen = Math.floor(trs.size() / 2), tdLen = Math.floor(trs.eq(0).find('td').size() / 2), tds, bgColor;
  var colors = [['#ff0000', '#0100e2'], ['#00ed01', '#9f4d95']];
  trs.each(function (j) {
   tds = $(this).find('td');
   tds.each(function (i) {
   bgColor = this.style.backgroundColor;
   if (bgColor == 'red') {
    this.style.backgroundColor = colors[j < trLen ? 0 : 1][i < tdLen ? 0 : 1];
   }
   });
  });
  }
  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;
  }
</ script >
 
</ body >
</ html >

jquery-qrcode这个库是采用 charCodeAt这个方式进行编码转换的，而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。   解决方式：在二维码编码前把字符串转换成UTF-8，具体代码如上utf16to8函数 。

最后此篇关于使用jquery.qrcode生成彩色二维码实例的文章就讲到这里了,如果你想了解更多关于使用jquery.qrcode生成彩色二维码实例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 深渊地平线阿肯色怎么玩 战术思路及打法详解
文章推荐： php版微信自定义回复功能示例
文章推荐： 深渊地平线冬菊技能怎么触发 冬菊技能触发方法解析
文章推荐： 兼容最新firefox、chrome和IE的javascript图片预览实现代码
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com