H5案例分享:jquery.qrcode.js生成简易二维码
来源:互联网 发布:2016淘宝双11知识问答 编辑:程序博客网 时间:2024/05/05 18:23
近期做项目需要生成二维码,并且解码获取信息,jquery.qrcode.js生成二维码比较的方便,写个教程分享给大家。欢迎大家测试留言,我会改进代码。
现在二维码越来越流行啦,支付扫二维码,关注扫二维码,抽奖扫二维码......,总之,二维码无处不在,那怎么制作一个二维码呢?我们今天就此问题一起来讨论一下
一、什么是二维码
首先我们来了解一下,什么是二维码?百度百科上是这样解释的:二维条码/二维码(2-dimensional bar code)是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的;在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念,使用若干个与二进制相对应的几何形体来表示文字数值信息,通过图象输入设备或光电扫描设备自动识读以实现信息自动处理:它具有条码技术的一些共性:每种码制有其特定的字符集;每个字符占有一定的宽度;具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。
二、具体实现
那怎么来实现制作出一个二维码呢?有很多小伙伴是在服务器端生成二维码,作为前端控,小五今天就和大家磨叨一下怎么在前端生成二维码。其实小五还是走了捷径,采用了一个二维码插件jquery-qrcode,可以从https://github.com/jeromeetienne/jquery-qrcode 获取,这是一个免费开源的插件。qrcode.js 是实现二维码数据计算的核心类,jquery.qrcode.js 是把它用jquery方式封装起来的,用它来实现图形渲染,其实就是画图(支持canvas和table两种方式)
1、支持的功能主要有:
text : " http://www.h5-share.com/ " //设置二维码内容 render : "canvas",//设置渲染方式 (有两种方式 table和canvas,默认是canvas) width : 256, //设置宽度 height : 256, //设置高度 typeNumber : -1, //计算模式 correctLevel : 0,//纠错等级 background : "#ffffff",//背景颜色 foreground : "#000000" //前景颜色
2、使用方式非常简单
需要引入jQuery 和 jquery.qrcode.js
①$('#qr_container').qrcode({render:"table",height:180,width:180,correctLevel:0,text:$('#qr_text').val()});
②$('#qr_container').qrcode({render:"canvas",height:180,width:180,correctLevel:0,text:$('#qr_text').val()});
当你分别执行了上面的例子,就可以看到,二维码使用canvas画出来,在网页上输出一个canvas节点。但是用到table的话,我们会发现二维码实际是使用table表格把每一个二维码的点画出来,这就导致网页上的Dom元素会特别多。
选择canvas,ie8一下的浏览器就没办法支持。选择table吧,一切看起来都很美好。但在实际使用的过程中,当二维码的内容较多时,二维码的尺寸较小时(比如120px * 120 px),用table来渲染,会发现生成的二维码很难识别。
作为移动端开发者,现代的智能机基本上都支持canvas,那我们就用canvas吧,但是新的问题又来了,就是jquery.qrcode.js默认不支持中文。
这跟js的机制有关系,jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的,而这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式,英文是没有问题,如果是中文,一般情况下Unicode是UTF-16实现,长度2位,而UTF-8编码是3位,这样二维码的编解码就不匹配了。
解决方式当然是,在二维码编码前把字符串转换成UTF-8,具体代码如下:
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; }
现在中文生成二维码解决了,但是!!!你生成的二维码在canvas里,怎么保存在本地呢?很简单,把canvas里的信息转换成img图片就行了。
// 从canvas提取图片image function convertCanvasToImage(canvas){ //新Image对象,可以理解为DOM; var image = new Image(); //canvas.toDataURL返回的是一串Base64编码的URL image.src = canvas.toDataURL("image/png"); return image;}
三、完整示例:
html:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>生成二维码</title>//引入库文件<script src="js/jquery-2.1.4.min.js"></script><script src="js/jquery.qrcode.min.js"></script></head><body><h1>jquery.qrcode.js生成简易二维码</h1><div> <label for="qr_text">URL:</label> <input id="qr_text" type="text" value="http://www.h5-share.com/" style="width:200px;" /> <button id="qr_btn" value="button">button</button> <br /></div><div id="qr_container" style="margin:auto; position:relative;"></div><div id="imgDiv"></div><script>$(document).ready(function(){ // 点击生成二维码 $('#qr_btn').click(function(){ /*如果已生成过二维码,则删除二维码img图片和canvas,重新生成;反之,则直接生成二维码*/ if($('#imgDiv:has(img)').length!=0){ $('#imgDiv img').remove(); $('canvas').remove(); createQr(); }else{ createQr(); } }); // 生成二维码 function createQr(){ document.createElement('canvas').getContext('2d'); var valText = $('#qr_text').val(); // 采用正则表达式判断输入的内容是否是中文 var reg=/^[\u0391-\uFFE5]+$/; if(valText!=""&&!reg.test(valText)){ // 如果不是中文,直接将输入的内容转换成二维码 $('#qr_container').qrcode({render:"canvas",height:180, width:180,correctLevel:0,text:valText}); }else{ // 如果是中文,直接将输入的内容字符串转换成UTF-8,然后再转换成二维码 $('#qr_container').qrcode({render:"canvas",height:180, width:180,correctLevel:0,text:utf16to8(valText)}); } //获取网页中的canvas对象 var mycanvas1=document.getElementsByTagName('canvas')[0]; //将转换后的img标签插入到html中 var img = convertCanvasToImage(mycanvas1); $('#imgDiv').append(img);//imgDiv表示你要插入的容器id } // 字符编码 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; } //从canvas中提取图片image function convertCanvasToImage(canvas) { //新Image对象,可以理解为DOM var image = new Image(); // canvas.toDataURL 返回的是一串Base64编码的URL // 指定格式PNG image.src = canvas.toDataURL("image/png"); return image; }});</script></body></html>参考教程:http://www.h5-share.com/articles/201701/createqr.html
想体验更多二维码生成案例教程,赶快拿起手机扫描下面的微信二维码吧。关注回复教程,领取前端学习视频。
好了,写到这里,也该睡觉去了,本人也会在近期将js生成二维码,解码源码进行开源,大家可以关注我的github哦,求粉求粉求粉,重要的说三遍!!!
https://github.com/laizige 点击链接关注我吧。
- H5案例分享:jquery.qrcode.js生成简易二维码
- H5 生成QRCode 二维码
- 生成二维码jQuery 插件jquery.qrcode.js
- jQuery.qrCode.js实现二维码生成
- 如何使用 jQuery.qrcode.js 生成二维码
- 使用 jquery.qrcode.js生成二维码
- jquery.qrcode.min.js生成二维码插件
- 使用jquery.qrcode.js生成二维码
- 使用jquery.qrcode.js 生成二维码
- 使用jquery.qrcode.js生成二维码
- jquery.qrcode.js 动态生成二维码插件
- JS生成二维码 jquery.qrcode 插件
- jquery.qrcode生成二维码
- jquery.qrcode生成二维码
- jquery-qrcode生成二维码
- jquery.qrcode 生成二维码
- jquery-QRCode生成二维码
- jQuery.qrcode生成二维码
- 【PAT】1052. 卖个萌 (20)
- Spring mvc Interceptor 解决Session超时配置流程
- Java-Alarm
- Linux目录-常用增删改查命令
- 音视频数据处理(4)---- RGB、YUV像素数据处理代码实现
- H5案例分享:jquery.qrcode.js生成简易二维码
- linux centos关机与重启命令详解
- 完整java开发中JDBC连接数据库代码和步骤
- 音视频数据处理(6)--- PCM音频采样数据处理代码实现
- IOS开源项目--新浪微博
- 8. String to Integer (atoi)
- 音视频数据处理(21)--- H.264视频码流解析代码实现
- SpringMVC-异常处理
- 简洁小按钮样式