{"id":25071,"date":"2021-05-30T18:47:00","date_gmt":"2021-05-30T15:47:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25071"},"modified":"2021-10-18T02:10:21","modified_gmt":"2021-10-17T23:10:21","slug":"comment-telecharger-recadrer-et-redimensionner-une-image-a-l-aide-de-jquery-et-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-telecharger-recadrer-et-redimensionner-une-image-a-l-aide-de-jquery-et-php\/","title":{"rendered":"Comment t\u00e9l\u00e9charger, recadrer et redimensionner une image \u00e0 l’aide de jQuery et PHP"},"content":{"rendered":"

Si vous ex\u00e9cutez un site Web, vous souhaiterez peut-\u00eatre recadrer l’image dans certains sc\u00e9narios. Supposons que vous souhaitiez autoriser l’utilisateur \u00e0 recadrer ses images de profil avant le t\u00e9l\u00e9chargement. Dans cet article, nous \u00e9tudions comment t\u00e9l\u00e9charger, recadrer et redimensionner l’image en utilisant imgAreaSelect et PHP.<\/p>\n

Nous pouvons dire que lorsque nous recadrons l’image, nous la redimensionnons en fait en l’ajustant avec les coordonn\u00e9es fournies de la partie recadr\u00e9e.<\/p>\n

imgAreaSelect<\/a> est un plugin jQuery qui fournit une fonctionnalit\u00e9 pour recadrer les images. C’est un plugin l\u00e9ger et facile \u00e0 utiliser.<\/p>\n

Pour commencer, vous devez utiliser le plugin imgAreaSelect et la biblioth\u00e8que d’ images d’intervention<\/a>. En utilisant imgAreaSelect, nous choisissons la zone d’image qui doit \u00eatre recadr\u00e9e et la biblioth\u00e8que d’images Internention nous aide \u00e0 stocker la version originale et copi\u00e9e d’une image sur le serveur.<\/p>\n

Cela dit, examinons comment t\u00e9l\u00e9charger, recadrer et redimensionner l’image \u00e0 l’aide de jQuery et PHP.<\/p>\n

Installation<\/h3>\n

T\u00e9l\u00e9chargez le plugin imgAreaSelect \u00e0<\/a> partir du lien donn\u00e9. Pour l’installation d’Interventon Image, je recommande d’utiliser Composer<\/a>. Ex\u00e9cutez la commande ci-dessous dans le r\u00e9pertoire racine du projet pour installer la biblioth\u00e8que d’images d’intervention.<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Lorsque vous avez termin\u00e9, assurez-vous que la structure de votre r\u00e9pertoire ressemble \u00e0 une capture d’\u00e9cran ci-dessous.<\/p>\n
\"Comment<\/a><\/p>\n
Comment utiliser imgAreaSelect<\/h3>\n
Pour utiliser imgAreaSelect, nous devons d’abord inclure leurs fichiers CSS et JS avec la biblioth\u00e8que jQuery.<\/p>\n
<link rel=\"stylesheet\" href=\"css\/imgareaselect.css\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script src=\"js\/jquery.imgareaselect.js\"><\/script><\/code><\/pre>\n
Ensuite, nous avons besoin d’un formulaire simple o\u00f9 l’utilisateur peut parcourir l’image et la soumettre pour un traitement c\u00f4t\u00e9 serveur.<\/p>\n
<form action=\"crop.php\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0Upload Image: <input type=\"file\" name=\"image\" id=\"image\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"x1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"y1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"w\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"h\" value=\"\" \/><br><br>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n\u00a0\n<p><img id=\"previewimage\" style=\"display:none;\"\/><\/p><\/code><\/pre>\n
Le formulaire ci-dessus affichera le bouton de saisie et de soumission du fichier. J’ai pris des champs cach\u00e9s dans le formulaire qui devront recadrer l’image c\u00f4t\u00e9 serveur. Fondamentalement, ces champs cach\u00e9s envoient les coordonn\u00e9es de l’image pour la recadrer.<\/p>\n
Lorsque l’utilisateur parcourt l’image, nous montrerons l’image o\u00f9 un utilisateur peut s\u00e9lectionner la zone qu’il doit recadrer. Le code ci-dessous permet \u00e0 l’utilisateur de pr\u00e9visualiser l’image et de choisir une zone de l’image \u00e0 recadrer.<\/p>\n
<script>\njQuery(function($) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0var p = $(\"#previewimage\");\n\u00a0\u00a0\u00a0\u00a0$(\"body\").on(\"change\", \"#image\", function(){\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var imageReader = new FileReader();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.readAsDataURL(document.getElementById(\"image\").files[0]);\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.onload = function (oFREvent) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0p.attr('src', oFREvent.target.result).fadeIn();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$('#previewimage').imgAreaSelect({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onSelectEnd: function (img, selection) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"x1\"]').val(selection.x1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"y1\"]').val(selection.y1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"w\"]').val(selection.width);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"h\"]').val(selection.height);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n});\n<\/script><\/code><\/pre>\n
T\u00e9l\u00e9chargement, recadrage et redimensionnement de l’image c\u00f4t\u00e9 serveur<\/h3>\n
Lors de la soumission du formulaire, il redirige vers le crop.php<\/code>fichier o\u00f9 nous t\u00e9l\u00e9chargeons et recadrons l’image c\u00f4t\u00e9 serveur. Ce fichier accepte l’entr\u00e9e de fichier et les coordonn\u00e9es de l’image pour le recadrage.<\/p>\n
Tout d’abord, incluons l’environnement de la biblioth\u00e8que d’images d’intervention.<\/p>\n
<?php\nrequire 'vendor\/autoload.php';\n\u00a0\nuse InterventionImageImageManagerStatic as Image;<\/code><\/pre>\n
Je vais utiliser une crop()<\/code>m\u00e9thode de biblioth\u00e8que pour cr\u00e9er la version recadr\u00e9e de l’image originale. Les param\u00e8tres de la fonction crop() sont la largeur, la hauteur et les coordonn\u00e9es des axes x et y. Vous pouvez en savoir plus \u00e0 ce sujet sur leur documentation<\/a>.<\/p>\n
recadrer.php<\/strong><\/p>\n
<?php\nrequire 'vendor\/autoload.php';\n\u00a0\nuse InterventionImageImageManagerStatic as Image;\n\u00a0\nif(isset($_POST['submit'])) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0if(isset($_FILES['image']['name']) && !empty($_FILES['image']['name'])) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!file_exists('images')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir('images', 0755);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = $_FILES['image']['name'];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filepath = 'images\/'. $filename;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0move_uploaded_file($_FILES['image']['tmp_name'], $filepath);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!file_exists('images\/crop')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir('images\/crop', 0755);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ crop image\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img = Image::make($filepath);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$croppath = 'images\/crop\/'. $filename;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->crop($_POST['w'], $_POST['h'], $_POST['x1'], $_POST['y1']);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->save($croppath);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"<img src='\". $croppath .\"' \/>\";\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
C’est \u00e7a! Maintenant, si vous testez le flux, vous obtiendrez la version originale et recadr\u00e9e des images stock\u00e9es respectivement dans les r\u00e9pertoires ‘images’ et ‘crop’.<\/p>\n
D\u00e9finir la largeur maximale sur l’image<\/h3>\n
Parfois, l’utilisateur peut vouloir d\u00e9finir la largeur maximale d’une version recadr\u00e9e d’une image. imgAreaSelect fournit plusieurs options comme aspectRatio, maxWidth, maxHeight, etc. pour personnaliser le r\u00e9sultat final d’une image. Un utilisateur peut utiliser l’option maxWidth pour d\u00e9finir la largeur maximale de l’image.<\/p>\n
$('#previewimage').imgAreaSelect({\n\u00a0\u00a0\u00a0\u00a0maxWidth: '1000', \/\/ this value is in pixels\n\u00a0\u00a0\u00a0\u00a0onSelectEnd: function (img, selection) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"x1\"]').val(selection.x1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"y1\"]').val(selection.y1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"w\"]').val(selection.width);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"h\"]').val(selection.height);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n
J’esp\u00e8re que vous comprenez comment t\u00e9l\u00e9charger, recadrer et redimensionner l’image \u00e0 l’aide de jQuery et PHP. J’aimerais conna\u00eetre votre opinion dans la section des commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n