PHP圖片處理庫(kù)Grafika詳細(xì)教程（1）：圖像基本處理
Grafika是一個(gè)PHP圖像處理庫(kù)，是基于Imagick和GD，可以用于改變圖片大小，剪裁，比較，添加水印等等功能。還有感知哈希，高級(jí)圖像過(guò)濾，繪制貝塞爾曲線(xiàn)等功能，可謂非常強(qiáng)大。
由于功能太多，所以分成幾篇文章寫(xiě)。
優(yōu)點(diǎn)：
- 縮略圖的速度非?？?，質(zhì)量非常高
- 支持智能剪裁
- 很好的支持GIF圖片
- 5種縮略圖模式
- 圖像對(duì)比功能
- 圖像高級(jí)過(guò)濾功能
- 圖像混合
- 其他圖像處理庫(kù)支持的API基本都支持
安裝
下載
1、直接下載：
??Grafika的官網(wǎng)???、??Github地址??
2、composer：
composer require kosinix/grafika:dev-master --prefer-dist
環(huán)境需求
- PHP >= 5.3，當(dāng)然官方推薦php7
- GD庫(kù) >= 2.0版本
- Imagick***(不強(qiáng)求)>=3.3.0 ， ImageMagick >= 6.5.3
部署
下載下來(lái)的Grafika目錄基本結(jié)構(gòu)像下面這樣：
?
??
不過(guò)composer下載下來(lái)的多一點(diǎn)兒，你只需要使用kosinix/grafika目錄下的東西就好了。
我們?cè)趃rafika目錄下建立一個(gè)index.php，之后的操作都在這里。
grafika給我們提供了一個(gè)非常好用的autoloader.php位于src目錄下。
在index.php中引入它，(說(shuō)明下，以下示例都需要引入這個(gè)autoloader.php文件，我們默認(rèn)省略)，下面就可以直接開(kāi)發(fā)了。
require_once 'src/autoloader.php';
創(chuàng)建Editors
1、createEditor
grafika通過(guò)靜態(tài)方法createEditor來(lái)創(chuàng)建一個(gè)editor。它包含所有的圖片處理方法。
由于，grafika是基于Imagick和GD庫(kù)，所以使用createEditor方法會(huì)根據(jù)當(dāng)前情況，自動(dòng)選擇所需要的圖片處理庫(kù)。(推薦使用)
use Grafika\Grafika; // Import package $editor = Grafika::createEditor(); // Create the best available editor
2、Imagick Editor
當(dāng)然你也可以直接使用Imagick類(lèi)庫(kù)。
use Grafika\Imagick\Editor; // Import package $editor = new Editor(); // Imagick editor
注意：有些情況可能不支持該類(lèi)庫(kù)，你需要使用下面語(yǔ)句檢查后使用，(不過(guò)你***直接使用方法1，就沒(méi)這些事)
use Grafika\Imagick\Editor; // Import package $editor = new Editor(); // Imagick editor if( $editor->isAvailable() ) { // Safety check // Your code here } 3、GD Editor
你也可以直接使用GD庫(kù)，也有些情況可能不支持，記得檢查
use Grafika\Gd\Editor; // Import package $editor = new Editor(); // Gd editor if( $editor->isAvailable() ) { // Safety check // Your code here } 創(chuàng)建圖像
grafika允許你使用4種方式創(chuàng)建一個(gè)待處理的圖像
1、直接打開(kāi)圖像
創(chuàng)建editor + open方法
use Grafika\Grafika; $editor = Grafika::createEditor(); $editor->open( $image, 'path/to/image.jpg');
2、使用靜態(tài)方法打開(kāi)圖片
使用直接打開(kāi)、創(chuàng)建圖片
use Grafika\Grafika; $image = Grafika::createImage('path/to/image.jpg'); // 這里省略了$editor = Grafika::createEditor(); 3、創(chuàng)建一個(gè)空白的畫(huà)布
新建一個(gè)畫(huà)布作為新圖像
use Grafika\Grafika; $image = Grafika::createBlankImage(100,100);
4、從已有圖片拷貝一個(gè)
拷貝一個(gè)圖像作為圖像處理
$copy = clone $image;
這種方法你要保證之前有一張圖片
這幾種方法之后的操作大同小異，我們只選擇***種常規(guī)方法作為講解示例
圖片縮略圖
我們先準(zhǔn)備一個(gè)原圖 ????
接下來(lái)，假設(shè)我們要?jiǎng)?chuàng)建的縮略圖長(zhǎng)：200px寬200px
1、Resize Fit
等比例縮放類(lèi)型。那么就保證圖片較長(zhǎng)的一邊不超過(guò)200px，等比縮放，縮放后不填充背景。
use Grafika\Grafika; $editor = Grafika::createEditor(); $editor->open($image1 , 'yanying.jpg'); // 打開(kāi)yanying.jpg并且存放到$image1 $editor->resizeFit($image1 , 200 , 200); $editor->save($image1 , 'yanying1.jpg'); $editor->open($image2 , 'yanying-h.jpg'); // 打開(kāi)yanying.jpg并且存放到$image2 $editor->resizeFit($image2 , 200 , 200); $editor->save($image2 , 'yanying2.jpg');
當(dāng)然不要忘了***行的require ?????????
2、Resize Exact
固定尺寸縮放類(lèi)型。就是不管圖片長(zhǎng)寬比，全部縮小到200px，可能導(dǎo)致圖片變形。
use Grafika\Grafika; $editor = Grafika::createEditor(); $editor->open($image1 , 'yanying.jpg'); // 打開(kāi)yanying.jpg并且存放到$image1 $editor->resizeExact($image1 , 200 , 200); $editor->save($image1 , 'yanying1.jpg'); $editor->open($image2 , 'yanying-h.jpg'); // 打開(kāi)yanying.jpg并且存放到$image2 $editor->resizeExact($image2 , 200 , 200); $editor->save($image2 , 'yanying2.jpg');
居中剪裁。就是把較短的變縮放到200px，然后將長(zhǎng)邊的大于200px的部分居中剪裁掉，圖片不會(huì)變形。 ?????????
4、Resize Exact Width
等寬縮放。和***種功能相似，最終寬為200px，等比縮放，高度不管。
use Grafika\Grafika; $editor = Grafika::createEditor(); $editor->open($image1 , 'yanying.jpg'); // 打開(kāi)yanying.jpg并且存放到$image1 $editor->resizeExactWidth($image1 , 200); $editor->save($image1 , 'yanying1.jpg'); $editor->open($image2 , 'yanying-h.jpg'); // 打開(kāi)yanying.jpg并且存放到$image2 $editor->resizeExactWidth($image2 , 200); $editor->save($image2 , 'yanying2.jpg');
?????? ????5、Resize Exact Height
等高縮放。最終高為200px，等比縮放，不考慮圖片寬度。 ?????? ????
圖像對(duì)比功能
1、圖片相似度對(duì)比
我們首先準(zhǔn)備一張基本圖，用來(lái)和其他圖片對(duì)比。(segmentfault網(wǎng)頁(yè)圖片可能處理過(guò)，直接使用本文圖片可能結(jié)果不一致) ????
1）、我們***次使用一張灰度圖片來(lái)比較 ????
use Grafika\Grafika; $editor = Grafika::createEditor(); $result = $editor->compare('yanying.jpg' , 'yanying_grey.jpg'); var_dump($result); // int 2 說(shuō)明： grafika圖片對(duì)比方法compare返回一個(gè)數(shù)字，其中如果數(shù)字越接近于0，那么表示圖片越相似。如果數(shù)字在0-10范圍內(nèi)，那么圖片都可能相似。但是如果數(shù)字大于10，那么，可能就完全不同。
這里返回2，說(shuō)明相似度還是非常高的。
2）、我們?cè)儆靡粡埧s小的圖片來(lái)測(cè)試，記住都是和***張基本圖比較。 ????
use Grafika\Grafika; $editor = Grafika::createEditor(); $result = $editor->compare('yanying.jpg' , 'yanying-smaller.jpg'); var_dump($result); // int 0 這里結(jié)果返回0，相似度非常高。
3）、我們?cè)儆靡粡埣舨孟聛?lái)的局部圖片測(cè)試 ????
use Grafika\Grafika; $editor = Grafika::createEditor(); $result = $editor->compare('yanying.jpg' , 'yanying-half.jpg'); var_dump($result); // int 20 結(jié)果超過(guò)10了，相似度不怎么高
4）、我們?cè)儆靡粡埻耆煌膱D片測(cè)試 ????
use Grafika\Grafika; $editor = Grafika::createEditor(); $result = $editor->compare('yanying.jpg' , 'yanying-h.jpg'); var_dump($result); // int 39 結(jié)果39，越來(lái)越大，越來(lái)越不像
2、比較圖片是否相同
grafika提供方法equal來(lái)檢查兩張圖片是否完全相同。這里的檢查是一個(gè)像素一個(gè)像素的檢測(cè)，所以時(shí)間可能會(huì)較長(zhǎng)。
當(dāng)然grafika也會(huì)預(yù)檢查，如果兩張圖片大小不相同，則直接返回false。只有其他都相同后才會(huì)進(jìn)行逐像素檢查。
我們這里對(duì)比之前創(chuàng)建的一張縮略圖，因?yàn)榇笮〔灰恢拢灾苯臃祷豧alse ????
use Grafika\Grafika; $editor = Grafika::createEditor(); $result = $editor->equal('yanying.jpg' , 'yanying-smaller.jpg'); var_dump($result); // boolean false 智能剪裁
智能剪裁是自動(dòng)識(shí)別圖像中的重要部分，剪裁時(shí)候偏向于保留重點(diǎn)部分。
不過(guò)grafika也提供了人為操控位置剪裁，我們先說(shuō)這個(gè)。
基本位置剪裁
基本位置剪裁包含9個(gè)位置
- top-left
- top-center
- top-right
- center-left
- center
- center-right
- bottom-left
- bottom-center
- bottom-right
我們這里一起說(shuō)了，這里我們使用900*600的圖片，分成9塊 ????
use Grafika\Grafika; $editor = Grafika::createEditor(); $src = 'yanying.jpg'; $editor->open( $image, $src ); $editor->crop( $image, 300, 200, 'top-left' ); $editor->save( $image, 'result1.jpg' ); $editor->free( $image ); $editor->open( $image, $src ); $editor->crop( $image, 300, 200, 'top-center' ); $editor->save( $image, 'result2.jpg' ); $editor->free( $image ); $editor->open( $image, $src ); $editor->crop( $image, 300, 200, 'top-right' ); $editor->save( $image, 'result3.jpg' ); $editor->free( $image ); $editor->open( $image, $src ); $editor->crop( $image, 300, 200, 'center-left' ); $editor->save( $image, 'result4.jpg' ); $editor->free( $image ); $editor->open( $image, $src ); $editor->crop( $image, 300, 200, 'center' ); $editor->save( $image, 'result5.jpg' ); $editor->free( $image ); $editor->open( $image, $src ); $editor->crop( $image, 300, 200, 'center-right' ); $editor->save( $image, 'result6.jpg' ); $editor->free( $image ); $editor->open( $image, $src ); $editor->crop( $image, 300, 200, 'bottom-left' ); $editor->save( $image, 'result7.jpg' ); $editor->free( $image ); $editor->open( $image, $src ); $editor->crop( $image, 300, 200, 'bottom-center' ); $editor->save( $image, 'result8.jpg' ); $editor->free( $image ); $editor->open( $image, $src ); $editor->crop( $image, 300, 200, 'bottom-right' ); $editor->save( $image, 'result9.jpg' ); $editor->free( $image );
看下結(jié)果 ????
智能剪裁
原圖 ????
我們使用智能剪裁將圖片剪裁至200*200px
use Grafika\Grafika; $editor = Grafika::createEditor(); $editor->open( $image, 'yanying-smaller.jpg' ); $editor->crop( $image, 200, 200, 'smart' ); $editor->save( $image, 'yanying-smart.jpg' );
發(fā)現(xiàn)還是可以突出重點(diǎn)的 ????
GIF縮略圖
壓縮GIF，不丟失動(dòng)畫(huà)
grafika可以直接壓縮GIF圖片，并且不丟失動(dòng)畫(huà)功能。
?
??
use Grafika\Grafika; $editor = Grafika::createEditor(); $editor->open( $image, 'sample.gif' ); $editor->resizeFit( $image, 250, 128 ); $editor->save( $image, 'output.gif' );
我們這里將原圖壓縮到原來(lái)的一半，發(fā)現(xiàn)動(dòng)畫(huà)并沒(méi)有丟失
?
??
移除GIF動(dòng)畫(huà)效果
當(dāng)然，如果有需要，我們也可以直接移除GIF的動(dòng)畫(huà)效果
use Grafika\Grafika; $editor = Grafika::createEditor(); $editor->open( $image, 'sample.gif' ); $editor->flatten( $image ); $editor->save( $image, 'output-no-animation.gif' );
??
??
圖片合并
圖片合并需要2張圖片，將其中一張作為基本圖，準(zhǔn)備的第二章圖片就是放置在基礎(chǔ)圖片之上。
我們首先來(lái)看代碼
use Grafika\Grafika; $editor = Grafika::createEditor(); $editor->open($image1 , 'yanying-h.jpg'); $editor->open($image2 , 'yanying-smaller.jpg'); $editor->blend ( $image1, $image2 , 'normal', 0.9, 'center'); $editor->save($image1,'333/yanying-blend.jpg');
解釋一下
首先打開(kāi)兩張圖片，其中$image1為基礎(chǔ)圖片，也就是放在下面的。重點(diǎn)在blend這個(gè)方法。
其中：
- ***個(gè)參數(shù)為基礎(chǔ)圖片
- 第二個(gè)參數(shù)為放置在基礎(chǔ)圖片之上的圖片normal, multiply, overlay or screen.，這里的類(lèi)型意思就是圖片疊加的模式，下面會(huì)給出實(shí)例看每種的不同。
- 第三個(gè)參數(shù)為透明度，這個(gè)不說(shuō)太多，容易想到。
- 第四個(gè)為位置，有10個(gè)選擇，其中，前面9種為用戶(hù)自定義拜訪(fǎng)位置，而***一個(gè)是智能拜訪(fǎng)，由grafika來(lái)判斷擺放在哪里好。top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right and smart
- 第五個(gè)參數(shù)為可選參數(shù)，表示圖片2距離圖片1左邊的距離
- 第六個(gè)參數(shù)也為可選參數(shù)，表示圖片2距離圖片1上邊的距離
我們?cè)囍鴶[幾種情況。
1、normal
其中位置信息：center，透明度為0.9，也就是上面代碼的那種 ????
2、multiply
位置信息：，top-left，其他不變 ????
3、overlay
位置信息：bottom-right，其他不變 ????
4、screen
位置信息：，***一個(gè)位置參數(shù)不給，也就是默認(rèn)top-left ????
圖像旋轉(zhuǎn)
圖像旋轉(zhuǎn)比較簡(jiǎn)單，只需要給一個(gè)旋轉(zhuǎn)角度參數(shù)就可以了，如果想要給背景填充個(gè)顏色，再給一個(gè)顏色參數(shù)即可。(默認(rèn)不給背景色為黑色)
代碼如下
use Grafika\Grafika; use Grafika\Color; $editor = Grafika::createEditor(); $editor->open($image , 'yanying-smaller.jpg'); $editor->rotate($image ,'45',new Color('#ff0000')); $editor->save($image,'333/yanying-rotate.jpg'); ***一個(gè)背景顏色參數(shù)也是需要Color對(duì)象 ????
圖片寫(xiě)文字
在圖片上面寫(xiě)文字的參數(shù)比較多，不過(guò)如果正常使用，只需要給前兩個(gè)必填的即可，后面的參數(shù)都是可選的。
我們逐一的來(lái)看各個(gè)參數(shù)
- image：所需要寫(xiě)文字的圖片
- text：需要寫(xiě)的文字
- size：(選填)字體大小，默認(rèn)為12px
- x：(選填)文字的最左邊距離圖片最左邊的距離，默認(rèn)為0
- y：(選填)文字的基線(xiàn)到圖片的最上邊的距離，默認(rèn)是12px，也就是文字的高度。(基線(xiàn)你就當(dāng)做文字最下面好了)
- color：(選填)字體顏色，Color對(duì)象，需要new Color一下，默認(rèn)為黑色。
- font：(選填)字體的完整路徑，默認(rèn)Sans font.
- angle：(選填)文字旋轉(zhuǎn)角度，取值范圍為0-359，默認(rèn)為0，也就是不旋轉(zhuǎn)
我們隨便找個(gè)文字試試
use Grafika\Grafika; use Grafika\Color; $editor = Grafika::createEditor(); $editor->open($image , 'yanying-smaller.jpg'); $editor->text($image ,'yanying',30,200,100,new olor("#000000"),'',45); $editor->save($image,'333/yanying-text.jpg'); 看下效果。這里說(shuō)明下，如果文字為中文，需要找一個(gè)支持中文的字體。默認(rèn)字體不支持中文，所以你寫(xiě)中文，就是都是小方框。????
