Monday, November 7, 2016

Image Cropping Using Jcrop and PHP

///////////////////////////////////////////////////////////////////////////////////////////////////
//// index.php
///////////////////////////////////////////////////////////////////////////////////////////////////
<?php
session_start();
include("functions.php");
if(isset($_REQUEST['action'])){
$path='demos/demo_files/';
$randNo = time();
$thumbImage = $path.'thumb/';
$previewpath = $path.'preview/';
$filename = strtolower($randNo.str_replace(" ","_",$_FILES['uploadimage']['name']));
if(move_uploaded_file($_FILES['uploadimage']['tmp_name'],$path.$filename)) {
chmod($path.'/'.$filename,0777);
createThumbs($path,$thumbImage.'/',167,$filename);
createThumbs($path,$previewpath.'/',382,$filename);
$_SESSION['imagecreationname'] = $filename;
header("location:demos/crop.php");
exit;
}
}
?>


<form action="" method="post" name="frm" enctype="multipart/form-data">
<input type="hidden" name="action" value="trans">
<center>
<input type="file" name="uploadimage" id="uploadimage" onchange="javascript:document.frm.submit()">
</center>
</form>

///////////////////////////////////////////////////////////////////////////////////////////////////
//// End index.php
///////////////////////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////////////
//// functions.php
///////////////////////////////////////////////////////////////////////////////////////////////////
<?php
function createThumbs( $pathToImages, $pathToThumbs,$thumbWidth,$fname ) {
 // open the directory
if(!is_dir($pathToThumbs)){
mkdir($pathToThumbs,0777);
}
$dir = opendir( $pathToImages );
// loop through it, looking for any/all JPG files:
$info = pathinfo($pathToImages . $fname);
// continue only if this is a JPEG image
if ( strtolower($info['extension']) == 'jpg' ){
 // load image and get image size
 $img = imagecreatefromjpeg( "{$pathToImages}{$fname}" );
 $width = imagesx( $img );
 $height = imagesy( $img );
 // calculate thumbnail size
 $new_width = $thumbWidth;
 $new_height = floor( $height * ( $thumbWidth / $width ) );

 // create a new temporary image
 $tmp_img = imagecreatetruecolor( $new_width, $new_height );

 // copy and resize old image into new image
 imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

 // save thumbnail into a file
 imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" );
}

if ( strtolower($info['extension']) == 'png' ){
 // load image and get image size
 $img = imagecreatefrompng( "{$pathToImages}{$fname}" );
 $width = imagesx( $img );
 $height = imagesy( $img );
 // calculate thumbnail size
 $new_width = $thumbWidth;
 $new_height = floor( $height * ( $thumbWidth / $width ) );

 // create a new temporary image
 $tmp_img = imagecreatetruecolor( $new_width, $new_height );

 // copy and resize old image into new image
 imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

 // save thumbnail into a file
 imagepng( $tmp_img, "{$pathToThumbs}{$fname}" );
}

if ( strtolower($info['extension']) == 'gif' ){
 // load image and get image size
 $img = imagecreatefromgif( "{$pathToImages}{$fname}" );
 $width = imagesx( $img );
 $height = imagesy( $img );
 // calculate thumbnail size
 $new_width = $thumbWidth;
 $new_height = floor( $height * ( $thumbWidth / $width ) );

 // create a new temporary image
 $tmp_img = imagecreatetruecolor( $new_width, $new_height );

 // copy and resize old image into new image
 imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

 // save thumbnail into a file
 imagegif( $tmp_img, "{$pathToThumbs}{$fname}" );
}

if ( strtolower($info['extension']) == 'bmp' ){
 // load image and get image size
 $img = imagecreatefromwbmp( "{$pathToImages}{$fname}" );
 $width = imagesx( $img );
 $height = imagesy( $img );
 // calculate thumbnail size
 $new_width = $thumbWidth;
 $new_height = floor( $height * ( $thumbWidth / $width ) );

 // create a new temporary image
 $tmp_img = imagecreatetruecolor( $new_width, $new_height );

 // copy and resize old image into new image
 imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

 // save thumbnail into a file
 imagewbmp( $tmp_img, "{$pathToThumbs}{$fname}" );
}

 // close the directory
 closedir( $dir );
}
///////////////////////////////////////////////////////////////////////////////////////////////////
//// End functions.php
///////////////////////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////////////
//// crop.php
///////////////////////////////////////////////////////////////////////////////////////////////////
<?php
session_start();


if ($_SERVER['REQUEST_METHOD'] == 'POST')
{  
    //echo $_SERVER['REQUEST_METHOD']
//;
    $_SESSION['imagecreationname']; //1432926753muna.jpg
   $src='demo_files/'.$_SESSION['imagecreationname'];//demo_files/1432927027book1.jpg
   //print_r($_POST);
//echo "hi";
//POSTArray ( [x] => 195 [y] => 235 [w] => 49 [h] => 49 ) hi

//exit;
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $_POST['w'],$_POST['h'] );//Resource id #4//$targ_w, $targ_h
//print_r($dst_r);
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$_POST['w'],$_POST['h'],$_POST['w'],$_POST['h']);

header('Content-type: image/jpeg');
imagejpeg($dst_r,null,90);
    //echo'<img src="'.$img_r.'" width="700" height="700">';
}

// If not a POST request, display page below:

?>


  <script src="../js/jquery.min.js"></script>
  <script src="../js/jquery.Jcrop.js"></script>


<script type="text/javascript">

  $(function(){

    $('#cropbox').Jcrop({
      aspectRatio: 1,
      onSelect: updateCoords
    });

  });

  function updateCoords(c)
  {
    var a=$('#x').val(c.x);
    var b=$('#y').val(c.y);
//alert(c);
//alert(a);
//alert(b);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };

  function checkCoords()
  {
    if (parseInt($('#w').val())) {
alert($('#x').val())//264
alert($('#y').val())//176
alert($('#w').val())//186
alert($('#h').val());//186
return true;
}
    alert('Please select a crop region then press submit.');
    return false;
  };

</script>
<style type="text/css">
  #target {
    background-color: #ccc;
    width: 500px;
    height: 330px;
    font-size: 24px;
    display: block;
  }


</style>

</head>
<body>
<?php
if(trim($_SESSION['imagecreationname'])!=''){
?>
<!-- This is the image we're attaching Jcrop to -->
<img src="demo_files/<?php echo $_SESSION['imagecreationname'] ;?>" id="cropbox" />
<!-- This is the form that our event handler fills -->
<form action="crop.php" method="post" onSubmit="return checkCoords();">
<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="Crop Image" class="btn btn-large btn-inverse" />
</form>
<?php
}
?>



</body>

</html>

///////////////////////////////////////////////////////////////////////////////////////////////////
//// End crop.php
///////////////////////////////////////////////////////////////////////////////////////////////////




No comments:

Post a Comment