脥录脧帽麓娄脌铆 · tp5文档

# 图像处理我们继续前面的文件上传部分，并调用图像扩展类库对上传的图像文件进行相关的处理和保存。 - - [安装扩展](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179623#u5B89u88C5u6269u5C55) - [示例代码](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179623#u793Au4F8Bu4EE3u7801) - [控制器定义](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179623#u63A7u5236u5668u5B9Au4E49) - [模板定义](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179623#u6A21u677Fu5B9Au4E49) - [示例演示](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179623#u793Au4F8Bu6F14u793A) - [读取图片](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179623#u8BFBu53D6u56FEu7247) - [图片裁剪](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179623#u56FEu7247u88C1u526A) - [生成缩略图](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179623#u751Fu6210u7F29u7565u56FE) - [图像翻转](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179623#u56FEu50CFu7FFBu8F6C) - [图片旋转](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179623#u56FEu7247u65CBu8F6C) - [添加水印](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179623#u6DFBu52A0u6C34u5370) - [文字水印](http://ihavenolimitations.xyz/thinkphp/thinkphp5_quickstart/179623#u6587u5B57u6C34u5370) - [图片保存](http://ihavenolimitations.xyz/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格式的图像类型。