常见问题当前位置:鸿宇娱乐 > 常见问题 > >

使用jquery组件qrcode生成二维码及应用指南

  

[jquery,qrcode,二维码]使用jquery组件qrcode生成二维码及应用指南

  

有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码。

  

  

qrcode其实是通过计算,然后使用jquery实现图形渲染和画图。支持canvas和table两种方式生成我们所需的二维码。

  

  

具体用法  
  qrcode是jquery组件,需要至少两个js, 就是 jquery 和 jquery.qrcode。可以到获取最新的代码。

  

  

代码如下:

  
  
  
  
  

  

在页面上,需要显示二维码的地方加入一个空元素(此处用div)  

  

代码如下:

  
  
  
  
  

  

在需要生成二维码的时候,调用一下语句直接生成。

  

  

代码如下:

  
  $("#qrcode").qcrode("");//需要生成的页面  
  
  

  

详细参数  

  

参数 默认值 说明  
  render canvas 渲染方式,支持canvas和table  
  width 无 宽度  
  height 无 高度  
  text 无 需要生成的url  
  
  如:  

  

代码如下:

  
  $("#qrcode").qcrode({  
  render: "table",  
  width: 200,  
  height: 200,  
  text: ""  
  });  
  
  

  

解决url中有中文方法  

  

我们试验的时候发现不能识别中文内容的二维码,通过查找多方资料了解到,jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码,如果有中文内容,在生成二维码前就要把字符串转换成UTF-8,然后再生成二维码。您可以通过以下函数来转换中文字符串:  

  

代码如下:

  
  function toUtf8(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;  
  }  
  
  

  

下载二维码  

  

用前端画出来的二维码,不是一个canvas就是一个table,如何下载呢?我们只需要将canvas的内容画到image上,下载下来即可。

  

  

代码如下:

  
  function download(canvasElem, filename, imageType) {  
  var event, saveLink, imageData, defalutImageType;  
  defalutImageType = 'png';//定义默认图片类型  
  imageData = canvasElem.toDataURL(imageType || defalutImageType);//将canvas元素转化为image data  
  saveLink = document.createElementNS('', 'a');  
  saveLink.href = imageData;  
  saveLink.download = filename;  
  event = document.createEvent('MouseEvents');  
  event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  
  saveLink.dispatchEvent(event);  
  };  
  
  

  

在angular中的简单封装  

  

在angular中使用,可以封装成directive。不过要确保已鸿宇娱乐经引入了之前的两个js文件。

  

  

代码如下:

  
  var appModule = angular.module('app', []);  
  appModule.directive('qrcode', function() {  
  return {  
  restrict: "A",  
  scope: {  
  text : '=',  
  options : '='  
  },  
  link: function(scope, elem, attrs) {  
  var $elem, options;  
  $elem = $(elem);  
  options = { //获取元素的宽度和高度  
  width: $elem.width(),  
  height: $elem.height()  
  };  
  angular.extend(options, scope.options);  
  scope.$watch('text', function(newText) {  
  if (newText) {  
  options.text = newText;  
  $(elem).qrcode(options);//重新生成二维码  
  }  
  });  
  };  
  };  
  });  
  
  

  

下载的方法在angular中可以封装成一个service使用。

  

  

小伙伴们会使用qrcode生成二维码了吧,确实很好用,希望大家能够喜欢。

  

(责任编辑:admin)

上一篇:App外包苹果电视AppPeriscope为你的周末疯狂做好准

下一篇:鸿宇娱乐:JQuery中属性过滤选择器用法实例分析

推荐内容

客户服务热线

010-400-12345

在线客服