在 VUE 开发的微信公众号项目中，有一个动态生成二维码的需求：根据后端传来的参数，动态生成二维码，用户长按动态生成的二维码，然后识别做相应操作。
二、BUG问题
二维码的生成采用的是第三方库 qrcodejs2，功能实现后，测试发现，在苹果 IOS 系统中长按可以正常识别，而在安卓手机长按则无法识别。
三、原因分析
第三方库 qrcodejs2 生成二维码时，它会在我们指定 div 盒子内动态生成两个元素，分别是 canvas 和 img，如下图所示：
浏览器代码截图
上图是在浏览器测试时的截图，可以看到 canvas 处于隐藏（display: none）状态，img 处于显示（display: block）状态。这种状态是没问题的，因为只有长按 img 图片才会弹出识别按钮，既然安卓手机长按无法弹出识别按钮，说明安卓手机展示的不是 img 元素，而是 canvas 元素。
四、解决方案
既然只有 img 元素才可以被识别，那么我们只要保证不让其展示 canvas 画布，始终展示 img 就可以了。具体代码如下：
<!-- 隐藏原来存放二维码的 div -->
<div id="qrcode" style="display: none"></div>
<!-- 添加一个新的div，用来展示 canvas 转换的 base64 图片 -->
<div style="text-align: center">
<img :src="qrcodeimg" alt="" width="200" height="200" v-show="qrcodeimg">
</div>
我们在指定的 div#qrcode 下面，再创建了一个div，并把原来装二维码的 div#qrcode 进行隐藏，然后生成二维码之后，我们获取 div#qrcode 里的 canvas 元素，并将拿到的 canvas 转为 base64 图片，然后展示在下面新创建的 div 中。这样处理之后，不管什么情况，始终展示的都是 img 图片了…
// 生成二维码
new QRCode("qrcode", {
width: 200,
height: 200,
text: this.payCode
})
// 生成二维码之后，获取canvas元素
let qrcodeEle = document.getElementById("qrcode")
let cvs = qrcodeEle.querySelector('canvas')
this.qrcodeimg = cvs.toDataURL('image/png')
1： 使用SwetakeQRCode在Java项目中生成二维码http://swetake.com/qr/ 下载地址
或着http://sourceforge.jp/projects/qrcode/downloads/28391/qrcode.zip
这个是日本人写的，生成的是我们常见的方形的二维码
可以用中文
如：5677777ghjjjjj
2： 使用BarCode4j生成条形码和二维码
BarCode4j网址：http://sourceforge.NET/projects/barcode4j/
barcode4j是使用datamatrix的二维码生成算法，为支持qr的算法
datamatrix是欧美的标准，qr为日本的标准，
barcode4j一般生成出来是长方形的
如：88777alec000yan
这个博客这方面说的挺清楚的：
http://baijinshan.iteye.com/blog/1004554
3：zxing
zxing 这个是google的
下载地址
http://code.google.com/p/zxing/downloads/list
Java代码：
import java.io.File
import java.util.Hashtable
import com.google.zxing.BarcodeFormat
import com.google.zxing.EncodeHintType
import com.google.zxing.MultiFormatWriter
import com.google.zxing.client.j2se.MatrixToImageWriter
import com.google.zxing.common.BitMatrix
import com.google.zxing.qrcode.QRCodeWriter
public class QRCodeEvents {
public static void main(String []args)throws Exception{
String text = "你好"
int width = 100
int height = 100
String format = "png"
Hashtable hints= new Hashtable()
hints.put(EncodeHintType.CHARACTER_SET, "utf-8")
BitMatrix bitMatrix = new MultiFormatWriter().encode(text, BarcodeFormat.QR_CODE, width, height,hints)
File outputFile = new File("new.png")
MatrixToImageWriter.writeToFile(bitMatrix, format, outputFile)
}
}
4：google chart api就有实现二维码的方法
利用这个api，使用google appengine进行实现。
5：JS生成二维码
使用jQuery-qrcode生成二维码
先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），
qrcode.js 是实现二维码数据计算的核心类，
jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和table两种方式）
支持的功能主要有：
Js代码：
text : "https://github.com/jeromeetienne/jquery-qrcode" //设置二维码内容
Js代码：
render : "canvas",//设置渲染方式
width : 256, //设置宽度
height : 256, //设置高度
typeNumber : -1, //计算模式
correctLevel: QRErrorCorrectLevel.H,//纠错等级
background : "#ffffff",//背景颜色
foreground : "#000000" //前景颜色
使用方式非常简单
Js代码：
jQuery('#output').qrcode({width:200,height:200,correctLevel:0,text:content})
经过简单实践，
使用canvas方式渲染性能还是非常不错的，但是如果用table方式，性能不太理想，特别是IE9以下的浏览器，所以需要自行优化一下渲染table的方式，这里就不细述了。
其实上面的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 = 0i <leni++) {
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
}
<div id = "qrcodeid"></div> //生成的二维码放在此 div 中<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>//引入qrcode.js（到https://github.com/jeromeetienne/jquery-qrcode 下载 ）
<script>
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>
<script>//此处生成名片二维码（如要生成普通链接二维码 则 “text”参数值 直接替换成普通链接即可）
var the_text = "BEGIN:VCARD \r\nFN:姓名 \r\nTELCELL,VOICE:15000000000 \r\nTITLE:职称 \r\nORG:公司（组织） \r\nEMAILINTERNET,HOME:[email protected] \r\nADRWORK,POSTAL:地球中国山东... \r\nURL:http://leerd.cn \r\nEND:VCARD"
the_text = utf16to8(the_text)
//alert(the_text)
jQuery('#qrcodeid').qrcode({
width:140,
height:140,
render:"canvas", //设置渲染方式 table canvas
typeNumber : -1, //计算模式
correctLevel : 0,//纠错等级
background : "#ffffff",//背景颜色
foreground : "#000000",//前景颜色
text:the_text
})
</script>
