圖解112-蛇蛋圖:哎呀,太不小心了.PHP圖片處理分析問題!
在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圖片處理分析問題!