夏日博客

A-A+

jquery生成当前页面的二维码图片

2016年01月11日 前端设计 暂无评论 阅读 9 views 次

二维码通常是使用php生成但现在的jquery也可以直接生成二维码了，下面来看一个简单的例子。

jquery.qrcode.js是一个生成二维码的jquery插件。压缩后体积不到4K。使用它来生成当前页面的二维码很方便。

示例:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>jquery生成当前页面的二维码</title>  
  5.   <meta charset='utf-8' />  
  6.   <!-- js引用包 -->  
  7.   <script src=/dl/jquery/js/jquery-1.8.3.min.js'></script>  
  8.   <script type="text/javascript" src="/dl/jquery/js/jquery.qrcode.min.js"></script>  
  9. </head>  
  10. <style>  
  11. #qrcodeCanvas {   
  12.  position:absolute;   
  13.  height:200px;   
  14.  width:200px;   
  15.  margin:-100px 0px 0px -100px;   
  16.  top: 50%;   
  17.  left: 50%;   
  18. }    
  19. </style>  
  20. <body>  
  21.   <!-- 二维码绘制区域 -->  
  22.   <div id="qrcodeCanvas"></div>  
  23. </body>  
  24.   <script style='text/javascript'>  
  25.       $('#qrcodeCanvas').qrcode({  
  26.              text: window.location.href,//二维码代表的字符串（本页面的URL）  
  27.              width: 200,//二维码宽度  
  28.              height: 200//二维码高度  
  29.       });  
  30.     </script>  
  31. </html>  
标签：

给我留言