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
je suis developper fullstack, Dévelopeur android (AAD), créateur de letecode.com, bloggeur, formateur, fondateur de Guide Light System, j'aime la science informatique 😎👨💻
Abonnez vous !
Recevez les dernières nouvelles de letecode directement dans votre boîte de réception. Réjoignez +500 Abonnés, Nous n'envoyons pas des spam !
Voir plus
Tutoriel Laravel 8 : Générer et Lire un fichier Sitemap XML
Tutoriel Sitemap XML dynamique avec Laravel 8; Tout au long de ce guide, nous parlerons de la création d'un fichier sitemap.xml dynamique dans l'application laravel. De plus, nous allons également décrire comment lire le fichier xml du sitemap dans l'application laravel.
johnmbiya
Laravel
0 commentaire (s)
Suivez nous
Newsletter
Recevez les dernières nouvelles de letecode directement dans votre boîte de réception. Réjoignez +300 Abonnés, Nous n'envoyons pas des spam !
Questions de la comunauté
- Comment optimiser les requêtes eloquent afin de charger une masse importante de données plus rapidement ? Résolu
- Laravel - Comment obtenir la différence de temps en minutes Résolu
- React pour le front et Laravel le back, quelle conséquence en terme de performance et de compatibilité?
- SQLSTATE[42000]: Syntax error or access violation (Laravel) Résolu
- Comment rediriger mon site http vers https automatiquement ? Résolu
Laissez votre commentaire à @johnmbiya