PHP combined with JQueryJcrop to implement the code of the Avatar image cropping instance,
I found some websites have the image cutting function, and it was quite dazzling. Later I found a plug-in dedicated to image cropping, jquery. jcrop. min. js. You can use this plug-in to conveniently implement this function. When using this function, you can circle the selected area on the image to cut the image into the selected part. This is very suitable for cropping and editing the Avatar. Frontend UI sharing
The demo consists of HTML and php:
The first part is the HTML code:
. Code
- <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <Html xmlns = "http://www.w3.org/1999/xhtml">
- <Head>
- <Title> crop images using Jcrop </title>
- <Script src = "../jquery-1.6.2.min.js"> </script>
- <Script src = ".../jquery. Jcrop. min. js"> </script>
- <Link rel = "stylesheet" href = "../jquery.Jcrop.min.css" type = "text/css"/>
- <Style type = "text/css">
- # Preview {width: 100px; height: 100px; border: 1px solid #000; overflow: hidden ;}
- # Imghead {filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (sizingMethod = image );}
- </Style>
- <Script language = "Javascript">
- JQuery (function (){
- JQuery ('# imghead'). Jcrop ({
- AspectRatio: 1,
- OnSelect: updateCoords, // execute the corresponding callback function when selecting the region
- OnChange: updateCoords, // execute the corresponding callback function when the selected region changes
- });
- });
- Function updateCoords (c)
- {
- JQuery ('# x'). val (c. x); // the upper left corner of the selected area
- JQuery ('# y'). val (c. y); // select the vertical coordinate in the upper left corner of the area
- // JQuery ("# x2"). val (c. x2); // the abscissa in the lower right corner of the selected area
- // JQuery ("# y2"). val (c. y2); // select the column coordinate in the lower right corner of the area
- JQuery ('# W'). val (c. w); // The width of the selected area
- JQuery ('# H'). val (c. h); // The height of the selected area
- };
- Function checkCoords ()
- {
- If (parseInt (jQuery ('# W'). val ()> 0) return true;
- Alert ('select the image area to crop .');
- Return false;
- };
- </Script>
- </Head>
- <Body>
- <Form action = "crop. php" method = "post" onsubmit = "return checkCoords ();">
- <Input type = "text" id = "x" name = "x"/>
- <Input type = "text" id = "y" name = "y"/>
- <Input type = "text" id = "w" name = "w"/>
- <Input type = "text" id = "h" name = "h"/>
- <Input type = "submit" value = "submit">
- </Form>
- </Body>
- </Html>
Part 2: PHP processing part: jquery sharing
. Code
- <? Php
- If ($ _ SERVER ['request _ method'] = 'post ')
- {
- $ Targ_w = $ targ_h = 150;
- $ Pai_quality = 90;
- $ Src = '../image/b4.jpg ';
- $ Img_r = imagecreatefromjpeg ($ src );
- $ Dst_r = ImageCreateTrueColor ($ targ_w, $ targ_h );
- Imagecopyresampled ($ dst_r, $ img_r, 0, 0, $ _ POST ['X'], $ _ POST ['y'],
- $ Targ_w, $ targ_h, $ _ POST ['W'], $ _ POST ['H']);
- Header ('content-type: image/jpeg ');
- Imagejpeg ($ dst_r, null, $ pai_quality );
- Exit;
- }
- ?>
Please save the above two parts of code as two files, the file name is self-prepared.
