21CTO社区导读：本文介绍的是缩略图的处理。图片剪切是网站中常见的处理。用户上传图片后，需要根据不同的设备，产品UI显示不同尺寸的缩略图。

概述

各位好，缩略图是什么？缩略图就是大图缩小的图（废话），也不是那万恶的马塞克。用了它可以使你的网站应用达到以下目标：

1、下载速度更快，响应速度高。
2、节省用户流量。Web网站为了清晰度可以使用稍大的图片，APP中大图实际上是吃掉用户流量和电池的老虎
3、对于一些开发的不够好的APP，图片占用内存过大，容易crash。等等好处。

那么，缩略图使用在哪些场景？如下：

1、图片正好适合固定高度和宽度的容器中，不要留下空白（允许为兼容增大尺寸）
2、以合适的分辨率显示（不用CSS或HTML限制长宽高，或者放大图像）
3、图像不变形、失真，并保持图片显示之比例。
 

缩放&裁剪图片的工具&技术

在LNMP环境下，可以使用GD2来处理图片。GD2是内置在PHP中内置的库，不需要另行安装，在php.ini中打开其配置即可。

另外，PHP也可以使用imagegick这样一个外部工具来处理图像。imagegick是个功能强大的图像处理工具，利用它，我们甚至可以开发出Web下的photoshop。

本文介绍在Codeigniter框架中，它提供了较完整的图像处理库。
 

图片缩略配置

下面介绍的是一个完整上传场景，它会把一张图片，生成一个缩略图，宽高为50*50。在本例中使用gd2库处理。请看如下代码：
 

$config['image_library']= 'gd2';

$config['source_image']= './uploads/'.$imgName.".jpg";

$config['new_image']= './uploads/'.$imgName."_new.jpeg";

$config['create_thumb']= TRUE;

$config['maintain_ratio']= TRUE;

$config['width'] =50;

$config['height'] =50;

接下来需要引用image_libs库。代码如下：

$this->load->library('image_lib',$config);

接下来调用resize方法来缩放图片。如下：

// resize image

$this->image_lib->resize();

// handle if thereis any problem

if ( !$this->image_lib->resize()){

echo$this->image_lib->display_errors();

}

resize()方法会按我们指定的文件夹的图片进行缩放。可以使用$this->image_lib->display_errors()来跟踪错误，发现问题后再进行处理。如下代码：

function image_resize($img_name) {

$img_path = realpath("img")."imagesuploaded".$img_name.".jpeg";

// 配置

$config['image_library'] = 'gd2';

$config['source_image'] ='./img/images/uploaded/'.$img_name.".jpeg";

$config['new_image'] ='./img/images/uploaded/'.$img_name."_new.jpeg";

$config['create_thumb'] = TRUE;

$config['maintain_ratio'] = TRUE;

$config['quality'] = "100%"; //图片精度

$config['width'] = 50; //图片宽度

$config['height'] = 50; //图片高度

$this->load->library('image_lib',$config);

// 图片缩放

$this->image_lib->resize();

// 处理错误信息

if ( !$this->image_lib->resize()){

echo$this->image_lib->display_errors();

}

}

 

图片处理实例

接下我们使用Codeigniter处理上传和生成缩略图片。如下完整方法：

function do_upload() {

$upload_config = array(

'upload_path' => realpath('assets/'), //图片路径

'allowed_types' =>'gif|jpg|png', //图片格式

'max_size' => '30000', //图片尺寸

);

$this->upload->initialize($upload_config );

//处理上传的文件数组

foreach($_FILES['userfile'] as$key=>$val) {

$i = 1;

foreach($val as $v) {

$field_name ="file_".$i;

$_FILES[$field_name][$key] =$v;

$i++;

}

}

unset($_FILES['userfile']);

//两个数组，分别保存错误和上传成功的信息

$error = array();

$success = array();

// 处理上传

foreach($_FILES as $field_name =>$file){

if ( !$this->upload->do_upload($field_name)) {

//如果上传失败

$error['upload'] =$this->upload->display_errors();

}else{

//取得上传成功的数据，可此数组放在数据库内

$upload_data =$this->upload->data();

// 图片缩放配置

$resize_config = array(

// 图片源路径，如 "/var/uploads /image.jpeg"

'source_image' => $upload_data['full_path'],

// 缩略图路径 "/var/uploads/thumb/"+ "thumb_" + "image.jpg

// 也可以使用'create_thumbs' => true 选项

'new_image' =>$upload_data['file_path'].'thumb_'.$upload_data['file_name'],

'width' => 200,

'height' => 200

);

$this->image_lib->initialize($resize_config);

if ( ! $this->image_lib->resize()){

// 处理错误

$error['resize'] =$this->image_lib->display_errors();

} else {

//把上传后的数据放在数组中

$success = $upload_data;

}

}

}

//检查错误

if(count($error > 0)) {

$data['error'] = $error;

} else{

$data['success'] = $upload_data;

}

$this->load->view('upload',$data);

}

}

以上我们使用GD2处理和缩放图片，以及生成缩略图。以下使用imageGick来处理图片。

使用ImageGick

使用ImageGick，也可不使用任何框架。我们可以使用如下原生PHP代码，如下：

<?php

$thumbnail= new Imagick($pix);

$wid = 128;

$thumbnail->thumbnailImage( $wid, 0 );

$thumbnail->enhanceImage();

$thumbnail->sharpenimage(1,1,Imagick::CHANNEL_ALL); //$radius,$sigma, $channel);

//锐化图片，$radius为锐化角度,半径，越小越薄$sigma 为锐化标准差，越大墨越深 $channel 模糊处理，使用的图片频道

$thumb_url = $thumbnail->writeImage('thumbs/'.$thb ); //图片保存之路径

...

?>

在CodeIgniter中使用imagegick，请看如下之代码片断：

<?php

$this->load->library('image_lib');

$config['image_library']= 'ImageMagick';

$config['library_path'] = $path;

代码以下省略，与gd2的配置基本相同，各位可参考上下文。imageGick功能强大，感兴趣的同学可以再继续了解，后续我们会持续介绍 。
 

小结

 框架的好处是能够很方便，很容易的解决问题。本文主要介绍了CodeIgniter，如果使用Laravel或YII、ThinkPHP等框架等亦同样道理。
本文应社区同学特约刊登，欢迎后台发送建议，特别欢迎各位技术专家投稿和联系21CTO社区。

做对人，做对事，找对人，做好事，每天都是圣诞节。祝社区各位小伙伴节日快乐！~