jquery Jcropとphpを使用してスクリーンショット機能を実装する

jquery Jcrop と php を使用してスクリーンショット機能を実装します

このプロジェクトでは、更新せずに写真をアップロードする必要があり、ユーザーの要求に応じてアップロードされた写真のスクリーンショットを撮る必要があります。ここでは、Juploader についてはよく知っていると思いますが、画像インターセプトを実現するための jcron と php の設定に焦点を当てます。まず、jcron の使用法を紹介します。1 つずつの説明は省略します。最もよく使用されるスクリーンショット機能だけを見てみましょう。

<span style="font-size: 18px; ">$(function(){


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


			});</span>

上記は、どの画像をスクリーンショットするかを制御します。「cropbox」は、インターセプトする img オブジェクトの ID です。「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

选取时的回调方法

<span style="font-size:18px;">function updateCoords(c)
			{
				$('#x').val(c.x);
				$('#y').val(c.y);
				$('#w').val(c.w);
				$('#h').val(c.h);
			};</span>

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

<span style="font-size:18px;"><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></span>

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

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

<span style="font-size:18px;">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;
	}
}		</span>

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

截完图之后：