Simple JS cropping the picture and storing it

As far as I am concerned, the design of the page on the more flexible parts, in fact, not many, such as sliding verification code, image cutting and other good interactive design.

From the beginning of the work, I want to understand these things, helpless has not this demand, riding on today's idle, studied the afternoon, during the encounter of large and small problems, has been tortured, which actually reflects a problem, my

is still relatively weak.

Words not much to say, first about the effect:

After the user clicks the upload picture, the page displays the uploaded picture, and the cropping box and two preview area appear, and finally click the Crop button to save the cropped picture to the server.

The effect is very simple, the whole process I encountered two difficulties, the first is the cut JS effect, the second is the image data processing.

For the first question, I quoted a plug-in on the Internet, I feel that the user's satisfaction in the cropping process can only be counted as normal, because it can only crop square area, even if there are eight pull settings on the border, but the pull box or the square

I am not satisfied with the shape and scale.

The following is a simple page design:

<div style= "Float:left;" ></div>
<div style= "Width:48px;height:48px;margin:10px;overflow:hidden; Float:left; " ></div>
<div style= "Width:190px;height:195px;margin:10px;overflow:hidden; Float:left; " ></div>
<form action= "{: U ('/test/crop_deal ')}" method= "POST" onsubmit= "return Checkcoords ()" Enctype= "multipart/ Form-data "id=" form ">
<input type= "File" name= "file" onchange= "Change_image (This)" >
<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= "cropping"/>
</form>

Here is the JS code:

function Change_image (file) {
var reader = new FileReader ();
Reader.onload = function (evt) {
$ ("#target"). attr (' src ', evt.target.result);
$ (' #preview '). attr (' src ', evt.target.result);
$ (' #preview2 '). attr (' src ', evt.target.result);
$ (' #target '). css ({"Height": "600px", "width": "600px"});
Limits the effect that size can have on them
};
Reader.readasdataurl (File.files[0]);

var jcrop_api, Boundx, Boundy;

SetTimeout (function () {

$ (' #target '). Jcrop ({
MinSize: [48,48],
Setselect: [0,0,190,190],
Onchange:updatepreview,
Onselect:updatepreview,
Onselect:updatecoords,
Aspectratio:1
},
function () {
Use the API to get the real image size
var bounds = This.getbounds ();
Boundx = Bounds[0];
Boundy = bounds[1];
Store the API in the JCROP_API variable
Jcrop_api = this;
});

function Updatepreview (c) {
if (parseint (C.W) > 0)
{
var rx = 48/c.w;//Small Avatar preview div size
var ry = 48/c.h;

$ (' #preview '). CSS ({
Width:Math.round (RX * boundx) + ' px ',
Height:Math.round (ry * boundy) + ' px ',
MarginLeft: '-' + math.round (RX * c.x) + ' px ',
MarginTop: '-' + math.round (ry * c.y) + ' px '
});
}
{
var rx = 199/c.w;//Large avatar preview div size
var ry = 199/c.h;
$ (' #preview2 '). CSS ({
Width:Math.round (RX * boundx) + ' px ',
Height:Math.round (ry * boundy) + ' px ',
MarginLeft: '-' + math.round (RX * c.x) + ' px ',
MarginTop: '-' + math.round (ry * c.y) + ' px '
});
}
};

function Updatecoords (c)
{
$ (' #x '). Val (c.x);
$ (' #y '). Val (C.Y);
$ (' #w '). Val (C.W);
$ (' #h '). Val (c.h);
};

},500);

}

Here is a two-point reminder:

One: Don't forget to introduce plugins in the head of the page:

<script src= "/plug/js/jquery.min.js" type= "Text/javascript" ></script>
<script src= "/plug/js/jquery. Jcrop.min.js "type=" Text/javascript "></script>
<link rel= "stylesheet" href= "/plug/css/jcrop.css" type= "Text/css"/>

Second: Some people sharp-eyed words may see JS There is a timing, while the psychological is not very confused this is not a bit superfluous? Actually not, upload the image to JS loading on the page, it takes time, the meaning of this timing is

Wait until the picture is loaded into the page by JS to load the cropping effect, here is the practice after repeated experiments.

Back-end PHP processing I'm using the thinkphp framework, the version is 3.1.3

Paste the code:

function Crop_deal () {
Ob_clean ();
Import (' ORG.Net.UploadFile ');
$upload = new UploadFile ();
$upload->maxsize = 2000000;
$upload->allowexts = Array (
' jpg ',
' GIF ',
' PNG ',
' JPEG '
);
$upload->savepath = './upload/test/';
$upload->autosub = true;
$upload->subtype = ' Date ';
$upload->dateformat = ' YMD ';
if ($upload->upload ()) {
$info = $upload->getuploadfileinfo ();
$new _path = "./upload/test/thumb". Date (' Ymd ');
$file _store = $new _path. " /". Date (' Ymdhis ').". JPG ";
if (!file_exists ($new _path)) {
mkdir ($new _path,0777,true);
}
$source _path = "http://". $_server[' Http_host ']. " /upload/test/". $info [0][' Savename '];
$img _size = getimagesize ($source _path);
$width = $img _size[0];
$height = $img _size[1];
$mime = $img _size[' mime '];
$SRCIMG = imagecreatefromstring (file_get_contents ($source _path));
$cropped _img = Imagecreatetruecolor ($_post[' W '), $_post[' H ']);
Scaling
Imagecopyresampled ($cropped _img, $srcImg, 0,0,$_post[' x '],$_post[' y '],$_post[' W '],$_post[' h '], $width, $height);
Cutting
Imagecopy ($cropped _img, $srcImg, 0,0,$_post[' x '],$_post[' y '],$_post[' W '],$_post[' h ']);
Header ("Content-type:image/jpeg");
Imagejpeg ($cropped _img, $file _store);
Imagedestroy ($SRCIMG);
Imagedestroy ($cropped _img);
}

}

Here is the call to the GD library to create an image of a series of methods, the most important is imagecopy (), it is the original according to the prescribed clipping position, cut size copied to the new picture up, which also shows that the page user in the crop picture

In fact, the front end does not operate on the picture, but to get the coordinates of the crop when the location, crop size, and then submit to the PHP operation!!

The above is a busy half-day results, good, off duty!!

Simple JS cropping the picture and storing it