0
I’m trying to make a system in which the user selects the image, so it cuts and at the end has to appear in my folder the cropped image... From now on I thank you all!!!
<!DOCTYPE html>
<html>
<head>
<title>Image</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="animate.js"></script>
<script src="nham/js/jquery.min.js"></script>
<script src="nham/js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="nham/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="user-image">
<form method="POST" action="upload.php" enctype="multipart/form-data">
<img id="uploadPreview" width="50%" height="40%"/>
<input type="file" id="image" name="img" accept="image" onchange="PreviewImage();"><br>
<label for="image" class="label">Selecionar Imagem</label>
<label for="image" class="label2">Selecionar outra Imagem</label>
<input type="submit" id="select_crop" value="Recortar Imagem!" ><br><br><br><br>
<!-- cooordenadas da cortagem -->
<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" />
<script type="text/javascript">
function PreviewImage() {
var ofreader = new FileReader();
ofreader.readAsDataURL(document.getElementById("image").files[0]);
ofreader.onload = function(ofrevent) {
document.getElementById("uploadPreview").src = ofrevent.target.result;
}
}
function setInfo(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
</script>
</form>
</div>
var main = function() {
$(".label2").hide();
$("#select_crop").hide();
$('#image').change(function() {
var jcrop;
$(".label").hide(200);
$(".label2").css({"visibility": "visible"});
$(".label2").fadeIn(200);
$("#select_crop").fadeIn(200);
$('#uploadPreview').css({"visibility": "visible"});
$('#ranger').css({"visibility": "visible"});
setTimeout(function() {
$('#uploadPreview').Jcrop({
onSelect: setInfo,
minSize: [100, 100],
maxSize: [300, 300],
aspectRatio: 1,
setSelect: [100, 200, 1000, 2000]
}, function() {
jcrop = this;
});
}, 500);
$('.label2').click(function() {
jcrop.destroy();
});
});
};
$(document).ready(main);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="animate.js"></script>
<script src="nham/js/jquery.min.js"></script>
<script src="nham/js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="nham/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php
$valid_ext = array('jpeg', 'png', 'jpg', 'gif');
$max_size = 200 * 1024;
$nw = $nh = 100;
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_FILES['img'])) {
$ext = strtolower(pathinfo($_FILES['img']['name'], PATHINFO_EXTENSION));
if (in_array($ext, $valid_ext)) {
$path = 'uploads/'. uniqid() . "." . $ext;
$data = file_get_contents($_FILES['img']['tmp_name']);
$vImg = imagecreatefromstring($data);
$dstImg = imagecreatetruecolor($nw, $nh);
imagecopyresampled($dstImg, $vImg, 0, 0, $_POST['x'], $_POST['y'], $nw, $nh, $_POST['w'], $_POST['h']);
imagejpeg($dstImg, $path);
echo "<img src='path' />";
} else {
echo 'unknown problem!';
}
} else {
echo 'file not set';
}
} else {
echo 'bad request!';
}
?>
send an image print......
– MagicHat
I just edited the question... I sent the image cut out, the problem and it gets all fucked up.
– Giovanni Custodio