欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

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

程序员文章站 2022-06-14 13:25:31
...
利用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");
	}
	/**
	 * 初始化截图对象
	 *@param filename 源文件路径全明
	 *@param width  截图的宽
	 *@param height  截图的高
	 *@param x  横坐标1
	 *@param y  纵坐标1
	 *@param x1  横坐标1
	 *@param 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实现截图功能

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

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

相关文章

相关视频