Network: 在网页中加入包含当前页面地址的QR code

QR Code, 二维码的一种, 全称为Quick Response Code,特点是信息识读所需时间很短,包含的信息量大。(之前我还一直以为二维码就是QR Code, 原来QR Code只是二维码中的一种)

二维码可以用来登录,如微信网页版、淘宝PC端登录等等;二维码也可以用于支付,如微信支付,支付宝支付。当然使用二维码地方还很多,总之二维码是一个很好的信息交互的媒介。

不知道为什么各网站不在页面中加入一个二维码,二维码中包含当前页面的地址,这样我们就可以很方便地通过手机的摄像头,将你感兴趣的页面快速地同步到另一台设备上。是因为专利吗?

我们需要一个js脚本,用于生成我们所需要的二维码,这里会使用到jquery.qrcod.js (http://jeromeetienne.github.io/jquery-qrcode/):

jquery.qrcode.js is jquery plugin for a pure browser qrcode generation. It allow you to easily add qrcode to your webpages. It is standalone, less than 4k after minify+gzip, no image download. It doesnt rely on external services which go on and off, or add latency while loading. It is based on a library which build qrcode in various language.jquery.qrcode.js wraps it to make it easy to include in your own code.

正如官网提供的示例代码一样,我们可以很容易地在页面中添加如下代码来显示一个二维码:

1. 在页面中声明使用jquery.qrcode.min.js脚本:

<script type="text/javascript" src="jquery.qrcode.min.js"></script>

2. 创建一个DOM元素用于显示二维码图象:这里可以使用canvas或者是table:

<p>Render in table</p>
<div id="qrcodeTable"></div>
<p>Render in canvas</p> 
<div id="qrcodeCanvas"></div>

NOTE:

– 具体示例请参考这里:http://jeromeetienne.github.io/jquery-qrcode/examples/basic.html

– 默认大小为256px * 256px

3. 通过如下代码在container: div中生成二维码:

<script>
	//jQuery('#qrcode').qrcode("this plugin is great");
	jQuery('#qrcodeTable').qrcode({
		render	: "table",
		text	: "http://jetienne.com"
	});	
	jQuery('#qrcodeCanvas').qrcode({
		text	: "http://jetienne.com"
	});	
</script>
  • 相关的参考文档
  1. https://en.wikipedia.org/wiki/QR_code
  2. http://jeromeetienne.github.io/jquery-qrcode/
  3. https://github.com/jeromeetienne/jquery-qrcode

评论

4 Comments on "Network: 在网页中加入包含当前页面地址的QR code"

提醒我
avatar

吴成云
游客
吴成云
1 年 10 月 之前

怎么研究起这个了

张炳君
游客
张炳君
1 年 10 月 之前

接下来要不要研究下二维码识别算法

wpDiscuz