楊艷麗 段壽建
摘 要: 二維碼具有儲存量大、數(shù)據(jù)形式多樣、信息保密性高、追蹤性高、抗損性強、備援性大、成本低等特性。隨著智能終端設(shè)備的普及,二維碼技術(shù)在微信、瀏覽器、文件資料中得到廣泛應(yīng)用,用戶通過智能手機、平板電腦等移動智能終端掃描二維碼,便能輕松跳轉(zhuǎn)到另一個頁面或獲取用戶名片,給用戶使用帶來極大的便利。研究了在Web開發(fā)中用PHP和Jquery兩種方式生成二維碼的程序,實踐證明了兩種方法的有效性和靈活性。
關(guān)鍵詞: 二維碼; Web開發(fā); PHP; Jquery
中圖分類號:G354.46 文獻(xiàn)標(biāo)志碼:A 文章編號:1006-8228(2018)06-35-03
The generation and application of QR code in the Web development
Yang Yanli1, Duan Shoujian2
(1. College of mathematics, BaoShan University, Baoshan, Yunnan 678000, China; 2. College of information, BaoShan University)
Abstract: Two dimensional code has the characteristics of large storage, diverse data form, information confidentiality, high traceability, strong resistance to damage, large backup and low cost. With the popularization of intelligent terminal equipment, two-dimensional code technology has been widely used in WeChat, browsers and files. Users can easily jump to another page or obtain user card on the mobile intelligent terminals such as smart phones and tablet computers, which can bring great convenience to users. In this paper, two methods to generate QR code in the Web development with PHP and Jquery are studied respectively. The practice proves that both the methods are effective and flexible.
Key words: QR code; Web development; PHP; JQuery
0 引言
近年來,隨著移動互聯(lián)網(wǎng)、物聯(lián)網(wǎng)、云計算、大數(shù)據(jù)等新技術(shù)發(fā)展,“掃一掃”在微信、瀏覽器、文件資料中得到普通應(yīng)用[1]。用戶通過智能手機、平板電腦等移動智能終端掃描“二維碼”,便能輕松跳轉(zhuǎn)到另一個頁面或獲取用戶名片,給用戶使用帶來極大的便利。本文重點介紹二維碼的知識,分析在Web開發(fā)中實現(xiàn)二維碼的生成,對Web開發(fā)有很好的指導(dǎo)意義。
1 二維碼技術(shù)概述
二維碼是用某種特定的幾何圖形按一定規(guī)律在平面(二維方向上)分布的黑白相間的圖形記錄數(shù)據(jù)符號信息。二維碼在代碼編制上巧妙地利用構(gòu)成計算機內(nèi)部邏輯基礎(chǔ)的“0”、“1”比特流的概念,使用若干個與二進(jìn)制相對應(yīng)的幾何形體來表示文字?jǐn)?shù)值信息,通過圖象輸入設(shè)備或光電掃描設(shè)備自動識讀以實現(xiàn)信息自動處理。二維條碼具有儲存量大、數(shù)據(jù)形式多樣,有一定的容錯性,還可以存儲網(wǎng)址信息[2],信息保密性高、追蹤性高、抗損性強、備援性大、成本便宜等特性,這些特性特別適用于表單、安全保密、追蹤、證照、存貨盤點、資料備援等方面。
QR(Quick-Response)code是Denso公司于1994年研制的一種矩陣二維碼,是目前被廣泛使用的一種二維碼,其解碼速度快,具有一維條碼及其他二維條碼所具有的信息容量大、可靠性高、可表示漢字及圖象多種文字信息、保密防偽性強等優(yōu)點。QRcode的基本結(jié)構(gòu)如圖1所示[3]。
⑴ 位置探測圖形、位置探測圖形分隔符、定位圖形:用于對二維碼的定位,對每個QR碼來說,位置都是固定存在的,只是大小規(guī)格會有所差異。
⑵ 校正圖形:規(guī)格確定,校正圖形的數(shù)量和位置也就確定了。
⑶ 格式信息:表示改二維碼的糾錯級別,分為L、M、Q、H。
⑷ 版本信息:即二維碼的規(guī)格,QR碼符號共有40種規(guī)格的矩陣(一般為黑白色),從21×21(版本1),到177×177(版本40),每一版本符號比前一版本 每邊增加4個模塊。
⑸ 數(shù)據(jù)和糾錯碼字:實際保存的二維碼信息和糾錯碼字(用于修正二維碼損壞帶來的錯誤)。
2 使用PHP生成帶個性化logo的二維碼
2.1 準(zhǔn)備工作
在開發(fā)前安裝好WAMP環(huán)境,開啟PHP的GD庫,在PHP QRcode的官方網(wǎng)站http://phpqrcode.sourceforge.net/下載QRcode源碼,將源碼程序文件夾phpqrcode存放 在PHP站點下。phpqrcode.php定義了生成二維碼圖片函數(shù)png(),png()方法參數(shù)如下[4]:
public static function png($text,$outfile=false, $level=
QR_ECLEVEL_L,$size=3,$margin=4,
$saveandprint=false)
{ $enc=QRencode::factory($level, $size, $margin);
return $enc->encodePNG($text, $outfile,
$saveandprint=false);
}
參數(shù)說明如下。
第一個參數(shù):$text,設(shè)計需要生成二維碼的字符。
第二個參數(shù):$outfile,默認(rèn)為否,不生成文件,只將二維碼圖片返回,否則需要給出存放生成二維碼圖片的路徑。
第三個參數(shù):$level,默認(rèn)為L,這個參數(shù)可傳遞的值分別是L(QR_ECLEVEL_L,7%),M(QR_ECLEVEL_M,15%),Q(QR_ECLEVEL_Q,25%),H(QR_ECLEVEL_H,30%)。這個參數(shù)用于控制二維碼容錯率,不同的參數(shù)表示二維碼可被覆蓋的區(qū)域百分比。利用二維維碼的容錯率,用戶可以將個性化的logo放置在生成的二維碼圖片任何區(qū)域。
第四個參數(shù):$size,控制生成圖片的大小,默認(rèn)為4。
第五個參數(shù):$margin,控制生成二維碼的空白區(qū)域大小。
第六個參數(shù):$saveandprint,保存二維碼圖片并顯示出來。
2.2 制作生成帶個性化logo的二維碼的網(wǎng)頁
準(zhǔn)備一張個性化圖標(biāo)文件,命名為logo.png,新建PHP文件,具體代碼及注釋如下:
<?php
include "phpqrcode/qrlib.php"; //引用QRcode代碼包
$value='http://www.bsnc.cn'; //需要生成二維碼的字符
$QRLevel='H'; //設(shè)置容錯級別
$QRSize=6; //生成圖片大小
QRcode::png($value, 'qrcode.png', $QRLevel,
$QRSize, 2); //生成二維碼圖片
$logo='logo.png'; //準(zhǔn)備好的個性化logo圖片
$QR='qrcode.png'; //已經(jīng)生成的原始二維碼圖
//以下代碼生成帶個性化圖標(biāo)二維碼
if ($logo!==FALSE) {
$QR=imagecreatefromstring(file_get_contents($QR));
//載入二維碼圖像
$logo=imagecreatefromstring(file_get_contents($logo));
//載入個性化的logo圖像
$QRWidth=imagesx($QR); //設(shè)置二維碼圖片寬度
$QRHeight=imagesy($QR); //二維碼圖片高度
$logoWidth=imagesx($logo); //logo圖片寬度
$logoHeight=imagesy($logo); //logo圖片高度
$logoQRWidth=$QRWidth/5;
$scale=$logoWidth/$logoQRWidth;
$logoQRHeight=$logoHeight/$scale;
$fromWidth=($QRWidth-$logoQRWidth)/2;
//重新組合圖片并調(diào)整大小
imagecopyresampled($QR, $logo, $fromWidth,
$fromWidth, 0, 0, $logoQRWidth, $logoQRHeight,
$logoWidth, $logoHeight);
}
//輸出組合的圖片
imagepng($QR, 'resultPic.png');
echo '';
?>
網(wǎng)頁運行程序后,生成如圖2所示的帶個性化logo二維碼圖片:
開發(fā)者可以通過調(diào)節(jié)程序中的各個參數(shù),生成所需的二維碼圖片。
3 使用Jquery生成QRcode二維碼
⑴ 準(zhǔn)備工作
下載基于jquery的二維碼生成插件qrcode,下載jquery.qrcode.min.js和jquery.min.js,網(wǎng)址分別為:https://github.com/jeromeetienne/jquery-qrcode/和https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js[5]。
⑵ 制作生成二維碼的網(wǎng)頁
新建html文件,具體代碼及注釋如下:
4 結(jié)束語
在Web開發(fā)中,生成二維碼為用戶瀏覽提供了高效的訪問方式,本文分析了二維碼的基本原理,詳細(xì)分析了用PHP和Jquery兩種方法生成二維碼的程序代碼,用PHP生成適用于動態(tài)網(wǎng)頁,用Jquery生成適用于靜態(tài)網(wǎng)頁,兩種方法程序代碼簡潔、參數(shù)可調(diào)節(jié)、應(yīng)用性強,在Web開發(fā)中有很好的指導(dǎo)意義。
二維碼提供了的信息移動性便捷性,在物聯(lián)網(wǎng)和電子商務(wù)的推動下,二維碼的應(yīng)用前景必將越來越好,二維碼的安全是需要進(jìn)一步研究的問題。
參考文獻(xiàn)(References):
[1] 于成麗,胡萬里.二維碼的前世今生[J].保密科學(xué)技術(shù),
2017.12:57-62
[2] 周樂樂,趙超越,祁南南等.基于圖像隱藏和二維碼技術(shù)的農(nóng)
產(chǎn)品追溯體系研究[J].吉首大學(xué)學(xué)報,2017.6:120-124
[3] 草料二維碼.QR碼原理詳解[EB/OL].https://cli.im/news/
260/(2018-03)
[4] 方信工作室.使用PHP QR Code生成二維碼[EB/OL].https:
//www.cnblogs.com/txw1958/p/phpqrcode.html(2018-03)
[5] 慕課網(wǎng).實例學(xué)習(xí) PHP QRCode生成二維碼[EB/OL].http:
//www.imooc.com/learn/862/(2018-03)