兩種生成帶logo二維碼的開發總結

1、使用的類庫

一、phpqrcode（php庫）

二、qrcode.js（javascript庫）

2、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的二維碼圖片

3、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

3、兩個類庫之間的對比

兩個類庫，一個在後臺操做，一個直接在前端操做。

phpqrcode 生成二維碼在後臺操做，生成的圖片保存在服務器。通常生成二維碼都是直接保存到本地而後直接使用，不多會去服務器二次獲取，因此採用phpqrcode的 話會使得服務器中的圖片堆積，佔用了沒必要要的空間，刪除的話也會花費多餘的開銷。因此使用phpqrcode不適用於這種二維碼生成工具。並且上傳圖片也 會產生多餘的開銷

qrcode.js直接在前端操做，上傳圖片直接保存在瀏覽器，直接在前端生成二維碼，不須要任何後臺的干涉，這樣減小了沒必要要的開銷，也不會在服務器形成圖片的堆積而佔用沒必要要的空間。

附上樣圖：