菜鸟先飞之二维码jquery-qrcode插件生成

来源：互联网发布：conoha 网络编辑：程序博客网时间：2024/06/05 11:09

二维码的概述

二维码又称QR Code，QR全称Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。

二维码的生成工具

java生成二维码常用的有jquery的jquery-qrcode插件、qrcode和zxing，单单对于生成二维码来说，还是jquery-qrcode插件生成来得方便。一个静态的页面就可以搞定。废话不多说一个小demo就知道生成二维码原来这么简单。

准备工作

首先去GitHub上下载所需要的js文件，找到发行版本下载。

地址是：https://github.com/jeromeetienne/jquery-qrcode

下载完之后我们需要用到的就是jquery.qrcode.min.js，这个插件是依赖于jquery的，所以小伙伴们需要自己准备jquery.min.代码js

上代码

首先引入js文件，这里要注意的是jquery-qrcode依赖jquery,所以jquery要在前面。

<!-- js文件的引入 --><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

然后在body添加一个div作为渲染区域

生成默认格式的二维码：<br/><!-- 定义的渲染区域 --><div id="qrcode"></div>

最后通过下面的代码生成想要的二维码

jQuery('#qrcode').qrcode("http://blog.csdn.net/happy_cloudlife/");

想要改变它的大小、二维码颜色、背景色怎么办？

jQuery("#qrcode1").qrcode({    render: "canvas", // 渲染方式有table方式和canvas方式    width: 256,   //默认宽度    height: 256, //默认高度    text: "http://blog.csdn.net/happy_cloudlife/", //二维码内容    typeNumber: -1,   //计算模式一般默认为-1    correctLevel: 2, //二维码纠错级别    background: "#ffffff",  //背景颜色    foreground: "#800080"  //二维码颜色});

默认是不支持中文的怎么办？没事这有解决方案，在给内容的时候进行一下转码。转换的代码：

jQuery("#qrcode2").qrcode({    render: "canvas", // 渲染方式有table方式和canvas方式    width: 256,   //默认宽度    height: 256, //默认高度    text: utf16to8("真棒！"), //二维码内容    typeNumber: -1,   //计算模式一般默认为-1    correctLevel: 2, //二维码纠错级别    background: "#ffffff",  //背景颜色    foreground: "#1E90FF"  //二维码颜色});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;  }

下面是完整的页面代码：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><!-- js文件的引入 --><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.qrcode.min.js"></script></head><body>生成默认格式的二维码：<br/><!-- 定义的渲染区域 --><div id="qrcode"></div>生成自定义格式的二维码：<br/><!-- 定义的渲染区域 --><div id="qrcode1"></div>生成自定义格式内容包含中文的二维码：<br/><!-- 定义的渲染区域 --><div id="qrcode2"></div><!-- 生成自己想要的二维码 --><script type="text/javascript">jQuery('#qrcode').qrcode("http://blog.csdn.net/happy_cloudlife/");jQuery("#qrcode1").qrcode({    render: "canvas", // 渲染方式有table方式和canvas方式    width: 256,   //默认宽度    height: 256, //默认高度    text: "http://blog.csdn.net/happy_cloudlife/", //二维码内容    typeNumber: -1,   //计算模式一般默认为-1    correctLevel: 2, //二维码纠错级别    background: "#ffffff",  //背景颜色    foreground: "#800080"  //二维码颜色});jQuery("#qrcode2").qrcode({    render: "canvas", // 渲染方式有table方式和canvas方式    width: 256,   //默认宽度    height: 256, //默认高度    text: utf16to8("真棒！"), //二维码内容    typeNumber: -1,   //计算模式一般默认为-1    correctLevel: 2, //二维码纠错级别    background: "#ffffff",  //背景颜色    foreground: "#1E90FF"  //二维码颜色});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;  }</script></body></html>

效果如下图：

总结

利用js生成的二维码很是方便，秒实现，但是问题又来了，怎么解析二维码，我会在之后的文章中说明。

阅读全文

0 0