使用jquery.qrcode生成二维码(转)

本文介绍如何使用jQuery qrcode插件在网页上生成二维码,并提供了一段示例代码来展示如何设置二维码的内容、尺寸以及如何将其转换为图片格式。

jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单:

 

1、首先在页面中加入jquery库文件和qrcode插件。

代码   收藏代码
  1. <script type="text/javascript" src="jquery.js"></script>  
  2. <script type="text/javascript" src="jquery.qrcode.min.js"></script>   

 

2、在页面中需要显示二维码的地方加入以下代码。

代码   收藏代码
  1. <div id="qrcodeCanvas"></div>  
  2. <script>  
  3. jQuery('#qrcodeCanvas').qrcode({  
  4.     width   : 300,  
  5.     height  : 300,  
  6.     text    : http://www.baidu.com  
  7. });   
  8. </script>  

上面这段代码生成一张 300x300 的canvas二维码, 它包含的信息便是百度的网址。

 

3、用JS将上面的canvas内容转换成图片(png或jpg格式使其可以保存)。

首先设个img标签:

代码   收藏代码
  1. <img id="image" src="">  

最后用JS代码转换:

代码   收藏代码
  1. var image = document.getElementById("image");  
  2. var canvas = document.getElementById("qrcodeCanvas").getElementsByTagName("canvas")[0];  
  3. image.src = canvas.toDataURL("image/png");  

完成。

转自:http://coyotestark.iteye.com/blog/2265027

转载于:https://www.cnblogs.com/li-han/p/6233307.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值