前端生成二维码

JavaScript 前端客 2456℃ 0评论

二维码日常使用都是后端生成,其实也可以前端生成。后端生成会有两个问题:

  • 没有找到正规发布出来的后端开源库。
  • 二维码图片,会随着商品的增加而不断变多。

下面介绍在前端生成二维码,使用jquery.qrcode.min.js,可以在github上找到这个类库。

https://github.com/jeromeetienne/jquery-qrcode
下面来介绍下这个类怎么来使用,先看下面这个例子。其中第10行调用方法qrcode来生成二维码。

<!DOCTYPE html>
 <html>
     <head>
        <script charset='utf-8' type='text/javascript' src='./jquery.js'></script>
         <script src="./jquery.qrcode.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function(){
          $('#qr_gen').click(function() 
           {
             $('#qr_container').qrcode({render:"canvas",height:120, width:120,correctLevel:0,text:$('#qr_link').val()}); 
          });
         });
         </script>
    </head>
     <body>
        <h1>QR CODER</h1>
        <div>
            <label for="qr_link">URL:</label>      
           <input id="qr_link" type="text" value="I am going to be a quick response code." style="width:450px;" /> 
            <button id="qr_gen" value="Generate">Generate</button> <br />
         </div>
        <div id="qr_container" style="margin:auto; position:relative;"></div>
        </div>
    </body>
 </html>

我们来介绍下这几个参数:

render: 二维码图片的生成方式。支持table和canvas来渲染。

height: 二维码高度。

width: 二维码宽度。

correctlevel: 二维码容错级别。

text: 二维码内容。

我们先来看看用table和canvas渲染有什么不同。执行了上面的例子,大家可以看到,二维码使用canvas画出来,在网页上输出一个canvas节点。但是用到table的话,我们会发现二维码实际是使用table表格把每一个二维码的点画出来。网页上的Dom元素会暴多(目前没有发现有拖垮浏览器的现象)。

对一个有追求的人,或者大型的网站,需要对ie, chrome, firefox等浏览器支持。选择canvas,ie7就没办法支持。那就选择table吧,一切看起来都很美好。但在实际使用的过程中,当二维码的内容较多时,二维码的尺寸较小时(比如120px * 120 px),用table来渲染,会发现生成的二维码很难识别(主要发生在chrome上)。

使用下面的办法,所有的浏览器完美支持,而且大部分的用户都会是canvas渲染。

 try
 {  
     document.createElement('canvas').getContext('2d');
     $('#qr_container').qrcode({render:"canvas",height:120, width:120,correctLevel:0,text:$('#qr_link').val()});
 } catch (e)
 {
     $('#qr_container').qrcode({render:"table",height:120, width:120,correctLevel:0,text:$('#qr_link').val()});
 }

关于这个类库,github上也有简短的用法介绍,不过真的很简短。但作为攻城狮这都不是事,大家可以直接看源代码。里面有提供源代码(在src目录下)和压缩代码,直接查看即可。

版权所有,转载请注明:前端客 » 前端生成二维码
喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)