当前位置: 代码迷 >> PHP >> 利用jquery Jcrop跟 php实现截图功能
  详细解决方案

利用jquery Jcrop跟 php实现截图功能

热度:92   发布时间:2016-04-28 23:42:22.0
利用jquery Jcrop和 php实现截图功能

项目中用到了一个上传头像的功能,需要进行无刷新的图片上传,并对上传后的图片进行用户要求的截图,无刷新上传我就不说了,用的Juploader,相信大家并不陌生,重点讲一下jcron和php配置实现图片的截取的功能,好了,言归正传。首先介绍一下jcron的用法,我就不一一解释了,我们只看最经常用的到截图功能:

$(function(){				$('#cropbox').Jcrop({					aspectRatio: 1,					onSelect: updateCoords				});			});

以上是控制,对哪个图片进行截图,“cropbox”是你要截取的img对象的id,“aspectRatio”控制等比例截取,“onSelect”的值是一个方法名,在选取时调用的方法

,个参数详情解释如下:

Option NameValue TypeDescriptionDefault
aspectRatiodecimalAspect ratio of w/h (e.g. 1 for square)n/a
minSizearray [ w, h ]Minimum width/height, use 0 for unbounded dimensionn/a
maxSizearray [ w, h ]Maximum width/height, use 0 for unbounded dimensionn/a
setSelectarray [ x, y, x2, y2 ]Set an initial selection arean/a
bgColorcolor valueSet color of background container'black'
bgOpacitydecimal 0 - 1Opacity of outer image when cropping.6
选取时的回调方法

function updateCoords(c)			{				$('#x').val(c.x);				$('#y').val(c.y);				$('#w').val(c.w);				$('#h').val(c.h);			};

有了这个方法,可以在你截图是更新隐藏域中的坐标值,通过隐藏域把坐标信息传到后台。

<form action="crop.php" method="post" onsubmit="return checkCoords();">			<input type="hidden" id="x" name="x" />			<input type="hidden" id="y" name="y" />			<input type="hidden" id="w" name="w" />			<input type="hidden" id="h" name="h" />			<input type="submit" value="Crop Image" />		</form>

ok,到此,前台已经告一段落,我们看后台的php代码。

后台php主要是根据前台传递的坐标,对原图进行截取,支持jpg,png,和gif三种图片格式,当然,你可以扩展他,使他支持更多的图片格式。

class Img_shot{		private $filename;	private $ext;	private $x;	private $y;	private $x1;	private $y1;	private $width = 124;	private $height = 124;	private $jpeg_quality = 90;	/**	 * 构造器	 *	 * 	 */	public function __construct()	{		log_message('debug', "Img_shot Class Initialized");	}	/**	 * 初始化截图对象	 [email protected] filename 源文件路径全明	 [email protected] width  截图的宽	 [email protected] height  截图的高	 [email protected] x  横坐标1	 [email protected] y  纵坐标1	 [email protected] x1  横坐标1	 [email protected] y1  横坐标2	 * 	 */	public function initialize($filename,$x,$y,$x1,$y1)	{		if(file_exists($filename))		{			$this->filename = $filename;			$pathinfo = pathinfo($filename);			$this->ext = $pathinfo['extension'];		}		else		{			$e = new Exception('the file is not exists!',1050);			throw $e;		}		$this->x = $x;		$this->y = $y;			$this->x1 = $x1;			$this->y1 = $y1;		}	/**	 * 生成截图	 * 根据图片的格式,生成不同的截图	 */	public function generate_shot()	{		switch($this->ext)		{			case 'jpg':				return $this->generate_jpg();				break;			case 'png':				return $this->generate_png();				break;			case 'gif':				return $this->generate_gif();				break;			default:				return false;		}	}	/**	 * 得到生成的截图的文件名	 * 	 */	private function get_shot_name()	{		$pathinfo = pathinfo($this->filename);		$fileinfo = explode('.',$pathinfo['basename']);		$filename = $fileinfo[0] . '_small.' . $this->ext;		return $pathinfo['dirname'] . '/' .$filename;	}	/**	 * 生成jpg格式的图片	 * 	 */	private function generate_jpg()	{		$shot_name = $this->get_shot_name();		$img_r = imagecreatefromjpeg($this->filename);		$dst_r = ImageCreateTrueColor($this->width, $this->height);		imagecopyresampled($dst_r,$img_r,0,0,$this->x,$this->y,		$this->width,$this->height,$this->x1,$this->y1);		imagejpeg($dst_r,$shot_name,$this->jpeg_quality);		return $shot_name;	}	/**	 * 生成gif格式的图片	 * 	 */	private function generate_gif()	{		$shot_name = $this->get_shot_name();		$img_r = imagecreatefromgif($this->filename);		$dst_r = ImageCreateTrueColor($this->width, $this->height);		imagecopyresampled($dst_r,$img_r,0,0,$this->x,$this->y,		$this->width,$this->height,$this->x1,$this->y1);		imagegif($dst_r,$shot_name);		return $shot_name;	}	/**	 * 生成png格式的图片	 * 	 */	private function generate_png()	{		$shot_name = $this->get_shot_name();		$img_r = imagecreatefrompng($this->filename);		$dst_r = ImageCreateTrueColor($this->width, $this->height);		imagecopyresampled($dst_r,$img_r,0,0,$this->x,$this->y,		$this->width,$this->height,$this->x1,$this->y1);		imagepng($dst_r,$shot_name);		return $shot_name;	}}		

接收到前台的坐标信息后,你可以实例化该类,用来生成图片,返回生成的图片的名称,你就可以使用啦。


截完图之后:


  相关解决方案