Screenshot using jqueryJcrop and php

Source: Internet
Author: User
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... syntaxHighlighter. all ();

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]
$ (Function (){
 
 
$ ('# Cropbox'). Jcrop ({
AspectRatio: 1,
OnSelect: updateCoords
});
 
 
});

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?
Function updateCoords (c)
{
$ ('# X'). val (c. x );
$ ('# Y'). val (c. y );
$ ('# W'). val (c. w );
$ ('# H'). val (c. h );
};

With this method, you can update the coordinates in the hidden domain and upload the coordinates to the background through the hidden domain.
[Html]
 

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.