有一些耗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").qrcode("http://www.cnblogs.com/CraryPrimitiveMan/");//需要生成的页面

详细参数

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

如:

$("#qrcode").qrcode({
render: "table",
width: 200,
height: 200,
text: "http://www.cnblogs.com/CraryPrimitiveMan/"
});

解决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://ifxoxo.com/jquery-qrcode.html

JavaScript的学习--生成二维码的更多相关文章

  1. Javascript生成二维码(QR)

    网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...

  2. 使用JavaScript生成二维码教程-附qrcodejs中文文档

    使用javascript生成二维码 依赖jquery 需要使用到的库 https://github.com/davidshimjs/qrcodejs DIV <div id="qrco ...

  3. QRCode.js:使用 JavaScript 生成二维码

    什么是 QRCode.js? QRCode.js 是一个用于生成二维码的 JavaScript 库.主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库. 基本用法 ...

  4. JavaScript生成二维码图片

    1.引入一个二维码工具的js文件,同时需要引入jquery文件 下面是jquery.qrcode.min.js文件内容: (function(r){r.fn.qrcode=function(h){va ...

  5. MVC3学习:利用jquery+ajax生成二维码(支持中文)

    二维码越来越热火了,做电子商务网站,不做二维码,你就OUT了. 一.下载DLL文件(ThoughtWorks.QRCode.dll),并在项目中引用.点此下载 如果你还不知道什么是QRCode二维码, ...

  6. 前端生成二维码 - Javascript生成二维码(QR)

    前段时间项目中需要动态的生成二维码,经过评估,前后端生成都可以.但后端生成会有两个问题: 没有找到正规发布出来的后端开源库. 二维码图片,会随着商品的增加而不断变多. 基于以上两个问题,决定在前端生成 ...

  7. QrCode C#生成二维码 及JavaScript生成二维码

    一 C#的二维码    示例: class Program { static void Main(string[] args) { QrEncoder qrEncoder = new QrEncode ...

  8. QRCode.js一个生成二维码的javascript库

    前言 最近在开发中遇到一个需求:将后端返回的链接转换成二维码,那么如何来实现呢?我们可以使用QRCode.js来解决这一问题 什么是 QRCode.js? QRCode.js 是一个用于生成二维码的 ...

  9. java学习-zxing生成二维码矩阵的简单例子

    这个例子需要使用google的开源项目zxing的核心jar包 core-3.2.0.jar 可以百度搜索下载jar文件,也可使用maven添加依赖 <dependency> <gr ...

随机推荐

  1. MPI之求和

    // MPI1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include "mpi.h" #include &l ...

  2. 插入排序-java

    排序-插入排序 基本思想:将待排序表看作左右两部分,其中左边为有序区,右边为无序区, 整个排序过程就是将右边无序区中的元素逐个插入到左边的有序区中,以构成新的有序区. 平均时间:O(n2) 最好情况: ...

  3. velocity导出word报错解决

  4. Java解析网段下包含的所有IP地址

    import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;impor ...

  5. 《利用Python进行数据分析》第7章学习笔记

    数据规整化:清理.转换.合并.重塑 合并数据集 pandas.merge pandas.concat combine_first 数据库风格的DataFrame合并 索引上的合并 join()实例方法 ...

  6. s:textarea中的文本内容在什么时候才能被赋值给Action中的属性?

    下面是jsp程序片段: <s:form id="startForm" name ="startForm" action="/hall/hall_ ...

  7. DWZ错误的解决:0x800a13af - Microsoft JScript 运行时错误: 重新声明常量“document”

    在写完Login后,需要跳转到Index中,就是DWZ的主界面,结果出现如下问题: 0x800a13af - Microsoft JScript 运行时错误: 重新声明常量“document” 费了很 ...

  8. log4net按时间日期,文件大小和个数生成日志文件

    从启动模板生成的基于ABP的应用默认使用的log4net日志框架,当然你也可以使用其他的日志框架. ABP默认的log4net.config配置文件配置的很简单,将所有的日志都写到了一个txt文件中, ...

  9. Win10 UWP开发中的重复性静态UI绘制小技巧 1

    介绍 在Windows 10 UWP界面实现的过程中,有时会遇到一些重复性的.静态的界面设计.比如:画许多等距的线条,画一圈时钟型的刻度线,同特别的策略排布元素,等等. 读者可能觉得这些需求十分简单, ...

  10. Java设计模式1:设计模式概论

    设计模式是什么 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易地被他人理解.保证代码可靠性.毫无 ...