脥錄脧帽麓婁脌鉚 · tp5文檔

# 圖像處理我們繼續前面的文件上傳部分，并調用圖像擴展類庫對上傳的圖像文件進行相關的處理和保存。 - - [安裝擴展](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179623#u5B89u88C5u6269u5C55) - [示例代碼](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179623#u793Au4F8Bu4EE3u7801) - [控制器定義](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179623#u63A7u5236u5668u5B9Au4E49) - [模板定義](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179623#u6A21u677Fu5B9Au4E49) - [示例演示](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179623#u793Au4F8Bu6F14u793A) - [讀取圖片](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179623#u8BFBu53D6u56FEu7247) - [圖片裁剪](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179623#u56FEu7247u88C1u526A) - [生成縮略圖](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179623#u751Fu6210u7F29u7565u56FE) - [圖像翻轉](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179623#u56FEu50CFu7FFBu8F6C) - [圖片旋轉](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179623#u56FEu7247u65CBu8F6C) - [添加水印](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179623#u6DFBu52A0u6C34u5370) - [文字水印](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179623#u6587u5B57u6C34u5370) - [圖片保存](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/179623#u56FEu7247u4FDDu5B58) ## 安裝擴展首先使用`Composer`安裝`ThinkPHP5`的圖像處理類庫： ``` <pre class="calibre18"> ``` composer require topthink/think-image ``` ``` ## 示例代碼本示例使用下面的示例代碼進行圖片上傳和處理。 ### 控制器定義然后修改之前創建的`Upload`控制器，添加`picture`方法如下： ``` <pre class="calibre18"> ``` <?phpnamespace app\index\controller; use think\Image; use think\Request; class Upload extends \think\Controller{ // 文件上傳表單public function index(){ return $this->fetch(); } // 圖片上傳處理public function picture(Request $request){ // 獲取表單上傳文件$file = $request->file('image'); if (true !== $this->validate(['image' => $file], ['image' => 'require|image'])) { $this->error('請選擇圖像文件'); } else { // 讀取圖片$image = Image::open($file); // 圖片處理switch ($request->param('type')) { case 1: // 圖片裁剪$image->crop(300, 300); break; case 2: // 縮略圖$image->thumb(150, 150, Image::THUMB_CENTER); break; case 3: // 垂直翻轉$image->flip(); break; case 4: // 水平翻轉$image->flip(Image::FLIP_Y); break; case 5: // 圖片旋轉$image->rotate(); break; case 6: // 圖片水印$image->water('./logo.png', Image::WATER_NORTHWEST, 50); break; case 7: // 文字水印$image->text('ThinkPHP', VENDOR_PATH . 'topthink/think-captcha/assets/ttfs/1.ttf', 20, '#ffffff'); break; } // 保存圖片（以當前時間戳）$saveName = $request->time() . '.png'; $image->save(ROOT_PATH . 'public/uploads/' . $saveName); $this->success('圖片處理完畢...', '/uploads/' . $saveName, 1); } } } ``` ``` ### 模板定義配合控制器的上傳頁面模板修改為： ``` <pre class="calibre18"> ``` <!doctype html><html><head><meta charset="UTF-8"><title>圖像上傳和處理示例</title><style>body { font-family:"Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:16px; padding:5px; }.form{ padding: 15px; font-size: 16px; }.form .text { padding: 3px; margin:2px 10px; width: 240px; height: 24px; line-height: 28px; border: 1px solid #D4D4D4; }.form select { padding: 5px; margin:2px 10px; width: 150px; height: 30px; line-height: 30px; border: 1px solid #D4D4D4; }.form .btn{ margin:6px; padding: 6px; width: 120px; font-size: 16px; border: 1px solid #D4D4D4; cursor: pointer; background:#eee; }.form .file{ margin:6px; padding: 6px; width: 220px; font-size: 16px; border: 1px solid #D4D4D4; cursor: pointer; background:#eee; }a{ color: #868686; cursor: pointer; }a:hover{ text-decoration: underline; } h2{ color: #4288ce; font-weight: 400; padding: 6px 0; margin: 6px 0 0; font-size: 28px; border-bottom: 1px solid #eee; }div{ margin:8px; }.info{ padding: 12px 0; border-bottom: 1px solid #eee; }.copyright{ margin-top: 24px; padding: 12px 0; border-top: 1px solid #eee; }</style></head><body><h2>圖像上傳和處理示例</h2><form method="post" enctype="multipart/form-data" class="form" action="{:url('picture')}"> 選擇圖像文件：<input type="file" class="file" name="image"><br/> 選擇處理類型：<select name="type"><option value="1" selected>圖片裁剪 <option value="2">生成縮略圖 <option value="3">垂直翻轉 <option value="4">水平翻轉 <option value="5">圖片旋轉 <option value="6">添加圖片水印 <option value="7">添加文字水印 </select><br/><input type="submit" class="btn" value=" 提交 "></form><div class="copyright"><a title="官方網站" href="http://www.thinkphp.cn">ThinkPHP</a><span>V5</span><span>{ 十年磨一劍-為API開發設計的高性能框架 }</span></div></body></html> ``` ``` ### 示例演示訪問下面的URL地址： ``` <pre class="calibre18"> ``` http: //tp5.com/index/upload ``` ``` 頁面顯示： ![](https://img.kancloud.cn/65/98/65989118aa274ef6a62231f73d1daa52_665x333.png) 這里僅能上傳`png`和`jpg`類型的圖像文件，沒有選擇或者選擇其他類型的文件都會提示： ![](https://img.kancloud.cn/ca/b2/cab260060af76f5477a06e0e49a6c4ae_494x273.png) 本節示例選擇上傳的圖片文件為： ![](https://img.kancloud.cn/8e/8a/8e8aafeba7ba3bc7c98af1b3f45b3fc5_768x432.png) 點擊上傳并提交后，頁面顯示： ![](https://img.kancloud.cn/d0/39/d03994a4b28c28853e4d132382903d79_448x267.png) 之后會顯示處理之后的圖片： ![](https://img.kancloud.cn/59/90/5990d2058292213b866ea0c64da75820_300x300.png) 下面來具體講下各種圖片處理操作的用法。 ## 讀取圖片 `think\Image`類提供了`open`方法打開圖片文件 ``` <pre class="calibre18"> ``` // 獲取上傳文件$file = $request->file('image'); // 讀取圖片文件$image = Image::open($file); ``` ``` 這里的`$file`是一個`\think\File`對象（其實可以支持任何`SplFileInfo`或者子對象），也可以直接傳入一個圖片文件地址： ``` <pre class="calibre18"> ``` // 讀取圖片文件$image = Image::open('./logo.png'); ``` ``` > `open`方法不支持讀取遠程圖片使用open方法讀取圖片文件后，可以讀取圖片相關信息： ``` <pre class="calibre18"> ``` // 返回圖片的寬度$width = $image->width(); // 返回圖片的高度$height = $image->height(); // 返回圖片的類型$type = $image->type(); // 返回圖片的mime類型$mime = $image->mime(); // 返回圖片的尺寸數組 [ 圖片寬度 , 圖片高度 ]$size = $image->size(); ``` ``` ## 圖片裁剪圖片剪裁使用`crop`方法，用法： > #### crop(剪裁寬度,剪裁高度,X坐標（默認0）,Y坐標（默認0）) 示例中圖片剪裁的主要代碼為 ``` <pre class="calibre18"> ``` $image->crop(300, 300); ``` ``` 表示從左上角開始剪裁寬高都是300的圖片，如果需要改變剪裁的坐標位置，可以用： ``` <pre class="calibre18"> ``` $image->crop(300, 300, 100, 50); ``` ``` 最終的效果變成： ![](https://img.kancloud.cn/e6/22/e622a5167b5a485363cdc4ec81cf56d4_300x300.png) ## 生成縮略圖生成圖片縮略圖使用`thumb`方法，用法： > #### thumb(最大寬度,最大高度,裁剪類型) 縮略圖剪裁類型包括如下：剪裁類型（常量=值）描述 Image::THUMB\_SCALING = 1 等比例縮放（默認類型） Image::THUMB\_FILLED = 2 縮放后填充 Image::THUMB\_CENTER = 3 居中裁剪 Image::THUMB\_NORTHWEST = 4 左上角裁剪 Image::THUMB\_SOUTHEAST = 5 右下角裁剪 Image::THUMB\_FIXED = 6 固定尺寸縮放示例代碼中的縮略圖效果如圖： ![](https://img.kancloud.cn/0a/80/0a803db66f271b201a35e155444fc7b8_150x150.png) ## 圖像翻轉圖片翻轉使用`flip`方法，用法如下： > #### flip(翻轉方式) 翻轉方式常量值垂直翻轉 Image::FLIP\_X=1 水平翻轉 Image::FLIP\_Y=2垂直翻轉效果： ![](https://img.kancloud.cn/04/2f/042f5a4678a5fc5d1764cc10ac594cac_768x432.png) 水平翻轉效果： ![](https://img.kancloud.cn/1f/ae/1fae8deeda771e9625ac6f79ae06be10_768x432.png) ## 圖片旋轉圖片翻轉使用`rotate`方法，用法如下： > #### rotate(順時針旋轉的度數) 示例采用90旋轉的效果如圖： ![](https://img.kancloud.cn/80/ee/80eecc9d9e39ed7adf702a3c08a14d36_432x768.png) ## 添加水印使用`water`方法添加圖片水印 > #### water(水印圖片,水印位置常量（默認右下角）,水印透明度（默認100）) 水印位置常量如下：水印位置常量值左上角 Image::WATER\_NORTHWEST=1 上居中 Image::WATER\_NORTH=2 右上角 Image::WATER\_NORTHEAST=3 左居中 Image::WATER\_WEST=4 居中 Image::WATER\_CENTER=5 右居中 Image::WATER\_EAST=6 左下角 Image::WATER\_SOUTHWEST=7 下居中 Image::WATER\_SOUTH=8 右下角 Image::WATER\_SOUTHEAST=9示例代碼： ``` <pre class="calibre18"> ``` $image->water('./logo.png', Image::WATER_NORTHWEST, 50); ``` ``` 示例水印效果如圖： ![](https://img.kancloud.cn/f7/ea/f7ea5774036c5921ef0490683191af78_768x432.png) > 為了示例效果，在操作之前，請把下面的logo圖片保存到public目錄下面。 > > ![](https://img.kancloud.cn/66/bf/66bfc4f1dec8278b649c7968db986c8d_80x80.png) ## 文字水印使用`text`方法給圖片添加文字（水印） > #### text(水印文字,字體文件路徑,文字大小,文字顏色,文字寫入位置,偏移量,文字傾斜角度) 前面四個參數必須，顏色默認為 #000000 文字位置常量和水印位置一樣。示例代碼 ``` <pre class="calibre18"> ``` $image->text('ThinkPHP', VENDOR_PATH . 'topthink/think-captcha/assets/ttfs/1.ttf', 20, '#ffffff'); ``` ``` ![](https://img.kancloud.cn/24/7b/247bf4387c97f84f81f011f66baba279_768x432.png) > 為了配合演示，我們使用了驗證碼類庫中的字體素材 ## 圖片保存前面所有的操作都是對圖片進行相關的處理，最后一步就是需要把處理過的圖片文件保存下來。這就需要調用`save`方法進行圖片的保存操作 > #### save(保存文件名,圖像類型,圖像質量,隔行掃描) 示例中使用當前時間戳作為文件名保存圖片文件，代碼： ``` <pre class="calibre18"> ``` // 保存圖片（以當前時間戳）$saveName = $request->time() . '.png'; $image->save(ROOT_PATH . 'public/uploads/' . $saveName); ``` ``` 默認圖片保存的質量是`80`，如果希望采用最高的質量保存，可以使用下面的代碼： ``` <pre class="calibre18"> ``` // 保存圖片（以當前時間戳）$saveName = $request->time() . '.png'; // 采用最高質量保存圖片$image->save(ROOT_PATH . 'public/uploads/' . $saveName,'png',100); ``` ``` > save方法的第四個參數僅針對jpg格式的圖像類型。