Use jquery Jcrop and php to implement screenshot Function

The project uses the function of uploading an Avatar. You need to upload a picture without refreshing the new image and make user requirements for the uploaded image. I will not talk about the new upload without refreshing the new image. The Juploader is used, I believe everyone is familiar with it. Let's focus on how jcron and php are configured to intercept images. First, let's introduce the usage of jcron. I will not explain it one by one. We only look at the features most frequently used:
[Javascript]
<Span style = "font-size: 18px;" >$ (function (){
 
 
$ ('# Cropbox'). Jcrop ({
AspectRatio: 1,
OnSelect: updateCoords
});
 
 
}); </Span>

The above is the control, which image is to be taken, "cropbox" is the id of the img object you want to intercept, and "aspectRatio" is controlled to intercept proportions. The value of "onSelect" is a method name, method called at Selection
Parameters are described as follows:
Option Name Value Type Description Default
AspectRatio decimal Aspect ratio of w/h (e.g. 1 for square) n/
MinSize array [w, h] Minimum width/height, use 0 for unbounded dimension n/
MaxSize array [w, h] Maximum width/height, use 0 for unbounded dimension n/
SetSelect array [x, y, x2, y2] Set an initial selection area n/
BgColor color value Set color of background container 'black'
BgOpacity decimal 0-1 Opacity of outer image when cropping. 6 callback method selected
[Javascript] view plaincopyprint?
<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>

With this method, you can update the coordinates in the hidden domain and upload the coordinates to the background through the hidden domain.
[Html]
<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. The front-end has come to an end. Let's look at the php code in the background.
The background php mainly captures the source Image Based on the coordinates transmitted at the front end. It supports jpg, png, and gif formats. Of course, you can expand it, enable him to support more image formats.
[Php]
<Span style = "font-size: 18px;"> class Img_shot
{

Private $ filename;
Private $ ext;
Private $ x;
Private $ y;
Private $ x1;
Private $ y1;
Private $ width = 124;
Private $ width = 124;
Private $ pai_quality = 90;
/**
* Constructor
*
*
*/
Public function _ construct ()
{
Log_message ('debug', "Img_shot Class Initialized ");
}
/**
* Initialization object
* @ Param filename: Specifies the path of the source file.
* @ Param width
* @ Param height: height
* @ Param x 1
* @ Param y coordinate 1
* @ Param x1 abscissa 1
* @ Param y1 abscissa 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;
}
/**
* Generate
* Different image formats are generated.
*/
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;
}
}
/**
* Get the generated file name
*
*/
Private function get_shot_name ()
{
$ Pathinfo = pathinfo ($ this-> filename );
$ Fileinfo = explode ('.', $ pathinfo ['basename']);
$ Filename = $ fileinfo [0]. '_ small.'. $ this-> ext;
Return $ pathinfo ['dirname']. '/'. $ filename;
}
/**
* Generate jpg Images
*
*/
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-> pai_quality );
Return $ shot_name;
}
/**
* Generate gif images
*
*/
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;
}
/**
* Generate images in png format
*
*/
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>