ThinkPHP5/ThinkCMF專案生成二維碼

NO IMAGE

背景介紹

最近為客戶做的一個微信H5中要求在頁面裡生成二維碼(是每次ID生成不同的二維碼)。之前在ThinkPHP3.2專案中一直使PHPQrCode,但這個H5專案是基於ThinkCMF(ThinkPHP5.0核心)開發的,在開發過程中我發現JQuery也有生成二維碼外掛(Jquery.qrcode),所以決定用JS來生成二維碼。

JQuery Qrcode生成二維碼

把外掛JS檔案放到專案JS資料夾後參考官網的示例程式碼,兩分鐘搞定。

<!-- HTML程式碼 -->
<div class="divOne" style="width: 120px;height: 120px;"></div>
<!-- JS程式碼 -->
$('.divOne').qrcode({text: 'http://www.xxx.com/demo', width: 120, height: 120});

存在問題

JS生成的二維碼在微信客戶端無法撥出“長按識別圖片中二維碼”選單——因為二維碼圖片是用Canvas渲染出來 的微信不能識別。

endroid-qrcode生成二維碼

發現JS生成的二維碼微信無法識別後,改回用PHP來生成二維碼。在TP官網上有人說PHPQrCode這個外掛太老了,所以使用endroid-qrcode。參考github上該外掛的說明文件,使用composer在專案裡安裝好外掛,然後在controller裡引入外掛生成二維碼圖片。

// 在controller頭部新增引用宣告
use Endroid\QrCode\QrCode;
// 這段程式碼有點囉嗦,生成圖片在專案中的路徑和絕對路徑
$file_name = "{$this->id}.png";
// 計算記錄對應的子檔案路徑(防止每個資料夾內儲存的圖片數量超過系統限制)
$sub_dir = num_divide_dir_path($this->id);
$local_dir = "/upload/qrcode/{$sub_dir}";
$local_path = $local_dir."/".$file_name;
$full_dir = ROOT_PATH."public".$local_dir;
$full_path = $full_dir."/".$file_name;
if(!file_exists($full_path)){
if(!is_dir($full_dir)){
mkdir($full_dir, 0777, true);
}
// 這是生成圖片的主要方法
$qrCode = new QrCode($share_url);
$qrCode->writeFile($full_path);
}
//把圖片路徑傳到view頁面
$this->assign("qrcode_img", $local_path);

存在問題

本地一切執行正常後部署到伺服器後發現QrCode在伺服器上執行報錯。經過排查發現原來是因為QrCode只能執行在PHP5.6以上版本,而伺服器上的PHP版本是5.5。

phpqrcode生成二維碼

伺服器是ubuntu 14.04,PHP版本是5.5.9-1ubuntu4.20,考慮到伺服器上已有多個PHP專案執行,不敢冒然升級伺服器。所以決定改用phpqrcode。把phpqrcode包放到thinkcmf根目錄的simplewind/extend裡。

$file_name = "{$this->id}.png";
// 計算記錄對應的子檔案路徑(防止每個資料夾內儲存的圖片數量超過系統限制)
$sub_dir = num_divide_dir_path($this->id);
$local_dir = "/upload/qrcode/{$sub_dir}";
$local_path = $local_dir."/".$file_name;
$full_dir = ROOT_PATH."public".$local_dir;
$full_path = $full_dir."/".$file_name;
if(!file_exists($full_path)){
if(!is_dir($full_dir)){
mkdir($full_dir, 0777, true);
}
// 這是生成圖片的主要方法
import('phpqrcode.phpqrcode',EXTEND_PATH);
\QRcode::png("http://www.baidu.com", $full_path);
}
//把圖片路徑傳到view頁面
$this->assign("qrcode_img", $local_path);

存在問題

經過除錯發現\QRcode::png方法已執行,但無法在本地還是伺服器上執行都沒有生成二維碼圖片。而在本地TP3.2專案中測試發現可以正常生成圖片。所以懷疑phpqrcode和ThinkCMF或ThinkPHP5.0不相容。

再次用JQuery Qrcode生成二維碼

當發現使用endroid-qrcode和phpqrcode都存在問題後,最後又決定使用JS來生成二維碼圖片。因為之前使用JQuery Qrcode已經可以生成二維碼了,所以只需要解決微信識別二維碼問題就可以。
最終找到了一個解決方法——把JQuery Qrcode生成的Canvas內容賦值給一個Img控制元件的src,而把Canvas隱藏起來。

<!-- HTML程式碼 -->
<img id="qrImg" class="qrcode-img img-responsive" src=""/>
<div class="divOne" style="width: 120px;height: 120px;display: none;"></div>
<!-- JS程式碼 -->
var qrcode= $('.divOne').qrcode({text: '{$sign_package["share_url"]}'});
var canvas = qrcode.find('canvas').get(0);
$('#qrImg').attr('src',canvas.toDataURL('image/jpg'));

繞了一大圈,最後還是用JQuery Qrcode搞定。

PS:網上有人說JQuery Qrcode生成的二維碼識別不了是因為JQuery Qrcode預設生成二維碼是用canvas來渲染,建議把rander引數設定成table就可以。但我本地測試把rander測試成table生成的二維碼圖片微信也不能自動識別。
 

外掛實現語言優點不足
JQuery QrcodeJS前端頁面生成,不需要伺服器上儲存生成圖片直接生成的二維碼微信無法識別,需要把生成圖片賦值給Image控制元件的src才可以被微信識別
endroid-qrcodePHP伺服器端PHP生成,外掛比較新;PHP版本5.6
phpqrcodePHP伺服器端PHP生成外掛比較老;不相容ThinkPHP5.0或ThinkCMF

參考引用

 

jquery.qrcode.js生成二維碼外掛&轉成圖片格式