Jcrop image area selection, cropping and uploading

Start by explaining which files need to be introduced:

Jquery. Jcrop.css, jquery. Jcrop.js, Jquery.js

Next, explain what pages are needed:

Front:

1. Display the picture and select the area of the page resume_avatar.html, some of the code is as follows:

1.1 Picture Display

<div id= "Imgpreview" style= "max-width:400px;min-height:200px;" >

</div>

<div id= "Preview-pane" >
<div class= "Preview-container" >

</div>
</div>

1.2 Change of picture

HTML code

<form action= "{: U (' Index/do_resume_avatar ')}" method= "post" model-node= ' Account_save ' enctype= ' multipart/ Form-data ' id= "Form1" >
&LT;DL class= "Form-set" >
<dd>
<div class= "Form-tt" ><div class= "Form-row" ><input type= "file" name= "pic" id= "pic" onchange= "Picsubmit ()"/></div>
</dd>
</dl>
</form>

JS Code

function Picsubmit () {
var Y=document.getelementbyid (pic). Value;
$ ("#form1"). Submit ();
}

1.3 When you have finished selecting pictures, click OK

HTML code

<form action= "{: U (' Index/resume_avatar_done ')}" method= "post" enctype= ' Multipart/form-data ' id= "Form2" >
<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"/>
<div class= "Form-row" style= "padding-left:130px;" >
<button type= "Submit" class= "Btn-green-big" id= "Submit-avatar" onclick= "Cutimage ()" > Next </button>
</div>
</form>

JS Code

function Cutimage () {
var width1 = {$image _size}; The actual width of the picture
var width2 = $ ('. Target '). width (); Width of picture display
var KK = (width1/width2);


$ ("#target"). Jcrop ({
Onchange:showpreview,
Onselect:showpreview,
});

function Showpreview (coords) {
if (KK = = 1) {
$ (' #x '). Val (coords.x);
$ (' #y '). Val (Coords.y);
$ (' #w '). Val (COORDS.W);
$ (' #h '). Val (coords.h);
}else{
$ (' #x '). Val ((coords.x) *KK);
$ (' #y '). Val ((COORDS.Y) *KK);
$ (' #w '). Val ((COORDS.W) *KK);
$ (' #h '). Val ((coords.h) *KK);
}
};

}

2. Page resume_avatar_done.html after image processing is completed

Just show the finished picture and show how many seconds to jump on it.

HTML code

<div class= "Set-hd" ><span >

JS Code

<script language= "javascript" type= "Text/javascript" >
var i = 5;
var intervalid;
Intervalid = SetInterval ("Fun ()", 1000);
function Fun () {
if (i = = 0) {
Window.location.href = "{: U (' Job/index/z_resume ')}";
Clearinterval (Intervalid);
}
document.getElementById ("Mes"). InnerHTML = i;
i--;
}
</script>

Background:

1. First is the Resume_avatar page, only need to pass two parameters, one is the path of the picture $resume_data, there is a picture of the width of $image_size;

2. Moreover is the RESUME_AVATAR_DO page, its function is handles the picture the replacement (does not handle the picture which after chooses completes), and saves in the database, also has the transmission parameter to the front-end to display, the detailed code does not repeat;

3. Finally, the Resume_avatar_done page, the function is to process the selection of the finished image, and the picture is cropped to the same size selection area of the picture, some of the code is as follows:

$a = $_post;
$x = $a [' x '];
$y = $a [' Y '];
$w = $a [' W '];
$h = $a [' h '];

$path = $datas [' pic '];
$path 2 = substr ($path, 0,strrpos ($path, '. '));

Var_dump ($path 2); exit;

$thumb _img = "Upload_file/resume_avatar/demo_1.jpg";
Cutting pictures
Get the original
$img =imagecreatefromjpeg ($path);
Get the width and height of the picture
$img _width=imagesx ($IMG);
$img _height=imagesy ($IMG);
Width and height of thumbnail images
$new _img_width= $w;
$new _img_height= $h;
Create a new picture (thumbnail)
$new _img=imagecreatetruecolor ($w, $h);
Create a new Image object (thumbnail)
Imagecopyresized ($new _img, $img, 0,0, $x, $y, $w, $h, $w, $h);
imagecopyresized function copies all or part of the source image and resizes it
Create a picture
$thumb _img = $path 2. ' _thumb.jpg ';
Imagejpeg ($new _img, $thumb _img);
$datas [' suo '] = $thumb _img;
Destroying images
Imagedestroy ($new _img);

The renderings of the resume_avatar.html page are as follows: