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

程序员文章站 2022-06-17 20:18:18

...

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

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

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

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

，个参数详情解释如下：

Option Name	Value Type	Description	Default
aspectRatio	decimal	Aspect ratio of w/h (e.g. 1 for square)	n/a
minSize	array [ w, h ]	Minimum width/height, use 0 for unbounded dimension	n/a
maxSize	array [ w, h ]	Maximum width/height, use 0 for unbounded dimension	n/a
setSelect	array [ x, y, x2, y2 ]	Set an initial selection area	n/a
bgColor	color value	Set color of background container	'black'
bgOpacity	decimal 0 - 1	Opacity 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);			};

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

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;	}}

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

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

截完图之后：

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

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

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