GitHub上基于PHP的开源QR Code图片生成库基本没有,遂网上找到一款收费的Ultimate Barcode Generator,这款代码的功能非常强大,除了不能生成三维识别码,一维、二维的各种识别码基本一应俱全。
演示:http://www.voindo.eu/UltimateBarcodeGenerator/index.php
商店:http://codecanyon.net/item/ultimate-barcode-generator/593053
生成QR Code图片
OK,废话不多说,先来看一下它的文件结构
其中mainfiles就是主程序所在的文件夹了
在主程序文件夹里面有两个文件和生成QR Code有关,一个是barcode.class.php,是主要的require入口文件,用于生成调用链接,另一个是barcode.processor.php,用于响应调用。
特别要注意的是barcode.class.php生成的调用链接不是绝对地址,需要自己组合URL,否则直接调用会出错。
例如下面的代码用于生成一个Text格式的二维码调用链接$barcode_link
1 2 3 4 5 6 7 8 |
<?php // include require 'test-code/barcode/barcode.class.php'; // generate qr-code img link $bar = new BARCODE(); $qr_values[0] = $ss_Qr_Code_Text; $barcode_link = 'test-code/'.$bar->QRCode_link('text', $qr_values, 125, 2); |
要注意$bar->QRCode_link()生成的是以barcode.class.php当前目录所在的URI,使用的时候要在前面加上实际的文件路径。
之后将调用的链接地址通过file_get_contents()获取并输出为png文件格式
1 2 3 4 5 6 |
// fetch img content $ss_img = file_get_contents($barcode_link); // export img header('Content-type: image/png'); echo $ss_img; |
然后在前端通过在<img>标签中的src属性调用该PHP文件
1 |
<img src="gen_qr_code_img_for_ss.php"> |
如果是动态调用,可以通过get方式直接传递参数给该PHP文件,例如
1 |
<img src="gen_qr_code_img_for_ss.php?password=21506"> |
关于Retina兼容
在调用二维码图片的时候如果考虑为了兼容Retina设备,还需要做一些额外的调整
之前的img标签写法如下
1 |
<img src="gen_qr_code_img_for_ss.php?password=21506"> |
如果要改成兼容Retina的img标签,那么最简单的办法就是在img标签中指定图片显示的尺寸,然后将图片尺寸调整为显示尺寸的两倍大小,这样Retina设备会自动显示高分辨率图片,而非Retina设备也会自动调整图片大小到显示尺寸。
1 |
<img src="gen_qr_code_img_for_ss.php?password=21506" width="250" height="250"> |
但是有些浏览器在将大图片显示为小尺寸上有些问题,比如Chrome,缩放后的高分辨率图片会变模糊。
要解决这个问题,需要让浏览器自动识别设备是否支持Retina,至于如何识别,只需要交给浏览器来完成即可,我们要做的就是告诉浏览器在不同的分辨率下该调用哪个图片。
这就要用到一个新的srcset属性,这个属性告诉浏览器服务器的图片有多个不同的版本来对应多个分辨率,由浏览器来决定显示哪个版本。格式如下
1 |
<img src="low-resolution.png" width="250" height="250" srcset="low-resolution.png 1x, high-resolution@2x.png 2x" > |
在src属性中改为放置低分辨率图片,其余保持不变,新添加一个srcset属性,在该字段中分别增加1x位置放置低分辨率图片,2x位置放置高分辨率图片,并在高分辨率图片名称末尾加上@2x。
注意,重要的来了。
静态图片修改下文件名加上@2x、调整下大小都没什么问题,但是动态生成的图片该怎么办,由于直接调用PHP文件,总不能用两个PHP文件,一个生成低分辨率图片,另一个生成高分辨率文件吧,要怎么才能让浏览器自动识别呢?
先给出答案
1 |
<img src="gen_qr_code_img_for_ss.php?password=21506&retina=0" alt="QR Code bellow is for Android or iOS Clients" width="250" height="250" srcset="gen_qr_code_img_for_ss.php?password=21506&retina=0 1x, gen_qr_code_img_for_ss.php?password=21506&retina=@2x 2x"> |
即只需要在调用参数中带有@2x即可
之后,只需要在PHP的input中添加一个布尔型参数retina来处理Get的高清图片请求即可。
There are no comments yet