jQuery实现微信长按识别二维码功能

1.引入JS库

[javascript]  view plain  copy

 

1. <script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>  
2. <script src="jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>  

2.在页面创建一个空的div;

[html]  view plain  copy

 

1. <div id="qrDiv"></div>  

3.生成二维码

[javascript]  view plain  copy

 

1. $("#qrDiv").qrcode({   
2.             width: 120, //宽度   
3.             height:120, //高度   
4.             text: "需要生成的二维码内容" //任意内容   
5.    });  

注意：这个时候生成的二维码在微信中长安没任何反应，因为qrcode生成的是canvas标签而不是img标签

4.将canvas标签转换为img标签

[javascript]  view plain  copy

 

1. //从 canvas 提取图片 image  
2. function convertCanvasToImage(canvas) {  
3.     //新Image对象，可以理解为DOM  
4.     var image = new Image();  
5.     // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持  
6.     // 指定格式 PNG  
7.     image.src = canvas.toDataURL("image/png");  
8.     return image;  
9. }  
10.   
11. //获取网页中的canvas对象  
12.   
13. var mycanvas1=document.getElementsByTagName('canvas')[0];  
14.   
15. //将转换后的img标签插入到html中  
16.   
17. var img=convertCanvasToImage(mycanvas1);  
18.   
19.  $('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id