欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

使用jquery.qrcode.min.js实现中文转化二维码_jquery

程序员文章站 2022-03-08 22:10:46
...
今天还是要讲一下关于二维码的知识,前几篇讲解中有讲到我使用的可以生成二维码的js是qrcode.js,然后结合Cordovad的插件$cordovaBarcodeScanner插件可以扫描二维码,这样就基本完成了简单的扫一扫功能。后来在项目进行,开始要调用后台数据和传参数到接口的时候发现qrcode.js它只能解析英文或者数字,并且只能解析一个字符串!

而我所需要的是将一个对象转化成二维码,然后在扫描的时候取出对象中的数据,显然qrcode.js不能实现,经过查找,找到另一个jquery.qrcode.min.js(支持中文转化二维码).

下面让我来介绍一下具体的步骤和代码实现吧!

一、这是我找到的jquery.qrcode.min.js(支持中文转化二维码)代码,需要引入到你的项目里去:

/**
 * Created by ncloud on 16/3/8.
 */
//jquery.qrcode.min.js
(function (r) {
 r.fn.qrcode = function (h) {
  var s; function u(a) { this.mode = s; this.data = a } function o(a, c) { this.typeNumber = a; this.errorCorrectLevel = c; this.modules = null; this.moduleCount = 0; this.dataCache = null; this.dataList = [] } function q(a, c) { if (void 0 == a.length) throw Error(a.length + "/" + c); for (var d = 0; d  a || this.moduleCount  c || this.moduleCount  this.typeNumber) {
    for (var a = 1, a = 1; 40 > a; a++) {
     for (var c = p.getRSBlocks(a, this.errorCorrectLevel), d = new t, b = 0, e = 0; e = d; d++) if (!(-1 >= a + d || this.moduleCount = b; b++)-1 >= c + b || this.moduleCount = d && (0 == b || 6 == b) || 0 = b && (0 == d || 6 == d) || 2 = d && 2 = b ? !0 : !1)
  }, getBestMaskPattern: function () { for (var a = 0, c = 0, d = 0; 8 > d; d++) { this.makeImpl(!0, d); var b = j.getLostPoint(this); if (0 == d || a > b) a = b, c = d } return c }, createMovieClip: function (a, c, d) { a = a.createEmptyMovieClip(c, d); this.make(); for (c = 0; c = f; f++) for (var i = -2; 2 >= i; i++) this.modules[b + f][e + i] = -2 == f || 2 == f || -2 == i || 2 == i || 0 == f && 0 == i ? !0 : !1 } }, setupTypeNumber: function (a) {
    for (var c =
     j.getBCHTypeNumber(this.typeNumber), d = 0; 18 > d; d++) { var b = !a && 1 == (c >> d & 1); this.modules[Math.floor(d / 3)][d % 3 + this.moduleCount - 8 - 3] = b } for (d = 0; 18 > d; d++) b = !a && 1 == (c >> d & 1), this.modules[d % 3 + this.moduleCount - 8 - 3][Math.floor(d / 3)] = b
   }, setupTypeInfo: function (a, c) {
    for (var d = j.getBCHTypeInfo(this.errorCorrectLevel  b; b++) { var e = !a && 1 == (d >> b & 1); 6 > b ? this.modules[b][8] = e : 8 > b ? this.modules[b + 1][8] = e : this.modules[this.moduleCount - 15 + b][8] = e } for (b = 0; 15 > b; b++) e = !a && 1 == (d >> b & 1), 8 > b ? this.modules[8][this.moduleCount -
    b - 1] = e : 9 > b ? this.modules[8][15 - b - 1 + 1] = e : this.modules[8][15 - b - 1] = e; this.modules[this.moduleCount - 8][8] = !a
   }, mapData: function (a, c) { for (var d = -1, b = this.moduleCount - 1, e = 7, f = 0, i = this.moduleCount - 1; 0  g; g++) if (null == this.modules[b][i - g]) { var n = !1; f >> e & 1)); j.getMask(c, b, i - g) && (n = !n); this.modules[b][i - g] = n; e--; -1 == e && (f++, e = 7) } b += d; if (0 > b || this.moduleCount  8 * a) throw Error("code length overflow. (" + b.getLengthInBits() + ">" + 8 * a + ")"); for (b.getLengthInBits() + 4 = 8 * a); ) { b.put(o.PAD0, 8); if (b.getLengthInBits() >= 8 * a) break; b.put(o.PAD1, 8) } return o.createBytes(b, c)
  }; o.createBytes = function (a, c) {
   for (var d =
    0, b = 0, e = 0, f = Array(c.length), i = Array(c.length), g = 0; g >>= 1; return c }, getPatternPosition: function (a) { return j.PATTERN_POSITION_TABLE[a - 1] }, getMask: function (a, c, d) {
   switch (a) {
    case 0: return 0 == (c + d) % 2; case 1: return 0 == c % 2; case 2: return 0 == d % 3; case 3: return 0 == (c + d) % 3; case 4: return 0 == (Math.floor(c / 2) + Math.floor(d / 3)) % 2; case 5: return 0 == c * d % 2 + c * d % 3; case 6: return 0 == (c * d % 2 + c * d % 3) % 2; case 7: return 0 == (c * d % 3 + (c + d) % 2) % 2; default: throw Error("bad maskPattern:" +
    a);
   }
  }, getErrorCorrectPolynomial: function (a) { for (var c = new q([1], 0), d = 0; d  c) switch (a) { case 1: return 10; case 2: return 9; case s: return 8; case 8: return 8; default: throw Error("mode:" + a); } else if (27 > c) switch (a) { case 1: return 12; case 2: return 11; case s: return 16; case 8: return 10; default: throw Error("mode:" + a); } else if (41 > c) switch (a) {
    case 1: return 14; case 2: return 13; case s: return 16; case 8: return 12; default: throw Error("mode:" +
     a);
   } else throw Error("type:" + c);
  }, getLostPoint: function (a) {
   for (var c = a.getModuleCount(), d = 0, b = 0; b = g; g++) if (!(0 > b + g || c = h; h++) 0 > e + h || c  a) throw Error("glog(" + a + ")"); return l.LOG_TABLE[a] }, gexp: function (a) { for (; 0 > a; ) a += 255; for (; 256  m; m++) l.EXP_TABLE[m] = 1  m; m++) l.EXP_TABLE[m] = l.EXP_TABLE[m - 4] ^ l.EXP_TABLE[m - 5] ^ l.EXP_TABLE[m - 6] ^ l.EXP_TABLE[m - 8]; for (m = 0; 255 > m; m++) l.LOG_TABLE[l.EXP_TABLE[m]] = m; q.prototype = { get: function (a) { return this.num[a] }, getLength: function () { return this.num.length }, multiply: function (a) { for (var c = Array(this.getLength() + a.getLength() - 1), d = 0; d 
    this.getLength() - a.getLength()) return this; for (var c = l.glog(this.get(0)) - l.glog(a.get(0)), d = Array(this.getLength()), b = 0; b >> 7 - a % 8 & 1) }, put: function (a, c) { for (var d = 0; d >> c - d - 1 & 1)) }, getLengthInBits: function () { return this.length }, putBit: function (a) { var c = Math.floor(this.length / 8); this.buffer.length >> this.length % 8); this.length++ } }; "string" === typeof h && (h = { text: h }); h = r.extend({}, { render: "canvas", width: 256, height: 256, typeNumber: -1,
   correctLevel: 2, background: "#ffffff", foreground: "#000000"
  }, h); return this.each(function () {
   var a; if ("canvas" == h.render) {
    a = new o(h.typeNumber, h.correctLevel); a.addData(h.text); a.make(); var c = document.createElement("canvas"); c.width = h.width; c.height = h.height; for (var d = c.getContext("2d"), b = h.width / a.getModuleCount(), e = h.height / a.getModuleCount(), f = 0; f ").css("width", h.width + "px").css("height", h.height + "px").css("border", "0px").css("border-collapse", "collapse").css("background-color", h.background); d = h.width / a.getModuleCount(); b = h.height / a.getModuleCount(); for (e = 0; e ").css("height", b + "px").appendTo(c); for (i = 0; i ").css("width",
      d + "px").css("background-color", a.isDark(e, i) ? h.foreground : h.background).appendTo(f)
    }
   } a = c; jQuery(a).appendTo(this)
  })
 }
})(jQuery);

二、HTML代码,与之前的不同,修改了一些代码:

(二维码)

三、JS代码,这里需要将信息转化一下utf16转化为utf8格式,才能实现转化为二维码,我是将一个对象转化的:

function utf16to8(str) {
 var out, i, len, c;
 out = "";
 len = str.length;
 for (i = 0; i = 0x0001) && (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;
}
//{name: currentUser.UserName, id: currentUser.Id}这个是我需要转化的对象,也是我在扫描二维码的时候需要解析出来的内容
$(function () {
 jQuery('#Qrcode').qrcode(utf16to8(angular.toJson({name: currentUser.UserName, id: currentUser.Id})))
});

至于怎么将二维码保存到手机,我之前的文章中有讲到的,如果想实现的话可以参考一下~

好了,具体实现的步骤就是这样了,大家可以提意见或者参考一下!