Comment télécharger, recadrer et redimensionner une image à l’aide de jQuery et PHP

Dernière mise à jour Oct 18, 2021

Teneur

Téléchargement, recadrage et redimensionnement de l’image côté serveur

Installation

Téléchargez le plugin imgAreaSelect à partir du lien donné. Pour l’installation d’Interventon Image, je recommande d’utiliser Composer. Exécutez la commande ci-dessous dans le répertoire racine du projet pour installer la bibliothèque d’images d’intervention.

composer require intervention/image

Lorsque vous avez terminé, assurez-vous que la structure de votre répertoire ressemble à une capture d’écran ci-dessous.

Comment utiliser imgAreaSelect

Pour utiliser imgAreaSelect, nous devons d’abord inclure leurs fichiers CSS et JS avec la bibliothèque jQuery.

<link rel="stylesheet" href="css/imgareaselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/jquery.imgareaselect.js"></script>

Ensuite, nous avons besoin d’un formulaire simple où l’utilisateur peut parcourir l’image et la soumettre pour un traitement côté serveur.

<form action="crop.php" method="post" enctype="multipart/form-data">
    Upload Image: <input type="file" name="image" id="image" />
    <input type="hidden" name="x1" value="" />
    <input type="hidden" name="y1" value="" />
    <input type="hidden" name="w" value="" />
    <input type="hidden" name="h" value="" /><br><br>
    <input type="submit" name="submit" value="Submit" />
</form>
 
<p><img id="previewimage" style="display:none;"/></p>

Le formulaire ci-dessus affichera le bouton de saisie et de soumission du fichier. J’ai pris des champs cachés dans le formulaire qui devront recadrer l’image côté serveur. Fondamentalement, ces champs cachés envoient les coordonnées de l’image pour la recadrer.

Lorsque l’utilisateur parcourt l’image, nous montrerons l’image où un utilisateur peut sélectionner la zone qu’il doit recadrer. Le code ci-dessous permet à l’utilisateur de prévisualiser l’image et de choisir une zone de l’image à recadrer.

<script>
jQuery(function($) {
 
    var p = $("#previewimage");
    $("body").on("change", "#image", function(){
 
        var imageReader = new FileReader();
        imageReader.readAsDataURL(document.getElementById("image").files[0]);
     
        imageReader.onload = function (oFREvent) {
            p.attr('src', oFREvent.target.result).fadeIn();
        };
    });
 
    $('#previewimage').imgAreaSelect({
        onSelectEnd: function (img, selection) {
            $('input[name="x1"]').val(selection.x1);
            $('input[name="y1"]').val(selection.y1);
            $('input[name="w"]').val(selection.width);
            $('input[name="h"]').val(selection.height);            
        }
    });
});
</script>

Téléchargement, recadrage et redimensionnement de l’image côté serveur

Lors de la soumission du formulaire, il redirige vers le crop.phpfichier où nous téléchargeons et recadrons l’image côté serveur. Ce fichier accepte l’entrée de fichier et les coordonnées de l’image pour le recadrage.

Tout d’abord, incluons l’environnement de la bibliothèque d’images d’intervention.

<?php
require 'vendor/autoload.php';
 
use InterventionImageImageManagerStatic as Image;

Je vais utiliser une crop()méthode de bibliothèque pour créer la version recadrée de l’image originale. Les paramètres de la fonction crop() sont la largeur, la hauteur et les coordonnées des axes x et y. Vous pouvez en savoir plus à ce sujet sur leur documentation.

recadrer.php

<?php
require 'vendor/autoload.php';
 
use InterventionImageImageManagerStatic as Image;
 
if(isset($_POST['submit'])) {
     
    if(isset($_FILES['image']['name']) && !empty($_FILES['image']['name'])) {
 
        if(!file_exists('images')) {
            mkdir('images', 0755);
        }
 
        $filename = $_FILES['image']['name'];
        $filepath = 'images/'. $filename;
        move_uploaded_file($_FILES['image']['tmp_name'], $filepath);
         
        if(!file_exists('images/crop')) {
            mkdir('images/crop', 0755);
        }
 
        // crop image
        $img = Image::make($filepath);
        $croppath = 'images/crop/'. $filename;
 
        $img->crop($_POST['w'], $_POST['h'], $_POST['x1'], $_POST['y1']);
        $img->save($croppath);
 
        echo "<img src='". $croppath ."' />";
    }
}

C’est ça! Maintenant, si vous testez le flux, vous obtiendrez la version originale et recadrée des images stockées respectivement dans les répertoires ‘images’ et ‘crop’.

Définir la largeur maximale sur l’image

Parfois, l’utilisateur peut vouloir définir la largeur maximale d’une version recadrée d’une image. imgAreaSelect fournit plusieurs options comme aspectRatio, maxWidth, maxHeight, etc. pour personnaliser le résultat final d’une image. Un utilisateur peut utiliser l’option maxWidth pour définir la largeur maximale de l’image.

$('#previewimage').imgAreaSelect({
    maxWidth: '1000', // this value is in pixels
    onSelectEnd: function (img, selection) {
        $('input[name="x1"]').val(selection.x1);
        $('input[name="y1"]').val(selection.y1);
        $('input[name="w"]').val(selection.width);
        $('input[name="h"]').val(selection.height);            
    }
});

J’espère que vous comprenez comment télécharger, recadrer et redimensionner l’image à l’aide de jQuery et PHP. J’aimerais connaître votre opinion dans la section des commentaires ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net