Bonjour,
Je tente d'utiliser jCrop pour découper une photo.
Si je fais dans une page directe, ca fonctionne.
http://vincent-pieplu.com/projets/vmyf/upload_demo.php
Maintenant, je veux faire la même chose, à partir d'un upload, et bien, le cadre pour choisir la zone n'est plus modifiable :
http://vincent-pieplu.com/projets/vmyf/ (PHOTO 1 à tester)
Avez-vous une idée ?
Voici le code source pour upload_demo.php
Et voici l'autre qui ne marche pas
index.php
Et upload1.php
Je tente d'utiliser jCrop pour découper une photo.
Si je fais dans une page directe, ca fonctionne.
http://vincent-pieplu.com/projets/vmyf/upload_demo.php
Maintenant, je veux faire la même chose, à partir d'un upload, et bien, le cadre pour choisir la zone n'est plus modifiable :
http://vincent-pieplu.com/projets/vmyf/ (PHOTO 1 à tester)
Avez-vous une idée ?
Voici le code source pour upload_demo.php
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.min.css" type="text/css" />
<script type="text/javascript">
jQuery(function($){
var jcrop_api;
initJcrop();
function initJcrop() {
$('#target').Jcrop({
onRelease: { allowSelect: true },
allowSelect: 1,
allowResize: 1,
allowMove: 1,
bgOpacity: .3,
onChange: updateCoords,
onSelect: updateCoords
},function(){
jcrop_api = this;
jcrop_api.animateTo([0, 0, 100, 100]);
});
};
});
function updateCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
};
function checkCoords() {
if (parseInt($('#w').val())) return true;
alert('Sélectionner une partie de la photo avant de valider.');
return false;
};
</script>
<body>
<img src='http://vincent-pieplu.com/projets/vmyf/uploads/351391268054.jpg' alt='' id='target' />
</body>
</html>index.php
Code:
$('#photoimg1').live('change', function() {
$("#preview1").html('');
$("#preview1").html('<img src="http://d13yacurqjgara.cloudfront.net/users/34535/screenshots/631316/loader_gif.gif" alt="Uploading...."/>');
$("#imageform1").ajaxForm({
target: '#preview1'
}).submit();
});
<form id="imageform1" method="post" enctype="multipart/form-data" action="upload1.php">
Photo n°1 : <input type="file" name="photoimg1" id="photoimg1">
</form>
<div id="preview1"></div>Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.min.css" type="text/css" />
<script type="text/javascript">
jQuery(function($){
var jcrop_api;
initJcrop();
function initJcrop() {
$('#target').Jcrop({
onRelease: { allowSelect: true },
allowSelect: 1,
allowResize: 1,
allowMove: 1,
bgOpacity: .3,
onChange: updateCoords,
onSelect: updateCoords
},function(){
jcrop_api = this;
jcrop_api.animateTo([0, 0, 100, 100]);
});
};
});
function updateCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
};
function checkCoords() {
if (parseInt($('#w').val())) return true;
alert('Sélectionner une partie de la photo avant de valider.');
return false;
};
</script>
<body>
<?php
$output_dir = "uploads";
$hauteurMiniMax = 500; $largeurMiniMax = 342; $hauteurBigMax = 500; $largeurBigMax = 342;
$valid = false;
if(isset($_FILES["photoimg1"])) {
$fileName = $_FILES["photoimg1"]["name"];
$fileNameTmp = $_FILES["photoimg1"]["tmp_name"];
$exif = exif_read_data($fileNameTmp);
$img = getimagesize($fileNameTmp);
$typeFichier = exif_imagetype($fileNameTmp);
$largeurFichier = $img[0];
$hauteurFichier = $img[1];
if($typeFichier != 1 && $typeFichier != 2 && $typeFichier != 3) {
echo "Le format du fichier «" . $fileName . "» n'est pas conforme. Seuls les fichiers JPG, JPEG, GIF et PNG sont acceptés. Merci de choisir un autre fichier.";
}
else if($typeFichier==2) { $fichier_ext="jpg"; $source = imagecreatefromjpeg($fileNameTmp);}
else if($typeFichier==3) { $fichier_ext="png"; $source = imagecreatefrompng($fileNameTmp); }
else if($typeFichier==1) { $fichier_ext="gif"; $source = imagecreatefromgif($fileNameTmp);}
if($typeFichier == 1 || $typeFichier == 2 || $typeFichier == 3) {
$nbreMpxPhoto = ($largeurFichier*$hauteurFichier)/1000000;
if($nbreMpxPhoto > 5) {
echo "La photo «" . $fileName . "» est trop grande, merci de la redimensionner.";
}
else if($largeurFichier < 342 || $hauteurFichier < 500) {
echo "La photo «" . $fileName . "» est trop petite. Pour proposer des photos de qualité à nos visiteurs, merci d'ajouter des photos d'une taille minimum de 342x500px.";
}
else {
if ($hauteurFichier < $hauteurMiniMax) {
$hauteurMiniMax = $hauteurFichier;
}
if ($largeurFichier < $largeurMiniMax) {
$largeurMiniMax = $largeurFichier;
}
if ($hauteurFichier < $hauteurBigMax) {
$hauteurBigMax = $hauteurFichier;
}
if ($largeurFichier < $largeurBigMax) {
$largeurBigMax = $largeurFichier;
}
if ($largeurFichier > $hauteurFichier) {
$largeurBigFinal = $largeurBigMax;
$hauteurBigFinal = round($hauteurFichier*($largeurBigMax/$largeurFichier));
} else if ($hauteurFichier > $largeurFichier) {
$largeurBigFinal = round($largeurFichier*($hauteurBigMax/$hauteurFichier));
$hauteurBigFinal = $hauteurBigMax;
} else {
$largeurBigFinal = $largeurBigMax;
$hauteurBigFinal = $hauteurBigMax;
}
$image_grande = imagecreatetruecolor($largeurBigFinal,$hauteurBigFinal);
imagecopyresampled($image_grande, $source, 0, 0, 0, 0, $largeurBigFinal, $hauteurBigFinal, $largeurFichier, $hauteurFichier);
$fileName = mt_rand(1, 100) . time() . '.' . strtolower($fichier_ext);
imagejpeg($image_grande, $output_dir . '/' . $fileName);
imagedestroy($image_grande);
?>
<img src='<?php echo $output_dir; ?>/<?php echo $fileName; ?>' alt='' id='target' />
<form action="photo.php" method="post" onsubmit="return checkCoords();">
<input type="text" name="x" id="x" size="4"/>
<input type="text" name="y" id="y" size="4"/>
<input type="text" name="x2" id="x2" size="4"/>
<input type="text" name="y2" id="y2" size="4"/>
<input type="text" name="w" id="w" size="4"/>
<input type="text" name="h" id="h" size="4"/>
<input type="text" name="photo" value="<?php echo $fileName; ?>" />
<input type="submit" value="Valider" />
</form>
<?php
}
}
}
?>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire