PHP - Comment recadrer une image avant de la télécharger à l'aide de Cropper Js ?
Parfois vous avez besoin que les images de profil de vos utilisateurs soient carrées et que les utilisateurs recadre leurs profil, voici une astuce.
Dans ce tutoriel, vous apprendrez l'exemple de PHP avec cropper.js. cet exemple vous aidera à recadrer l'image de profil de vos utiliseurs avant le téléchargement.
Cropper.js est un plugin JavaScript/jQuery facile à utiliser pour le recadrage d'images avec prise en charge des aperçus en direct et des proportions personnalisées.
Je vais utiliser le modèle view dans l'exemple. affichage du modèle pour télécharger l'image et recadrer avec l'aperçu de l'image.
index.html
<!DOCTYPE html>
<html>
<head>
<title>PHP recadrer l'image avant telechargement</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" integrity="sha256-jKV9n9bkk/CTP8zbtEtnKaKf+ehRovOYeKoyfthwbC8=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js" integrity="sha256-CgvH7sz3tHhkiVKh05kSUgG97YtzYNnWt6OXcmYzqHY=" crossorigin="anonymous"></script>
</head>
<style type="text/css">
img {
display: block;
max-width: 100%;
}
.preview {
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
}
.modal-lg {
max-width: 1000px !important;
}
</style>
<body>
<div class="container">
<h1>PHP recadrer l'image avant telechargement - Letecode</h1>
<form method="post">
<div class="form-group">
<input type="file" class="form-control image" name="image" >
</div>
</form>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Recadrer l'image</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row">
<div class="col-md-8">
<img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
</div>
<div class="col-md-4">
<div class="preview"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary" id="crop">Recadrer</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var $modal = $('#modal');
var image = document.getElementById('image');
var cropper;
$("body").on("change", ".image", function(e) {
var files = e.target.files;
var done = function(url) {
image.src = url;
$modal.modal('show');
};
var reader;
var file;
var url;
if (files && files.length > 0) {
file = files[0];
if (URL) {
done(URL.createObjectURL(file));
} else if (FileReader) {
reader = new FileReader();
reader.onload = function(e) {
done(reader.result);
};
reader.readAsDataURL(file);
}
}
});
$modal.on('shown.bs.modal', function() {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 3,
preview: '.preview'
});
}).on('hidden.bs.modal', function() {
cropper.destroy();
cropper = null;
});
$("#crop").click(function() {
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
canvas.toBlob(function(blob) {
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
$.ajax({
type: "POST",
dataType: "json",
url: "upload.php",
data: {
image: base64data
},
success: function(data) {
console.log(data);
$modal.modal('hide');
alert("Image téléchargée avec success");
}
});
}
});
})
</script>
</body>
</html>
Avec PHP nous recevons le fichier et enregistrons dans un dossier sur le serveur.
traitement.php
<?php
$folderPath = 'upload/';
$image_parts = explode(";base64,", $_POST['image']);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$file = $folderPath . uniqid() . '.png';
file_put_contents($file, $image_base64);
echo json_encode(["Image téléchargée avec success"]);
Pour en savoir plus, consulter la documentation officielle de Cropper.js
Voir plus
7 meilleurs astuces pour apprendre plus rapidement
Les Trucs et Astuces0 commentaire(s)
Posts similaires
Comment envoyer un mail en PHP avec mail(), SMTP, Phpmailer
PHP conçu pour le développement Web
Programmation orientée objet en PHP
Catégories
Soyez au courant des dernières tendances
Abonnez-vous pour obtenir les meilleurs articles, tutoriels, astuces et informations !
Laissez votre commentaire à @johnmbiya