How to Upload ,Crop photo and save in php
Dependencies
---------------
cropper.min.js
cropper.min.css
jquery.js
<?php
if (isset($_POST["x"])) {
$targ_w = $targ_h = 200;
$jpeg_quality = 90;
$src = $_POST['image'];
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-type: image/jpeg');
imagejpeg($dst_r,'dump_images/hot_balloon2.jpg',$jpeg_quality);
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cropper</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="http://localhost:1202/code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<link href="https://cdn.rawgit.com/fengyuanchen/cropper/v0.11.1/dist/cropper.min.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/fengyuanchen/cropper/v0.11.1/dist/cropper.min.js"></script>
</head>
<body>
<div>
<form>
<input type='file' onchange="readURL(this);" />
<img id="image" src="" alt="Picture">
<img id="image1" src="" alt="Picture">
<div class="preview"></div>
<input type="button" name="id" value="Save" id="Shareitem">
<input type="hidden" id="hdnx"/>
<input type="hidden" id="hdny" />
<input type="hidden" id="hdnw" />
<input type="hidden" id="hdnh" />
<input type="hidden" id="hdnr" />
<input type="hidden" id="hdnsx" />
<input type="hidden" id="hdnsy" />
</form>
</div>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image')
.attr('src', e.target.result)
.width(600)
.height(600);
intialize();
};
reader.readAsDataURL(input.files[0]);
}
}
function intialize() {
var imageURL = $("#image").attr("src");
var imageBox = $('#image');
var options = {
aspectRatio: 1,
movable: true,
zoomable: true,
responsive: true,
center: true,
scalable: true,
crop: getcroparea
};
if (imageURL != null) {
console.log("It's not empty, building dedault box!");
var DefaultCropBoxOptionObj = {
height: 25,
width: 25
};
console.log(DefaultCropBoxOptionObj);
imageBox.cropper(options);
imageBox.cropper('setData', DefaultCropBoxOptionObj);
imageBox.cropper('replace', imageURL);
}
}
function getcroparea(c) {
$('#hdnx').val(parseInt(c.x));
$('#hdny').val(parseInt(c.y));
$('#hdnw').val(parseInt(c.width));
$('#hdnh').val(parseInt(c.height));
$('#hdnr').val(parseInt(c.rotate));
$('#hdnsx').val(parseInt(c.scaleX));
$('#hdnsy').val(parseInt(c.scaleY));
};
$(document).ready(function(){
$(document).on('click', '#Shareitem', function(){
var hdnx = $("#hdnx").val();
var hdny = $("#hdny").val();
var hdnw = $("#hdnw").val();
var hdnh = $("#hdnh").val();
$.ajax ({
type: "POST",
url: "cropper_dropzone.php",
data: {x:hdnx,y:hdny,h:hdnh,w:hdnw,image: $("#image").attr("src")},
success: function( result ) {
alert(result);
}
});
});
});
</script>
</body>
</html>
[ If you like my work please donate :) you can see donate button on top left side ]
