Profile picture cropping tool in php web designing

Here we write this page for helping you to design profile picture and cropping tool in php web page development. Profile picture upload, cropping and save as users profile is most important for the website that have profile of users.

This is an important concept to the developers to use this and make there website attractive and functional. Profile picture upload is not easy concept but here we help to the readers for make it easy.

In first we should have to develop all these files, name is given as:

index.php
ajax_image.php
imgareaselect-animated.css
jquery.min.js
jquery.imgareaselect.pack.js
border-anim-h.gif
border-anim-v.gif

All these files should have same name as given above, below we have given the programming code for each file and image download inks. So continue reading below.....

index.php

Copy complete code from the given text area box below and paste in index.php file blank file and save it.

<!DOCTYPE html>
<html>
<head>
<title> Image Cropping Tool</title>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-animated.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function getSizes(img,obj)
{
var x_axis = obj.x1;
var x2_axis = obj.x2;
var new_name_jpeg = "<?php
 if(!isset($new_name_jpeg)){
 $new_name_jpeg = "small".time().".jpeg";
 echo($new_name_jpeg);
 }else{echo($new_name_jpeg);}
 ?>";
var new_name_jpg = "<?php
 if(!isset($new_name_jpg)){
 $new_name_jpg = "small".time().".jpg";
 echo($new_name_jpg);
 }else{echo($new_name_jpg);}
 ?>";
var new_name_png = "<?php
 if(!isset($new_name_png)){
 $new_name_png = "small".time().".png";
 echo($new_name_png);
 }else{echo($new_name_png);}
 ?>";
var new_name_gif = "<?php
 if(!isset($new_name_gif)){
 $new_name_gif = "small".time().".gif";
 echo($new_name_gif);
 }else{echo($new_name_gif);}
 ?>";
var new_name_bmp = "<?php
 if(!isset($new_name_bmp)){
 $new_name_bmp = "small".time().".bmp";
 echo($new_name_bmp);
 }else{echo($new_name_bmp);}
 ?>";
var y_axis = obj.y1;
var y2_axis = obj.y2;
var crop_width = x2_axis-x_axis;
var crop_height = y2_axis-y_axis;
if(crop_width > 0)
{
$.ajax({
type:"GET",
url:"ajax_image.php?t=ajax&img_ext="+$("#img_ext").val()+"&img_name="+$("#image_name").val()+"&w="+
crop_width+"&h="+crop_height+"&x1="+x_axis+"&y1="+y_axis+"&x2="+x2_axis+"&y2="+y2_axis+"&new_name_jpeg="+new_name_jpeg+"&new_name_jpg="+new_name_jpg+"&new_name_png="+new_name_png+"&new_name_gif="+new_name_gif+"&new_name_bmp="+new_name_bmp,
cache:false,
success:function(rsponse)
{
$("#cropimage").hide();
$("#thumbs").html("");
$("#thumbs").html("<img src='uploads/"+rsponse+"' />");
}
});
}
else
alert("Please select portion..!");
}
$(document).ready(function ()
{
$('img#photo').imgAreaSelect({
aspectRatio: '',
onSelectEnd: getSizes
});
});
</script>
<script type="text/javascript">
function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
    
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;

$('#preview img').css({
        width: Math.round(scaleX * 300),
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

$('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);    
}

$(function () {
    $('#photo').imgAreaSelect({ aspectRatio: '', handles: true,
        fadeSpeed: 200, onSelectChange: preview });
});
</script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td width="25%"> </td>
    <td width="50%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
        <td>
        </td>
        <td ></td>
      </tr>
</table>
</td>
    <td> </td>
  </tr>
<tr>
    <td> </td>
    <td bgcolor="#FFFFFF">
    <p align="center" class="mainpage_bg">
       </p>
<p align="center" class="mainpage_bg">
<?php
$path = "uploads/";
$image="<img class='thumbs' src='images/file_upload_icon.jpg'";
$valid_formats = array("jpg", "jpeg", "png", "gif", "bmp");
if(isset($_POST['submit']))
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats) && $size<(800*600))
{
$img_ext=$ext;
$actual_image_name = time().substr($txt, 5).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
$image="<img class='thumbs' src='uploads/".$actual_image_name."' id=\"photo\" ";
}
else
echo "failed";
}
else
echo "Invalid file formats..!";
}
else
echo "Please select image..!";
} echo $image;?>
    </p>
<div align="center">
      <div style="float: center;" align="center">
        <form method="post" enctype="multipart/form-data">
          <div class="browse_image">
 <span>UPLOAD IMAGE:</span>
            <input type="file" name="photoimg" id="photoimg" />
            <input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" />
            <input type="hidden" name="img_ext" id="img_ext" value="<?php echo($img_ext)?>">
             <input type="submit" name="submit" value="Submit" class="submit_button"/>
          </div>
</form>
<div class="cordinate_form">
          <table width="316" border="0" cellpadding="1" cellspacing="0" style="border-collapse: collapse; margin-top: 0.5em;">
            <tbody>
<tr>
                <td colspan="2" align="center"> Coordinates </td>
                <td colspan="2" align="center"> Dimensions </td>
              </tr>
<tr>
                <td width="5%"style="width: 10%;"><b>X<sub>1</sub>:</b></td>
                <td width="41%" style="width: 30%;"><input class="browse_textbox" type="text"id="x1" value="" /></td>
                <td width="14%" style="width: 20%;"><b>Width:</b></td>
                <td width="40%" style="width: 30%;"><input class="browse_textbox" type="text"value="" id="w" /></td>
              </tr>
<tr>
                <td ><b>Y<sub>1</sub>:</b></td>
                <td><input class="browse_textbox" type="text" id="y1" value="" /></td>
                <td ><b>Height:</b></td>
                <td><input class="browse_textbox" type="text" id="h" value="" /></td>
              </tr>
<tr>
                <td ><b>X<sub>2</sub>:</b></td>
                <td><input class="browse_textbox" type="text" id="x2" value="" /></td>
                <td></td>
                <td></td>
              </tr>
<tr>
                <td><b>Y<sub>2</sub>:</b></td>
                <td><input class="browse_textbox" type="text" id="y2" value="" /></td>
                <td></td>
                <td align="center"><a href="photos/<?php if($img_ext=="jpeg"){echo ($new_name_jpeg);}
   if($img_ext=="jpg"){echo ($new_name_jpg);}
   if($img_ext=="png"){echo ($new_name_png);}
   if($img_ext=="gif"){echo ($new_name_gif);}
   if($img_ext=="bmp"){echo ($new_name_bmp);}?>"  class="download_button">Download</a></td>
              </tr>
</tbody>
          </table>
<p>
<br>
             </p>
</div>
</div>
</div>
</td>
    <td> </td>
  </tr>
<tr>
    <td> </td>
    <td>  </td>
    <td> </td>
  </tr>
</table>
</body>
</html>

ajax_image.php
Given cade in below is for ajax_image.php file. Copy following code and pate in a bank php file name must have ajax_image.php.

<?php
session_start();
extract($_GET); // Thumbnail image name

$path = "uploads/";
$save_path = "photos/";
$t_width = $w;
$t_height = $h;

list($img_width, $img_height)=getimagesize($path.$img_name);

if(isset($_GET['t']) and $_GET['t'] == "ajax" && $img_ext=="gif")
{
$ratio = ($t_width/$w);
$nw = ceil($w * $ratio);
$nh = ceil($h * $ratio);
$nimg = imagecreatetruecolor($nw,$nh);
$im_src = imagecreatefromgif($path.$img_name);
imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h);
imagegif($nimg,$save_path.$new_name_gif,100);
}
if(isset($_GET['t']) and $_GET['t'] == "ajax" && $img_ext=="jpeg")
{
$ratio = ($t_width/$w);
$nw = ceil($w * $ratio);
$nh = ceil($h * $ratio);
$nimg = imagecreatetruecolor($nw,$nh);
$im_src = imagecreatefromjpeg($path.$img_name);
imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h);
imagejpeg($nimg,$save_path.$new_name_jpeg,100);
}
if(isset($_GET['t']) and $_GET['t'] == "ajax" && $img_ext=="png")
{
$ratio = ($t_width/$w);
$nw = ceil($w * $ratio);
$nh = ceil($h * $ratio);
$nimg = imagecreatetruecolor($nw,$nh);
$im_src = imagecreatefrompng($path.$img_name);
imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h);
imagejpeg($nimg,$save_path.$new_name_png,100);
}
if(isset($_GET['t']) and $_GET['t'] == "ajax" && $img_ext=="jpg")
{
$ratio = ($t_width/$w);
$nw = ceil($w * $ratio);
$nh = ceil($h * $ratio);
$nimg = imagecreatetruecolor($nw,$nh);
$im_src = imagecreatefromjpeg($path.$img_name);
imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h);
imagejpeg($nimg,$save_path.$new_name_jpg,100);
}
?>

imgareaselect-animated.css
Now generate a css (cascading style sheet) file, copy complete code given below, paste in this css file and rename the file to imgareaselect-animated.css.

jquery.min.js
Now make a js (javascript) file, copy and past the following code given below in this file and save name as jquery.min.js.

jquery.imgareaselect.pack.js
Now make a js (javascript) file, copy and past the following code given below in this file and save name as jquery.imgareaselect.pack.js.

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(m($){18 W=2v.4T,D=2v.4S,F=2v.4R,u=2v.4Q;m V(){C $("<4P/>")};$.N=m(T,c){18 O=$(T),1F,A=V(),1k=V(),I=V().r(V()).r(V()).r(V()),B=V().r(V()).r(V()).r(V()),E=$([]),1K,G,l,17={v:0,l:0},Q,M,1l,1g={v:0,l:0},12=0,1J="1H",2k,2j,1t,1s,S,1B,1A,2o,2n,14,1Q,a,b,j,g,f={a:0,b:0,j:0,g:0,H:0,L:0},2u=R.4O,1M=4N.4M,$p,d,i,o,w,h,2p;m 1n(x){C x+17.v-1g.v};m 1m(y){C y+17.l-1g.l};m 1b(x){C x-17.v+1g.v};m 1a(y){C y-17.l+1g.l};m 1z(3J){C 3J.4L-1g.v};m 1y(3I){C 3I.4K-1g.l};m 13(32){18 1i=32||1t,1h=32||1s;C{a:u(f.a*1i),b:u(f.b*1h),j:u(f.j*1i),g:u(f.g*1h),H:u(f.j*1i)-u(f.a*1i),L:u(f.g*1h)-u(f.b*1h)}};m 23(a,b,j,g,31){18 1i=31||1t,1h=31||1s;f={a:u(a/1i||0),b:u(b/1h||0),j:u(j/1i||0),g:u(g/1h||0)};f.H=f.j-f.a;f.L=f.g-f.b};m 1f(){9(!1F||!O.H()){C}17={v:u(O.2t().v),l:u(O.2t().l)};Q=O.2Y();M=O.3H();17.l+=(O.30()-M)>>1;17.v+=(O.2q()-Q)>>1;1B=u(c.4J/1t)||0;1A=u(c.4I/1s)||0;2o=u(F(c.4H/1t||1<<24,Q));2n=u(F(c.4G/1s||1<<24,M));9($().4F=="1.3.2"&&1J=="21"&&!2u["4E"]){17.l+=D(R.1q.2r,2u.2r);17.v+=D(R.1q.2s,2u.2s)}1g=/1H|4D/.1c(1l.q("1p"))?{v:u(1l.2t().v)-1l.2s(),l:u(1l.2t().l)-1l.2r()}:1J=="21"?{v:$(R).2s(),l:$(R).2r()}:{v:0,l:0};G=1n(0);l=1m(0);9(f.j>Q||f.g>M){1U()}};m 1V(3F){9(!1Q){C}A.q({v:1n(f.a),l:1m(f.b)}).r(1k).H(w=f.H).L(h=f.L);1k.r(I).r(E).q({v:0,l:0});I.H(D(w-I.2q()+I.2Y(),0)).L(D(h-I.30()+I.3H(),0));$(B[0]).q({v:G,l:l,H:f.a,L:M});$(B[1]).q({v:G+f.a,l:l,H:w,L:f.b});$(B[2]).q({v:G+f.j,l:l,H:Q-f.j,L:M});$(B[3]).q({v:G+f.a,l:l+f.g,H:w,L:M-f.g});w-=E.2q();h-=E.30();2O(E.3f){15 8:$(E[4]).q({v:w>>1});$(E[5]).q({v:w,l:h>>1});$(E[6]).q({v:w>>1,l:h});$(E[7]).q({l:h>>1});15 4:E.3G(1,3).q({v:w});E.3G(2,4).q({l:h})}9(3F!==Y){9($.N.2Z!=2R){$(R).U($.N.2z,$.N.2Z)}9(c.1T){$(R)[$.N.2z]($.N.2Z=2R)}}9(1j&&I.2q()-I.2Y()==2){I.q("3E",0);3x(m(){I.q("3E","4C")},0)}};m 22(3D){1f();1V(3D);a=1n(f.a);b=1m(f.b);j=1n(f.j);g=1m(f.g)};m 27(2X,2w){c.1P?2X.4B(c.1P,2w):2X.1r()};m 1d(2W){18 x=1b(1z(2W))-f.a,y=1a(1y(2W))-f.b;9(!2p){1f();2p=11;A.1G("4A",m(){2p=Y})}S="";9(c.2D){9(y<=c.1W){S="n"}X{9(y>=f.L-c.1W){S="s"}}9(x<=c.1W){S+="w"}X{9(x>=f.H-c.1W){S+="e"}}}A.q("2V",S?S+"-19":c.26?"4z":"");9(1K){1K.4y()}};m 2S(4x){$("1q").q("2V","");9(c.4w||f.H*f.L==0){27(A.r(B),m(){$(J).1r()})}$(R).U("P",2l);A.P(1d);c.2f(T,13())};m 2C(1X){9(1X.3z!=1){C Y}1f();9(S){$("1q").q("2V",S+"-19");a=1n(f[/w/.1c(S)?"j":"a"]);b=1m(f[/n/.1c(S)?"g":"b"]);$(R).P(2l).1G("1x",2S);A.U("P",1d)}X{9(c.26){2k=G+f.a-1z(1X);2j=l+f.b-1y(1X);A.U("P",1d);$(R).P(2T).1G("1x",m(){c.2f(T,13());$(R).U("P",2T);A.P(1d)})}X{O.1O(1X)}}C Y};m 1w(3C){9(14){9(3C){j=D(G,F(G+Q,a+W(g-b)*14*(j>a||-1)));g=u(D(l,F(l+M,b+W(j-a)/14*(g>b||-1))));j=u(j)}X{g=D(l,F(l+M,b+W(j-a)/14*(g>b||-1)));j=u(D(G,F(G+Q,a+W(g-b)*14*(j>a||-1))));g=u(g)}}};m 1U(){a=F(a,G+Q);b=F(b,l+M);9(W(j-a)<1B){j=a-1B*(j<a||-1);9(j<G){a=G+1B}X{9(j>G+Q){a=G+Q-1B}}}9(W(g-b)<1A){g=b-1A*(g<b||-1);9(g<l){b=l+1A}X{9(g>l+M){b=l+M-1A}}}j=D(G,F(j,G+Q));g=D(l,F(g,l+M));1w(W(j-a)<W(g-b)*14);9(W(j-a)>2o){j=a-2o*(j<a||-1);1w()}9(W(g-b)>2n){g=b-2n*(g<b||-1);1w(11)}f={a:1b(F(a,j)),j:1b(D(a,j)),b:1a(F(b,g)),g:1a(D(b,g)),H:W(j-a),L:W(g-b)};1V();c.2g(T,13())};m 2l(2U){j=/w|e|^$/.1c(S)||14?1z(2U):1n(f.j);g=/n|s|^$/.1c(S)||14?1y(2U):1m(f.g);1U();C Y};m 1v(3B,3A){j=(a=3B)+f.H;g=(b=3A)+f.L;$.2c(f,{a:1b(a),b:1a(b),j:1b(j),g:1a(g)});1V();c.2g(T,13())};m 2T(2m){a=D(G,F(2k+1z(2m),G+Q-f.H));b=D(l,F(2j+1y(2m),l+M-f.L));1v(a,b);2m.4v();C Y};m 2h(){$(R).U("P",2h);1f();j=a;g=b;1U();S="";9(!B.2y(":4u")){A.r(B).1r().2E(c.1P||0)}1Q=11;$(R).U("1x",1N).P(2l).1G("1x",2S);A.U("P",1d);c.3y(T,13())};m 1N(){$(R).U("P",2h).U("1x",1N);27(A.r(B));23(1b(a),1a(b),1b(a),1a(b));9(!(J 4t $.N)){c.2g(T,13());c.2f(T,13())}};m 2A(2i){9(2i.3z!=1||B.2y(":4s")){C Y}1f();2k=a=1z(2i);2j=b=1y(2i);$(R).P(2h).1x(1N);C Y};m 2B(){22(Y)};m 2x(){1F=11;25(c=$.2c({1S:"4r",26:11,20:"1q",2D:11,1W:10,3w:m(){},3y:m(){},2g:m(){},2f:m(){}},c));A.r(B).q({3b:""});9(c.2F){1Q=11;1f();1V();A.r(B).1r().2E(c.1P||0)}3x(m(){c.3w(T,13())},0)};18 2R=m(16){18 k=c.1T,d,t,2N=16.4q;d=!1L(k.2P)&&(16.2e||16.3t.2e)?k.2P:!1L(k.2a)&&16.3u?k.2a:!1L(k.2b)&&16.3v?k.2b:!1L(k.2Q)?k.2Q:10;9(k.2Q=="19"||(k.2b=="19"&&16.3v)||(k.2a=="19"&&16.3u)||(k.2P=="19"&&(16.2e||16.3t.2e))){2O(2N){15 37:d=-d;15 39:t=D(a,j);a=F(a,j);j=D(t+d,a);1w();1u;15 38:d=-d;15 40:t=D(b,g);b=F(b,g);g=D(t+d,b);1w(11);1u;3s:C}1U()}X{a=F(a,j);b=F(b,g);2O(2N){15 37:1v(D(a-d,G),b);1u;15 38:1v(a,D(b-d,l));1u;15 39:1v(a+F(d,Q-1b(j)),b);1u;15 40:1v(a,b+F(d,M-1a(g)));1u;3s:C}}C Y};m 1R(3r,2M){3p(18 2d 4p 2M){9(c[2d]!==1Y){3r.q(2M[2d],c[2d])}}};m 25(K){9(K.20){(1l=$(K.20)).2G(A.r(B))}$.2c(c,K);1f();9(K.2L!=3q){E.1o();E=$([]);i=K.2L?K.2L=="4o"?4:8:0;3g(i--){E=E.r(V())}E.29(c.1S+"-4n").q({1p:"1H",36:0,1I:12+1||1});9(!4m(E.q("H"))>=0){E.H(5).L(5)}9(o=c.2K){E.q({2K:o,2H:"3m"})}1R(E,{3n:"2J-28",3l:"2I-28",3o:"1e"})}1t=c.4l/Q||1;1s=c.4k/M||1;9(K.a!=3q){23(K.a,K.b,K.j,K.g);K.2F=!K.1r}9(K.1T){c.1T=$.2c({2b:1,2a:"19"},K.1T)}B.29(c.1S+"-4j");1k.29(c.1S+"-4i");3p(i=0;i++<4;){$(I[i-1]).29(c.1S+"-2J"+i)}1R(1k,{4h:"2I-28",4g:"1e"});1R(I,{3o:"1e",2K:"2J-H"});1R(B,{4f:"2I-28",4e:"1e"});9(o=c.3n){$(I[0]).q({2H:"3m",3k:o})}9(o=c.3l){$(I[1]).q({2H:"4d",3k:o})}A.2G(1k.r(I).r(1K)).2G(E);9(1j){9(o=(B.q("3j")||"").3i(/1e=(\\d+)/)){B.q("1e",o[1]/1Z)}9(o=(I.q("3j")||"").3i(/1e=(\\d+)/)){I.q("1e",o[1]/1Z)}}9(K.1r){27(A.r(B))}X{9(K.2F&&1F){1Q=11;A.r(B).2E(c.1P||0);22()}}14=(d=(c.4c||"").4b(/:/))[0]/d[1];O.r(B).U("1O",2A);9(c.1E||c.1D===Y){A.U("P",1d).U("1O",2C);$(3h).U("19",2B)}X{9(c.1D||c.1E===Y){9(c.2D||c.26){A.P(1d).1O(2C)}$(3h).19(2B)}9(!c.4a){O.r(B).1O(2A)}}c.1D=c.1E=1Y};J.1o=m(){25({1E:11});A.r(B).1o()};J.49=m(){C c};J.33=25;J.48=13;J.47=23;J.46=1N;J.45=22;18 1j=(/44 ([\\w.]+)/i.43(1M)||[])[1],3c=/42/i.1c(1M),3d=/41/i.1c(1M)&&!/3Z/i.1c(1M);$p=O;3g($p.3f){12=D(12,!1L($p.q("z-3e"))?$p.q("z-3e"):12);9($p.q("1p")=="21"){1J="21"}$p=$p.20(":3Y(1q)")}12=c.1I||12;9(1j){O.3X("3W","3V")}$.N.2z=1j||3d?"3U":"3T";9(3c){1K=V().q({H:"1Z%",L:"1Z%",1p:"1H",1I:12+2||2})}A.r(B).q({3b:"3a",1p:1J,3S:"3a",1I:12||"0"});A.q({1I:12+2||2});1k.r(I).q({1p:"1H",36:0});T.35||T.3R=="35"||!O.2y("3Q")?2x():O.1G("3P",2x);9(!1F&&1j&&1j>=7){T.34=T.34}};$.2w.N=m(Z){Z=Z||{};J.3O(m(){9($(J).1C("N")){9(Z.1o){$(J).1C("N").1o();$(J).3N("N")}X{$(J).1C("N").33(Z)}}X{9(!Z.1o){9(Z.1D===1Y&&Z.1E===1Y){Z.1D=11}$(J).1C("N",3M $.N(J,Z))}}});9(Z.3L){C $(J).1C("N")}C J}})(3K);',62,304,'|||||||||if|x1|y1|_7|||_23|y2|||x2||top|function||||css|add|||_4|left|||||_a|_d|return|_2|_e|_3|_10|width|_c|this|_55|height|_13|imgAreaSelect|_8|mousemove|_12|document|_1c|_6|unbind|_5|_1|else|false|_58||true|_16|_2c|_21|case|_50|_11|var|resize|_29|_28|test|_3a|opacity|_30|_15|sy|sx|_35|_b|_14|_27|_26|remove|position|body|hide|_1b|_1a|break|_45|_42|mouseup|evY|evX|_1e|_1d|data|enable|disable|_9|one|absolute|zIndex|_17|_f|isNaN|ua|_4a|mousedown|fadeSpeed|_22|_51|classPrefix|keys|_31|_32|resizeMargin|_40|undefined|100|parent|fixed|_36|_2e||_4f|movable|_38|color|addClass|ctrl|shift|extend|_54|altKey|onSelectEnd|onSelectChange|_49|_4c|_19|_18|_3e|_48|_20|_1f|_25|outerWidth|scrollTop|scrollLeft|offset|_24|Math|fn|_4e|is|keyPress|_4b|_4d|_3f|resizable|fadeIn|show|append|borderStyle|background|border|borderWidth|handles|_53|key|switch|alt|arrows|_34|_3c|_41|_44|cursor|_3b|_39|innerWidth|onKeyPress|outerHeight|_2f|_2d|setOptions|src|complete|fontSize||||hidden|visibility|_56|_57|index|length|while|window|match|filter|borderColor|borderColor2|solid|borderColor1|borderOpacity|for|null|_52|default|originalEvent|ctrlKey|shiftKey|onInit|setTimeout|onSelectStart|which|_47|_46|_43|_37|margin|_33|slice|innerHeight|_2b|_2a|jQuery|instance|new|removeData|each|load|img|readyState|overflow|keypress|keydown|on|unselectable|attr|not|chrome||webkit|opera|exec|msie|update|cancelSelection|setSelection|getSelection|getOptions|persistent|split|aspectRatio|dashed|outerOpacity|outerColor|selectionOpacity|selectionColor|selection|outer|imageHeight|imageWidth|parseInt|handle|corners|in|keyCode|imgareaselect|animated|instanceof|visible|preventDefault|autoHide|_3d|toggle|move|mouseout|fadeOut|auto|relative|getBoundingClientRect|jquery|maxHeight|maxWidth|minHeight|minWidth|pageY|pageX|userAgent|navigator|documentElement|div|round|min|max|abs'.split('|')))

Now download both gif images from these links

border-anim-h.gif

border-anim-v.gif

Manage all file as like give here
1. In the localhost folder make four folders name as :

scripts
css
photos
uploads

2. Save index.php and ajax_image.php files in localhost folder.
3. Save both javascript files in the folder scripts.
4. Save css file and both gif files in the folder of css.

how to do

Thursday, 4 July 2013

Profile picture cropping tool in php web designing

search on this blog

Categories

Popular Post

Blog Archive

More Links

Find Us On

About me