在yii2應用中，使用imagine庫生成分享圖實戰。

這個需求現在特別常見，比如生成小程序分享圖、生成朋友圈分享圖等等，一般是文字 + 二維碼 + 背景模板。今天我們使用imagine來完成這件事情，並作用於網站的面試題模塊。

請=加=我=們=的=V+信【wqv 370】關註免費資料實力解答
請=加=我=們=的=V+信【wqv 370】關註免費資料用心分析

111期:[猴羊] 開 :羊16 中
110期:[龍豬] 開 :豬36 中
109期:[羊兔] 開 :羊04 中
108期:[蛇虎] 開 :蛇30 中
107期:[牛馬] 開 :牛46 中

在這裏面題目標題、日期和二維碼是需要替換的，其他部分均可以做到背景圖中。

準備階段

為了讓這件事情能實現，我們需要準備一些東西

• imagine圖片庫
• 二維碼生成庫
• 一個好看的字體
• 一張海報（自行用PS處理）

imagine

imagine 支持三種底層的圖像處理庫（GD、Imagick和Gmagick），GD是最老的圖片庫，自然處理能力也不如另外兩種，本次我使用Imagick作為底層支持，關於PHP如何安裝Imagick擴展可參考 https://www.cnblogs.com/aini521521/p/8398770.html

我們知道imagine的安裝可以使用composer，我們首先安裝它

composer require imagine/imagine

安裝完以後你可以在yii2的 vendor/imagine/imagine 內找到它，如果沒有請檢查環境的composer環境（盡量不要使用鏡像，否則可能出現無法獲取最新版本問題）。

因為imagine需要的PHP環境是5.3+，因此只要你的yii2可以運行，imagine一般都是沒問題的。

二維碼

在這張分享圖上我計劃放一個二維碼，它含有的是此次面試題的URL，這樣分享到朋友圈或群的時候，大家通過長按二維碼就能訪問到，為了每個圖片只反映一個主題，關於面試題的訂閱等需求均放到目標頁面，分享圖只做一個事情。

在yii2中生成二維碼有很成熟的庫 —— qrcode-library ，使用它可以生成不同尺寸、內容及樣式的二維碼，強烈推薦。

qrcode-library的安裝也非常簡單，依然是composer。

composer require 2amigos/qrcode-library
 

同樣安裝後我們應該在 vendor/2amigos/qrcode-library 文件夾內找到它。

找一種字體

為了讓樣式好看，我決定找一個字體，然後寫到分享圖上，網上字體下載的網站太多太多，我選擇下載微軟雅黑，再熟悉不管的字體了。

寫入標題

通過上面都準備完成，我們接下來思考分享圖的生成邏輯，其實就是貼水印，文字的水印、圖片水印，就是這樣。我做的圖片背景模板尺寸是500*750，看下圖。

當然這張圖我們後面還要寫話並填充內容，圖中白色的矩形區域我計劃防止標題內容，因為面試題標題長度一般都不長，我預留的3行的高度足夠用了。

現在假設標題為 【請使用PHP循環出本周一到本周日】，我們需要打開背景圖然後做手腳，開始實際編碼。

use Imagine\Imagick\Imagine;

public function actionShare($id){
    $imagine = new Imagine();
    $image = $imagine->open(Yii::getAlias("@webroot")."/images/task-bg.jpg");
    //VarDumper::dump($image,10,true);
}

通過dump可以看到正確打開了。

imagine和image對象都正常輸出了。

接下來的主要工作就是寫入標題

開始第一次寫入

寫入標題等價於為一個圖片添加文本水印，這裏面涉及的問題如下

• 文本內容是什麽
• 用什麽字體
• 字號大小
• 字體顏色
• 從哪個坐標開始

註：imagine和笛卡爾坐標系不同，詳情見 文檔

先說說字體庫，雖然微軟雅黑是win系列的標配，但是服務器上不一定有，我使用的是centos系統，需要下載和指定，在上一部分我們已經下載了字體，現在我將其放到yii2應用的fonts文件夾下，這樣可以通過如下代碼訪問它。

Yii::getAlias(‘@app‘)."/fonts/yahei.ttf";

除非你的頁面需要此字體，否則不推薦將字體放到web目錄下，這樣可以有效防止其他人通過瀏覽器訪問。

接下來我們初步實現一下，接著上面的代碼。

use Imagine\Imagick\Imagine;
use Imagine\Image\Palette\RGB;
use Imagine\Image\Point;

public function actionShare($id){
    $imagine = new Imagine();
    $image = $imagine->open(Yii::getAlias("@webroot")."/images/task-bg.jpg");
    
    $palette = new RGB();
    $color = $palette->color("000000");

    $point = new Point(0,0);

    $font = $imagine->font(Yii::getAlias(‘@app‘)."/fonts/yahei.ttf",12,$color);

    $image->draw()->text("請使用PHP循環出本周一到本周日",$font,$point);
    $image->show(‘jpg‘); 
}

在講解上面代碼之前，我們先看看結果。

得到了我們要的結果，接下來說說邏輯。

在 imagine 中如果為一個圖片增加文本水印，它屬於繪制功能，要調用draw的text方法，我們先看看這個方法的聲明。

text(string $string, AbstractFont $font, PointInterface $position, int $angle = 0, int $width = null)

這就是你剛剛代碼中的 $image->draw()->text(); 部分。

它有幾個重要的參數，比如文字內容、字體、起始坐標，內容弧度等。

因此我們做的一起就是為這個函數準備參數值，內容、字體、坐標。

use Imagine\Image\Palette\RGB;
use Imagine\Image\Point;

這些類都是為了最終調用 text 方法做準備的。

比如我們聽過RGB類定義顏色類

$palette = new RGB();
$color = $palette->color("000000");

比如我們需要通過font方法得到字體類對象

$font = $imagine->font(Yii::getAlias(‘@app‘)."/fonts/yahei.ttf",12,$color);

比如我們通過Point來定義坐標對象

$point = new Point(0,0);

好了，雖然到現在我們實現了標題的寫入，但是位置和大小都不理想，接下來優化。

• 字體大小
• 坐標位置

之前是12，現在我們設置為24，坐標從[0,0]改為[44,230]

$point = new Point(44,230);
$font = $imagine->font(Yii::getAlias(‘@app‘)."/fonts/yahei.ttf",24,$color);

看下效果

很高興，現在為止大小和位置都調整的不錯，但是新的問題來了，我的標題內容超過了一行，其他部分沒有換行而是被切掉了，怎麽辦？？？

內容超過邊界問題的處理

怎麽處理這個問題？在imagine 1.0.0+已經提供了一個自動換行的函數，你只需要升級版本即可，用法非常簡單，如下。

$font = $imagine->font(Yii::getAlias(‘@app‘)."/fonts/yahei.ttf",24,$color);
$text = $font->wrapText("請使用PHP循環出本周一到本周日",400);

wrapText方法的第二個參數代表文本最大長度，超過了即為換行，然後將wrapText作用後的$text再傳給 image->draw()->text(); 即可。

但是，在此文章並不適用，wrapText對中文的支持並不好，因此我們需要另想辦法，雖然如此，我們還是有必要看看wrapText的實現原理。

// vendor/imagine/imagine/src/Image/FontInterface.php:59
public function wrapText($string, $maxWidth, $angle = 0){
    $words = explode(‘ ‘, $string);
    foreach ($words as $word) {
        if ($currentLine === null) {
            $currentLine = $word;
        } else {
            $testLine = $currentLine . ‘ ‘ . $word;
            $testbox = $this->box($testLine, $angle);
            if ($testbox->getWidth() <= $maxWidth) {
                $currentLine = $testLine;
            } else {
                $lines[] = $currentLine;
                $currentLine = $word;
            }
        }
    }
    .....
    return implode("\n", $lines);    
}

你看到了wrapText的實現是通過空格來實現單詞的劃分，因此這個算法只適用於英文，最後通過計算寬度，通過換行符實現最後效果。

那對中文怎麽辦？沒關系，從官方wrapText的方法我們可以改造出子的方法，只不過每個詞的話不不再是空格，我進行了如下改造。

$lines = array();
$maxWidth = 420;
$currentLine = null;
$text = "請使用PHP循環出本周一到本周日";
for($i = 0;$i < mb_strlen($text,‘UTF-8‘);$i++){
    $word = mb_substr($text,$i,1,‘UTF-8‘);
    if ($currentLine === null) {
        $currentLine = $word;
    } else {
        $testLine = $currentLine.$word;
        $testbox = $font->box($testLine, 0);
        if ($testbox->getWidth() <= $maxWidth) {
            $currentLine = $testLine;
        } else {
            $lines[] = $currentLine;
            $currentLine = $word;
        }
    }
}
if ($currentLine !== null) {
    $lines[] = $currentLine;
}

$text = implode("\n", $lines);

思路就是首先獲得整個字符串的長度N，然後從0到N-1遍歷，得到每個字（中英文），然後將這些字放到一個測試行testLine中，並通過$font->box方法得到測試行的寬度，超過了我們最大寬度則重新設置測試行，一次又一次，最後lines數組裏就是每一行，且他們都沒有超過邊界maxWidth。

最後使用換行符再將lines數組拼湊回字符串，ok，看效果。

更好的行間距

剛剛我們解決了溢出問題，但是現在每行的間距太小了，這樣大大影響了體驗，這小節我們將做出一個合適的行間距，但是你知道當我們將文本劃到圖片的時候，是無法設置行邊距的。

這一切要從坐標開始研究。

因此我計劃取消上面將lines數組重新拼湊成字符串的代碼，保留每一行，然後指定每一行的具體Y坐標。

$height = $font->box($model->title)->getHeight();// 獲得字的高度。$model->title 就是輸出的內容
$lines = array();
$currentLine = null;
for($i = 0;$i < mb_strlen($model->title,‘UTF-8‘);$i++){
    $word = mb_substr($model->title,$i,1,‘UTF-8‘);
    if ($currentLine === null) {
        $currentLine = $word;
    } else {
        $testLine = $currentLine.$word;
        $testbox = $font->box($testLine, 0);
        if ($testbox->getWidth() <= 420) {
            $currentLine = $testLine;
        } else {
            $lines[] = $currentLine;
            $currentLine = $word;
        }
    }
}
if ($currentLine !== null) {
    $lines[] = $currentLine;
}

// 獲得lines數組
foreach($lines as $key=>$value){
    $point = new Point(40,($key == 0 ? 230 : (230 + ($height + 10)*$key)));
    $image->draw()->text($value,$font,$point,0);
}

$image->show(‘jpg‘);

行間距我留了10px，再看看效果。

寫入時間（坐標自動計算）

通過上面的方法實現時間的寫入並不復雜，不過我決定換一個思路，時間的寫入我們並不打算直接指定坐標，而是通過計算而來，這個方法將非常適合於讓一些文字居中的情形。

寫入的內容很簡單 2018-09-28，就是一個日期。

繼續擴展上面的代碼，主要是計算X坐標。Y坐標400.

use Imagine\Image\Point\Center;

$dateText = date(‘Y-m-d‘,$model->publish_date);
$dateFont = $imagine->font(Yii::getAlias(‘@app‘)."/fonts/yahei.ttf",12,$color);
$dateBox = $dateFont->box($dateText);
$dateCenterPosition = new Center($dateBox);
$image->draw()->text($dateText,$dateFont,new Point(($image->getSize()->getWidth()/2 - $dateCenterPosition->getX()),420));

之所以這樣寫是為了讓大家熟悉Center類，我們可以將一個字體的盒子放到Center中，然後獲取中間點坐標。

寫入二維碼

離成功越來越近了，接下來我們寫入二維碼，這其實是兩步。

• 生成二維碼
• 寫入二維碼到分享圖

寫入二維碼

使用 qrcode-library 生成二維碼非常簡單，我們還是先貼代碼

use Da\QrCode\QrCode;

$qrCode = (new QrCode(Yii::$app->urlManager->createAbsoluteUrl([‘/task/detail‘,‘id‘=>$id])))->setSize(180)->setMargin(10);
$path = Yii::getAlias(‘@webroot‘).‘/uploads/tmp/‘.Yii::$app->security->generateRandomString().‘.jpg‘;
$qrCode->writeFile($path);

在合理其實有點瑕疵，使用QrCode生成的二維碼比較簡單，但是只支持生成Uri、服務器文件及流，但是無法返回資源，因此我們必須將其保存下來後在使用 imagine 來讀取，否則就可以直接使用 imagine 的read方法了。

總之上面的代碼通過為QrCode對象傳入URL地址來生成二維碼，同時使用writeFile將其存到服務器。

寫入二維碼到分享圖

將二維碼寫入分享圖需要使用imagine庫的paste方法，這也是我們做圖片水印的方法。

$water = $imagine->open($path);
$image->paste($water,new Point(150,520));

通過 open 方法讀取一個文件返回image對象，通過paste將其貼到$image圖像上。

最後我們看到了要的效果

小結

分享圖的細節太多太多，這一切還需要優化，本篇希望對你能起到拋磚引玉的作用，如果你有好的庫也歡迎留言。

圖解112-蛇蛋圖：哎呀，太不小心了.PHP圖片處理分析問題！