这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了使用 jquery 组件 qrcode 生成二维码及应用指南, 非常全面实用,需要的朋友可以参考下
有一些耗 cpu 的计算,完全可以在客户端上计算,比如生成二维码。
qrcode 其实是通过计算,然后使用 jquery 实现图形渲染和画图。支持 canvas 和 table 两种方式生成我们所需的二维码。
具体用法
qrcode 是 jquery 组件,需要至少两个 js, 就是 jquery 和 jquery.qrcode。可以到 https://github.com/jeromeetienne/jquery-qrcode 获取最新的代码。
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="jquery.qrcode.min.js"></script>
在页面上,需要显示二维码的地方加入一个空元素(此处用 div)
- <div id="qrcode"></div>
在需要生成二维码的时候,调用一下语句直接生成。
- $("#qrcode").qcrode("http://www.phperz.com");//需要生成的页面
详细参数
参数 默认值 说明
render canvas 渲染方式,支持 canvas 和 table
width 无 宽度
height 无 高度
text 无 需要生成的 url
如:
- $("#qrcode").qcrode({
- render: "table",
- width: 200,
- height: 200,
- text: "http://www.phperz.com"
- });
解决 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('http://www.w3.org/1999/xhtml', '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 使用。
来源: http://www.phperz.com/article/17/0703/272698.html