See some of the site has a picture cutting function, feel very dazzle, and later found a dedicated to the picture cutting plug-ins, jquery. Jcrop.min.js, with this plug-in can be conveniently implemented this function, the use of the mouse in the picture on the circle to select the selection, you can cut the picture into the selected section, is very suitable for the head of the cutting editing function. Front-End UI sharing
The demo is divided into two parts: HTML and PHP.
The first part, the HTML code:
. Code
- <! DOCTYPE HTML public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">
- "http://www.w3.org/1999/xhtml" >
- <title>jcrop Achieve picture clipping </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,//The corresponding callback function is executed when the area is selected
- Onchange:updatecoords,//The corresponding callback function is executed when the selection region changes
- });
- });
- function Updatecoords (c)
- {
- JQuery (' #x '). Val (c.x);//The upper-left corner of the selected area horizontal
- JQuery (' #y '). Val (c.y);//upper left corner of selected area ordinate
- JQuery ("#x2"). Val (c.x2);//The lower right corner of the selected area horizontal
- JQuery ("#y2"). Val (c.y2);//The lower-right corner of the selected area ordinate
- JQuery (' #w '). Val (C.W);//width of the selected area
- JQuery (' #h '). Val (c.h);//height of selected area
- };
- function Checkcoords ()
- {
- if (parseint (JQuery (' #w '). Val ()) >0) return true;
- Alert (' Please select the area of the picture you want to crop. ');
- return false;
- };
- </script>
- <body>
- <img id="imghead" border=0 src=' ... /image/b4.jpg '/>
- <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="Submission" >
- </form>
- </body>
Part Two: The PHP Processing section: jquery sharing
. Code
- <?php
- if ($_server[' request_method '] = = ' POST ')
- {
- $targ _w = $targ _h = 150;
- $jpeg _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, $jpeg _quality);
- Exit
- }
- ?>
Please save the above two parts of the code separately as two files, the file name is self-prepared.
