一、使用的類庫
1、phpqrcode(php庫)
2、qrcode.js(javascript庫)
二、phpqrcode的使用
只用php的類庫,也就是二維碼的生成在後台操作。因為要在後台生成帶logo的二維碼,那麼首先必須將logo圖片上傳至服務器(在上傳這裡我用了webuploader)
phpqrcode使用方法:
首先下載phpqrcode:http://phpqrcode.sourceforge.net/
然後在使用之前記得引入phpqrcode.php文件
$value = $url;//二維碼內容 $errorCorrectionLevel = 'L';//設置容錯級別 $matrixPointSize = $size;//生成圖片大小 QRcode::png($value, 'public_files'.DIRECTORY_SEPARATOR .'code'.DIRECTORY_SEPARATOR .'qrcode.png', $errorCorrectionLevel, $matrixPointSize, 2);//生成二維碼圖片 無logo $logo = $tar_path;//上傳至服務器的logo圖片 $QR = 'public_files'.DIRECTORY_SEPARATOR .'code'.DIRECTORY_SEPARATOR .'qrcode.png';//已經生成的原始二維碼圖 if ($logo !== FALSE) { $QR = imagecreatefromstring(file_get_contents($QR)); $logo = imagecreatefromstring(file_get_contents($logo)); $QR_width = imagesx($QR);//二維碼圖片寬度 $QR_height = imagesy($QR);//二維碼圖片高度 $logo_width = imagesx($logo);//logo圖片寬度 $logo_height = imagesy($logo);//logo圖片高度 $logo_qr_width = $QR_width / 5; $scale = $logo_width/$logo_qr_width; $logo_qr_height = $logo_height/$scale; $from_width = ($QR_width - $logo_qr_width) / 2; imagecopyresampled($QR, $logo, $from_width, $from_width, 0, 0, $logo_qr_width, $logo_qr_height, $logo_width, $logo_height); } $name = time(); imagepng($QR, 'public_files'.DIRECTORY_SEPARATOR .'code'.DIRECTORY_SEPARATOR .$name.'.png');//輸出帶logo的二維碼圖片
三、qrcode.js的使用
使用qrcode.js在前端直接生成二維碼,首先需要下載jquery.qrcode.js
qrcode的使用也很簡單:
var length = size*80;//設置二維碼大小 length = parseInt(length); $("#code_img").qrcode({ //code_img是一個img標簽的id render : "canvas", //設置渲染方式,有table和canvas,使用canvas方式渲染性能相對來說比較好 text : url, //掃描二維碼後顯示的內容,可以直接填一個網址,掃描二維碼後自動跳向該鏈接 width : length, //二維碼的寬度 height : length, background : "#ffffff", //二維碼的後景色 foreground : "#000000", //二維碼的前景色 src: $('#image').attr('src') //二維碼中間的圖片 });
引入jquery.qrcode.js後再自己編寫這段js代碼,執行後二維碼就可以顯示處理了
主要是二維碼中間的logo引用格式,一般取本地圖片有兩種格式:一種是本地URL,另一種是將圖片轉成base64格式
一開始我試用本地URL的格式來引用圖片,發現只能引用與js文件統一目錄下的圖片,所以本地URL格式並不支持,於是我采用了後一種方式。
用
<input accept="image/*" type="file" id="file_input">
來上傳選取本地圖片,然後取其base64格式
var input = document.getElementById("file_input"); if(typeof FileReader==='undefined'){ input.setAttribute('disabled','disabled'); }else{ input.addEventListener('change',readFile,false); } function readFile(){ var file = this.files[0]; if(!/image\/\w+/.test(file.type)){ alert("文件必須為圖片!"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ $('#image').attr('src',this.result);//image為img標簽的id } }
將文件讀取為一串Data URL字符串,將小文件以一種特殊格式的URL地址直接讀入頁面。這個特殊格式就是base64
三、兩個類庫之間的對比
兩個類庫,一個在後台操作,一個直接在前端操作。
phpqrcode 生成二維碼在後台操作,生成的圖片保存在服務器。一般生成二維碼都是直接保存到本地然後直接使用,很少會去服務器二次獲取,所以采用phpqrcode的 話會使得服務器中的圖片堆積,占用了不必要的空間,刪除的話也會花費多余的開銷。所以使用phpqrcode不適用於這種二維碼生成工具。而且上傳圖片也 會產生多余的開銷
qrcode.js直接在前端操作,上傳圖片直接保存在浏覽器,直接在前端生成二維碼,不需要任何後台的干涉,這樣減少了不必要的開銷,也不會在服務器造成圖片的堆積而占用不必要的空間。