注意本篇文適用于：

零基礎小白想要了解一下php開發或者網站開發的同學（但是注意，零基礎你可以通過本篇完成，但是由于是速成會有一些難度，本篇內容由于是速成，有一些額外知識點，不會可以來問我1_bit）
學過php的同學，但是懵懵懂懂做不出東西的
有一些web開發經驗的同學，可能看一下就會了

demo 效果演示如下：
請添加圖片描述

一、環境

語言：php7.+、html
服務器：華為云
環境：lnmp1.7

1.1 為什么選擇php

那是因為php有一個非常棒的庫 Grafika，可以讓你進行圖片合成、裁剪、九宮格裁剪、gif壓縮等；那些很多網上的圖片工具箱功能都可以實現，甚至可以對比相似度。

Grafika 可以到官網下載：https://kosinix.github.io/grafika/，最后解壓到目錄中即可，搞不懂的到文末找我拿或者問我怎么用都行。

Grafika還提供了各種濾鏡，美化圖片。

1.2 為什么選擇華為云

怎么說呢這個，有以下幾個點：
1.畢竟這一篇是初級文，作為新手選擇我比較懶，在華為云中直接可以介紹當前服務器的性能偏向，挺好的，對于新手來說直接看自己的選擇就可以了，你不信你看下面這個（因為買這個服務器幾個月之后發現我虧錢了，不信你們接著往下看）：

第二點還有啥？當然是價格了，對于其他服務器來說華為云是比較優惠的，我就買了一個通用的HECS才60塊錢一個月，拿起來做測試非常方便：

我不是說是60的嗎，怎么是28塊錢了？
這是單個服務器的價錢，進去后還會有其他付費的：

好了，你們以為這價錢夠便宜了？！不不，事情還沒完，因為我這篇文章寫了一直沒發，結果現在進去發現 35 可以買一年！原來我之前買虧了呀…
在這里插入圖片描述
這是活動界面：

給你們鏈接：點這里進活動頁

趕緊去買吧，不然都被搶完了。

最后購買之后重置密碼：

接下來使用putty登錄到服務器，點擊open：

在這里插入圖片描述

接著輸入帳號密碼：

此時將會進入到控制臺：

接下來使用以下命令安裝php環境：

wget http://soft.vpser.net/lnmp/lnmp1.7.tar.gz -cO lnmp1.7.tar.gz && tar zxf lnmp1.7.tar.gz && cd lnmp1.7 && ./install.sh lnmp

復制確認后將會自動開始安裝，安裝完成后將會出現如下內容：
在這里插入圖片描述
安裝完畢后 enjoy it：

此時php是默認不報錯的，咱們找到 php.ini，將 display_errors 改成 On 開啟報錯：

此時還需要開啟一些權限，否者在進行一些操作時會提示 “Permission denied”。

二、php 入門

注意：以下知識點不代表所有 php 知識點，該知識點只基本出現于示例所需。

2.1 php 基本

php 以 <?php 開始？> 結束，意思是 php 代碼需要寫在這一堆符號之內：

<?phpphp 代碼寫在這
?>

2.2 輸出

php 語言輸出很簡單，只需要 echo 后面接一段字符串就ok。在php 中字符串使用單引號或者雙引號標記，但是單引號和雙引號有區別，基礎過一遍知識點的話就不在贅述不同。
例如字符串可以寫成 “這是個字符串” 或 ‘這是個字符串’。代碼示例如下：

<?php
echo "這是個字符串";
?>

2.3 變量

php變量很簡單，只需要使用一個美元符 “$” 后面寫變量名即可創建一個變量，例如：

$a=10;

同樣，變量也可以進行相加減：

$a=10;
$a=$a+10;

在php 中字符串連接使用“.”,例如：

$a="你好";
$b="小明";
echo $a.$b;

此時將會顯示 “你好小明”。

2.4 判斷

在php 中 if 語句表示判斷，例如如下示例：

$a="你好";
$b="小明";
if($a=="小明"){echo '變量a為小明';
}

同樣 php 支持 else 與 elseif 語句，如下所示：

$a="你好";
$b="小明";
if($a=="小明"){echo '變量a為小明';
}elseif($a=="小綠"){echo '變量a為小綠';
}else{echo '我也不懂變量a是什么';
}

2.5 數組

php 中的數組使用 array 創建，例如：

$a=array();

php中的數組賦值也很簡單，可以在創建的時候給予：

$a=array('小明',10,'小綠');

也可以使用下標給予：

$a=array();
$a[0]='小明';
$a[1]='小綠';

2.6 循環

php 中循環一般可以使用 for 或者 foreach。
for 可以給予一個循環控制變量控制，例如如下：

$a;
for($a=0;$a<10;$a++){echo $a;
}

以上就是一個基本 for 循環的代碼示例。創建變量 a 后并沒有賦值，隨后使用 for 循環在括號內賦值為0，使用分號進行間隔，隨后一個條件是變量a小于10，接著是 a++。此循環只有滿足條件 a不大于10才能循環，每次循環變量a都加1，每次循環內容為輸出顯示變量 a 的內容。

第二個循環是 foreach，foreach 一般用于遍歷，例如有一個數組：

$a=array('小明',10,'小綠');
foreach($a as $v){echo $v;
}

此時foreach括號內的內容表示從數組a 中進行取值，每次使用 foreach 進行變量，第一次取值到變量v 為小明，接下來為10，組后為小綠，并且將他們進行輸出顯示。

2.7 類的使用方法

在本節中我們將會使用兩個冒號“::”創建一個對象，這是一種創建對應類對象的方式，在此處不贅述過多內容，例如咱們接下來將會看到的代碼：

$editor = Grafika::createEditor();

在這里你可以理解成 Grafika::createEditor() 是一個美化圖片的工具箱，在這里這代碼表示創建，創建完畢后給予到 $editor 進行存著，這樣 $editor 就等于是一個工具箱了。

接下來這個工具箱有很多功能，例如像讓圖片壓縮，那么圖片壓縮在日常中用軟件需要點擊一個按鈕，在此咱們只需要將這個功能按鈕變成代碼，這個功能有一個名稱，例如如下代碼：

$editor->resizeFit($image , $_GET['width'] , $_GET['height']);

以上代碼中 resizeFit 就是這個功能，$editor 就是工具箱，-> 就等于是你按下這個按鈕的動作；我們還可以發現在 resizeFit 之后的圓括號中還有一些內容 $image , $_GET['width'] , $_GET['height']，這些內容指的就會參數，例如在這里 $image 就表示你要操作的那張圖片， $_GET['width'] 就是需要操作（變換）的寬度，$_GET['height']則是高度。

三、實現流程

3.1、首頁制作

首先我們在賦值 grafika 第三方到目錄 /home/wwwroot/default 目錄之下：

其中 wwwroot 目錄就是 lnmp php 環境安裝包默認的目錄。我們在 grafika 目錄下新建一個文件名為 index.php：

接著在 index.php 中編寫 html 代碼作為首頁。由于首頁都是 html 內容，在此不再過渡贅述，只簡要講解。想學 html 的后期我再寫相關文章即可。

首先在 index.php 中編寫一個 head 頭：

<head><style type="text/css"> .title{ width:100%; height:80px; line-height:80px;text-align:center;background: -webkit-linear-gradient(top, #FF99CC, #CCFF66);} .font{font-color:#FFFFFF;font-size:20px;}</style> 
</head>

這個頭中有一個 style 節點，在 style 中主要有兩個內容，一個是定義了一個 class 為 title，給title 類編寫了一個漸變色樣式，接著后面 font 類，font 類主要是設置字體寬高和字體顏色。

接著我們看我們的 body 部分：

<body><script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><div class="title"><h1 style="color:#FFFFFF;">圖片處理工具箱</h1></div>
</body>

首先引入一個 jq，因為接下來需要使用 ajax 在無刷新時上傳文件。然后創建了一個 div，使用了 title 類，在這個 div 下，使用了一個 h1，作為頭，此時這個頁面如下：

接下來咱們創建一個 div，使其寬度占滿整個屏幕，在這個 div 中創建一個 form 表單，用于選擇需要上傳的圖片：

<div style="width=100%"><form enctype="multipart/form-data"><input type="file" name="file" ></form><button onclick="upload()">提交</button>
</div>

以上 form 中并不使用 submit 做為提交，在此使用了一個 button，對應一個 JavaScript（以下簡稱js）函數 upload，這個函數我們之后再進行編寫。

接著我們創建接下來我們需要的功能操作UI。因為我們的操作大多數需要用戶指定寬高，這個時候我們需要兩個 input 作為輸入，一個作為寬一個作為高，并且需要使用一個 button 作為確認按鈕，并且將這3個元素使用一個 div 進行包裹，放到另一個 div 中；接著給包裹著3個元素的 div 設定style，并且使用左浮動，使其呈一行顯示：

<div style="width:100%;"><div style="width:19%;float:left;margin-left:1%"><input placeholder="寬" style="width:100%;" id="resizeFit_Width"><input placeholder="高" style="width:100%;" id="resizeFit_Height"><button style="width:100%;" onclick="resizeFit()">等比縮放</button></div>
</div>

接下來再添加幾個 div ，使其對應其功能，這部分完整代碼如下：

<div style="width:100%;"><div style="width:19%;float:left;margin-left:1%"><input placeholder="寬" style="width:100%;" id="resizeFit_Width"><input placeholder="高" style="width:100%;" id="resizeFit_Height"><button style="width:100%;" onclick="resizeFit()">等比縮放</button></div><div style="width:19%;float:left;margin-left:1%"><input placeholder="寬" style="width:100%;" id="resizeExact_Width"><input placeholder="高" style="width:100%;" id="resizeExact_Height"><button style="width:100%;" onclick="resizeExact()">固定縮放</button></div><div style="width:19%;float:left;margin-left:1%"><input placeholder="寬" style="width:100%;" id="resizeFill_Width"><input placeholder="高" style="width:100%;" id="resizeFill_Height"><button style="width:100%;" onclick="resizeFill()">居中剪裁</button></div><div style="width:19%;float:left;margin-left:1%"><input placeholder="寬" style="width:100%;" id="resizeFill_ExactWidth"><input placeholder="高" style="width:100%;" id="resizeFill_ExactHeight"><button style="width:100%;" onclick="Grids()">九宮格裁剪</button></div><div style="width:19%;float:left;margin-left:1%"><form enctype="multipart/form-data" action="/grafika/compressedgif.php" method="POST"><input style="width:100%;" type="file" name="file" ><input placeholder="寬" style="width:100%;" name="Width"><input placeholder="高" style="width:100%;" name="Height"><input type="submit" value="gif壓縮"></form></div>
</div>
<div class="picDis"><img src="" alt="">
</div>

接下來編寫所需的 js 函數，首先從 upload 函數開始：

var imgPath=''
//上傳
function upload (){var formData = new FormData($('form')[0]);formData.append('file',$(':file')[0].files[0]);$.ajax({url:'update.php',type: 'POST',data: formData,contentType: false,processData: false,success:function(data){console.log(data)var srcPath = data;console.log();$('.pic img').attr('src', '..'+srcPath);imgPath=srcPath}})
}

該函數使用了一個 ajax，響應當前目錄下的 update.php（打錯了英文，不過不要在意），該函數主要是上傳對應的圖片到服務器之中。

該部分的其他 js 代碼如下，在此不再過多贅述，想學的可以到文章末找我提想學js，人多我后面就開教程了。
該部分的其他 js 代碼如下：

<script>var imgPath=''//gif壓縮function compressedGif(){if(imgPath==''){alert("請上傳圖片");return;}window.open('/grafika/compressedgif.php');}//九宮格裁剪function Grids(){if(imgPath==''){alert("請上傳圖片");return;}var resizeFill_ExactWidth=document.getElementById('resizeFill_ExactWidth');var resizeFill_ExactHeight=document.getElementById('resizeFill_ExactHeight');var parameter='?width='+resizeFill_ExactWidth.value+'&height='+resizeFill_ExactHeight.valuewindow.open('/grafika/grids.php'+parameter);}//居中剪裁function resizeFill(){if(imgPath==''){alert("請上傳圖片");return;}var resizeFill_Width=document.getElementById('resizeFill_Width');var resizeFill_Height=document.getElementById('resizeFill_Height');var parameter='?width='+resizeFill_Width.value+'&height='+resizeFill_Height.valuewindow.open('/grafika/resizefill.php'+parameter);}//固定縮放function resizeExact(){if(imgPath==''){alert("請上傳圖片");return;}var resizeExact_Width=document.getElementById('resizeExact_Width');var resizeExact_Height=document.getElementById('resizeExact_Height');var parameter='?width='+resizeExact_Width.value+'&height='+resizeExact_Height.valuewindow.open('/grafika/resizeexact.php'+parameter);}//等比例縮放function resizeFit(){if(imgPath==''){alert("請上傳圖片");return;}var resizeFit_Width=document.getElementById('resizeFit_Width');var resizeFit_Height=document.getElementById('resizeFit_Height');var parameter='?width='+resizeFit_Width.value+'&height='+resizeFit_Height.valuewindow.open('/grafika/resizefit.php'+parameter);}//上傳function upload (){var formData = new FormData($('form')[0]);formData.append('file',$(':file')[0].files[0]);$.ajax({url:'update.php',type: 'POST',data: formData,contentType: false,processData: false,success:function(data){console.log(data)var srcPath = data;console.log();$('.pic img').attr('src', '..'+srcPath);imgPath=srcPath}})}</script>

這樣一個首頁的代碼就完成了。在此我們得知我們需要編寫 update.php、resizefit.php、resizefill.php、resizeexact.php、grids.php 這5個 php 代碼。

3.2 update.php 上傳編寫

編寫 update.php 文件代碼很簡單，首先咱們要開啟 seesion。
為啥要開啟 seesion 呢？這是因為保存了seesion 后我們就知道了用戶上傳的圖片位置，之后用戶直接輸入寬高即可進行裁剪等操作。代碼如下：

session_start();

接著咱們得給這個圖片一個名字。那么在起名的時候我們需要防止重名，那如何防止重名呢？咱們可以使用時間戳，時間戳就是當前時間從一個起始時間節點的描述，當然這樣做并不是很嚴謹，不過咱們初級文就簡單為主就這樣就ok了。代碼如下：

$filename=time().$_FILES["file"]["name"];

$filename 是我們的變量名，time() 是獲得時間戳，并且在此又加上了本來上傳文件的 filename 也就是文件名，這個時候就組成了當前時間戳+文件名的組合，這樣就初步完成了這個防止重名的操作。

接下來我們的下一步要給當前圖片的一個保存位置，這個也較為簡單，直接路徑加文件名就好（記得在此創建一個文件夾名稱為 img）：

$path ="./img/".$filename;

接下來咱們可以拼接當前頁面的訪問 url（當然只是用作返回，用處說大不大）：

$fileurl='/grafika/img/'.$filename;

接著使用 move_uploaded_file 方法使當場上傳的文件存入到 $path 這個路徑下：

move_uploaded_file($_FILES["file"]["tmp_name"],$path);

再使用 seesion 存儲到當前圖片：

$_SESSION['path']=$path;

接著使用 echo 進行輸出，就等于是當前 php 文件返回的文本內容：

echo $fileurl;

這部分的完整代碼如下：

<?php
session_start();$filename=time().$_FILES["file"]["name"];
$path ="./img/".$filename;
$fileurl='/grafika/img/'.$filename;
move_uploaded_file($_FILES["file"]["tmp_name"],$path);
$_SESSION['path']=$path;
echo $fileurl;

超簡單吧，我們繼續做下一個吧。

3.3 resizefit.php 等比例縮放編寫

等比例縮放編寫很簡單，首先 require_once 和 src 目錄下的 autoloader.php 文件，隨后 use Grafika\Grafika 即可引入Grafika ：

require_once 'src/autoloader.php';
use Grafika\Grafika;

接著開啟seesion：

session_start();

隨后創建一個 Grafika 的 createEditor：

$editor = Grafika::createEditor();

接下來使用 Grafika 打開一張圖片，由于之前上傳已經把一張圖片存入到 seesion 之中，那么接下來只需要使用創建的 $editor 對象使用 open 方法傳入一個變量與一個圖片路徑即可打開：

$editor->open($image , $_SESSION['path']);

接著使用 resizeFit 方法進行等比例縮放，傳入圖片以及縮放長寬進行比例縮放：

$editor->resizeFit($image , $_GET['width'] , $_GET['height']);

接著組合一個路徑作為存儲路徑：

$newPath='./img/'.time().'.jpg';

最后使用 save 方法傳入編輯后的圖片與保存路徑即可保存：

$editor->save($image , $newPath);

接著直接輸出即可：

echo '<img src="'.$newPath.'" />';

此部分完整代碼如下：

<?php
require_once 'src/autoloader.php';
use Grafika\Grafika;
session_start();$editor = Grafika::createEditor();
$editor->open($image , $_SESSION['path']); 
$editor->resizeFit($image , $_GET['width'] , $_GET['height']);
$newPath='./img/'.time().'.jpg';
$editor->save($image , $newPath);
echo '<img src="'.$newPath.'" />';

3.4 resizefill.php 居中剪裁編寫

居中裁剪也非常簡單，咱們直接看代碼：

<?php
require_once 'src/autoloader.php';
use Grafika\Grafika;
session_start();$editor = Grafika::createEditor();
$editor->open($image , $_SESSION['path']); // 打開yanying.jpg并且存放到$image1
$editor->resizeFill($image , $_GET['width'] , $_GET['height']);
$newPath='./img/'.time().'.jpg';
$editor->save($image , $newPath);
echo '<img src="'.$newPath.'" />';

該部分代碼與之前的等比裁剪類似，只是更改了一個方法 resizeFill。

3.5 resizeexact.php 固定縮放編寫

固定縮放也類似，更改方法為 resizeExact 即可：

<?php
require_once 'src/autoloader.php';
use Grafika\Grafika;
session_start();$editor = Grafika::createEditor();
$editor->open($image , $_SESSION['path']); // 打開yanying.jpg并且存放到$image1
$editor->resizeExact($image , $_GET['width'] , $_GET['height']);
$newPath='./img/'.time().'.jpg';
$editor->save($image , $newPath);
echo '<img src="'.$newPath.'" />';

3.6 grids.php 固定縮放編寫

九宮格裁剪不同，九宮格裁剪需要在使用 crop 方法時傳入位置的不同參數：'top-left','top-center','top-right','center-left','center','center-right','bottom-left','bottom-center','bottom-right'，這些參數指定裁剪位置，指定裁剪位置大小需要傳入寬高。
咱們可以將位置參數使用一個數組進行存儲，隨后使用一個 for 循環循環9次即可：

<?php
require_once 'src/autoloader.php';
use Grafika\Grafika;
session_start();$editor = Grafika::createEditor();$i=0;
$imgs=array();
$location=array('top-left','top-center','top-right','center-left','center','center-right','bottom-left','bottom-center','bottom-right');
for(;$i<9;$i++){$editor->open($image , $_SESSION['path']);$editor->crop( $image, $_GET['width'] , $_GET['height'], $location[$i]);$newPath='./img/'.time().$i.'.jpg';$editor->save( $image, $newPath );$editor->free( $image );$imgs[$i]=$newPath;
}

在循環時，每次打開 seesion 中存儲的圖片信息，隨后使用 crop 進行固定位置裁剪， $location[$i] 則表示傳入的裁剪位置，隨后通過變量 i 的不同值創建不同的圖片，并且使用 imgs 數組存儲值。

最后使用 imgs 循環輸出即可，為了保證實現九宮格效果，可以直接使圖片占據 32% 寬度，距離左邊1%寬度即可：

foreach($imgs as $v){echo '<img style="width:30%;margin-left:1%;margin-top:1%" src="'.$v.'" />'; 
}

3. compressedgif.php gif圖片壓縮編寫

gif 圖片壓縮也非常簡單，直接接收一個圖片值，保存到服務器本地后進行操作，操作完畢后使用 resizeFit 方法進行裁剪即可：

<?php
require_once 'src/autoloader.php';
use Grafika\Grafika;
session_start();$filename=time().$_FILES["file"]["name"];
$path ="./img/".$filename;
$fileurl='/grafika/img/'.$filename;
move_uploaded_file($_FILES["file"]["tmp_name"],$path);$editor = Grafika::createEditor();
$editor->open( $image, $path );
$editor->resizeFit( $image, $_POST['Width'],  $_POST['Height'] );
$newPath='./img/'.time().'.gif';
$editor->save( $image, $newPath);echo '<img src="'.$newPath.'" />';