Screenshot using jqueryJcrop and php

Using jqueryJcrop and php to implement functions the project uses the function of uploading an avatar. you need to upload a new picture without refreshing it and make user requirements for the uploaded image, I don't want to talk about refreshing uploads. I believe that the Juploader is familiar to everyone. let's focus on the jcron and php configuration to implement the image capturing function. First use jquery Jcrop and php to implement functions

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:

$(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 when selecting

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.

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.

Class Img_shot {private $ filename; private $ ext; private $ x; private $ y; private $ x1; private $ y1; private $ width = 124; private $ height = 124; private $ pai_quality = 90;/*** constructor ***/public function _ construct () {log_message ('debug', "Img_shot Class Initialized ");} /*** initialize object ** @ param filename the source file path is fully explicit * @ param width * @ param height * @ param x coordinate 1 * @ param y coordinate 1 * @ param x1 x-axis 1 * @ param y1 x-axis 2 **/pub Lic 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 */public function generate_shot () {switch ($ this-> ext) based on the image format) {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 a jpg image **/private function generate_jpg () {$ shot_name = $ this-> get_shot_name (); $ img_r = imagecreatefromjpeg ($ this-> filename); $ dst_r = watermark ($ 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;}/*** generate gif image **/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 an image in png format **/private function generate_png () {$ shot_name = $ this-> get_shot_name (); $ img_r = upper ($ 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 ;}}

After receiving the coordinates of the foreground, you can instantiate this class to generate an image and return the name of the generated image.

After the image is cut: