Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
162 views
in Technique[技术] by (71.8m points)

PHP & Jquery Image crop and upload

When a user uploads a picture, pop up window should come, where he'll crop the image, after this is done. I want to use php script to upload this to folder but i want cropped image and thumbnail of cropped image to be present.After cropping is done,then he'll click upload button which will upload cropped image then create thumbnail of it and upload them to a folders.

I tried many plug-ins but could not find one for my requirement.

Plug-ins that i tried are http://deepliquid.com/projects/Jcrop/demos.php

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-jquery-image-cropping-plug-in-from-scratch-part-ii/

Any help would be appreciated

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

This is simple tutorial for image crop and replace First create view file for select image

<!DOCTYPE html>
 <html lang="en">
 <head>
 <script type="text/javascript"     src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
<script type="text/javascript" src="js/cropsetup.js"></script>
</head>
 <body>
<div id="wrapper">
 <div class="jc-demo-box">
 <img src="uploads/Chrysanthemum.jpg" id="target" alt="[Jcrop Example]" />
  <div id="form-container">
  <form id="cropimg" name="cropimg" method="post" action="crop.php" target="_blank">
          <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="hidden" id="image_name" name="image_name" value="uploads/Chrysanthemum.jpg">
          <input type="submit" id="submit" value="Crop Image!">
  </form>
</div>
 </div>
</div>
</body>
</html>

then create image crop php file

    <?php

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$targ_w =$_POST['w'];
$targ_h =$_POST['h'];

$jpeg_quality = 90;

if(!isset($_POST['x']) || !is_numeric($_POST['x'])) {
  die('Please select a crop area.');
}

$src = $_POST['image_name'];
$system = explode(".", $src);

if (preg_match("/jpg|jpeg/", $system[1]))
{
    $src_img=imagecreatefromjpeg($src);
}
if (preg_match("/png/", $system[1]))
{
    $src_img = imagecreatefrompng($src);
}
if (preg_match("/gif/", $system[1]))
{
    $src_img = imagecreatefromgif($src);
}

$dst_r = ImageCreateTrueColor($targ_w, $targ_h);

imagecopyresampled($dst_r,$src_img,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);

if (preg_match("/png/", $system[1]))
{
    imagepng($dst_r, $_POST['image_name']); 
} 
else if (preg_match("/gif/", $system[1]))
{
    imagegif($dst_r, $_POST['image_name']);
}
else
{
    imagejpeg($dst_r, $_POST['image_name']); 
}

imagedestroy($dst_r);   
imagedestroy($src_img);

exit;
   }

  ?>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...