Wie man ein Bild mit jQuery und PHP hochlädt, zuschneidet und seine Größe ändert

Last updated 18. Oktober 2021

Inhalt

Serverseitiges Hochladen, Zuschneiden und Ändern der Bildgröße

Legen Sie die maximale Breite für das Bild fest

Wenn Sie eine Website betreiben, möchten Sie das Bild in bestimmten Szenarien möglicherweise zuschneiden. Angenommen, Sie möchten dem Benutzer erlauben, seine Profilbilder vor dem Hochladen zuzuschneiden. In diesem Artikel untersuchen wir, wie Sie das Bild mit imgAreaSelect und PHP hochladen, zuschneiden und die Größe ändern.

Wir können sagen, dass wir beim Zuschneiden des Bildes die Größe tatsächlich an die bereitgestellten Koordinaten des zugeschnittenen Teils anpassen.

imgAreaSelect ist ein jQuery-Plugin, das eine Funktion zum Zuschneiden der Bilder bietet. Es ist ein leichtes Plugin und einfach zu bedienen.

Um zu beginnen, müssen Sie das imgAreaSelect-Plugin und die Intervention Image- Bibliothek verwenden. Mit imgAreaSelect wählen wir den zu beschneidenden Bildbereich aus und die Internention Image Library hilft uns, die ursprüngliche und kopierte Version eines Bildes auf dem Server zu speichern.

Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie das Bild mit jQuery und PHP hochladen, zuschneiden und die Größe ändern.

Installation

Laden Sie das imgAreaSelect- Plugin über den angegebenen Link herunter. Für die Installation von Interventon Image empfehle ich Composer. Führen Sie den folgenden Befehl im Stammverzeichnis des Projekts aus, um die Intervention Image-Bibliothek zu installieren.

composer require intervention/image

Wenn Sie fertig sind, stellen Sie sicher, dass Ihre Verzeichnisstruktur wie in einem Screenshot unten aussieht.

So verwenden Sie imgAreaSelect

Um imgAreaSelect verwenden zu können, müssen wir zunächst ihre CSS- und JS-Datei zusammen mit der jQuery-Bibliothek einbinden.

<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>

Als nächstes benötigen wir ein einfaches Formular, in dem der Benutzer das Bild durchsuchen und zur serverseitigen Verarbeitung senden kann.

<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>

Das obige Formular zeigt die Dateieingabe und die Schaltfläche zum Senden an. Ich habe versteckte Felder im Formular genommen, die das Bild auf der Serverseite zuschneiden müssen. Grundsätzlich senden diese versteckten Felder Koordinaten des Bildes zum Zuschneiden.

Wenn der Benutzer das Bild durchsucht, zeigen wir das Bild an, in dem ein Benutzer den Bereich auswählen kann, den er zuschneiden möchte. Der folgende Code ermöglicht es dem Benutzer, eine Vorschau des Bildes anzuzeigen und einen Bereich des Bildes zum Zuschneiden auszuwählen.

<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>

Serverseitiges Hochladen, Zuschneiden und Ändern der Bildgröße

Nach dem Absenden des Formulars leitet es zu der crop.phpDatei weiter, in die wir das Bild hochladen und serverseitig zuschneiden. Diese Datei akzeptiert Dateieingaben und Koordinaten des Bildes zum Zuschneiden.

Lassen Sie uns zunächst die Umgebung der Interventionsbildbibliothek einbeziehen.

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

Ich werde eine crop()Methode einer Bibliothek verwenden, um die beschnittene Version des Originalbilds zu erstellen. Parameter für die Funktion crop() sind Breite, Höhe und Koordinaten der x- und y-Achse. Sie können mehr darüber in ihrer Dokumentation lesen .

crop.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 ."' />";
    }
}

Das ist es! Wenn Sie nun den Flow testen, erhalten Sie die Original- und die zugeschnittene Version der Bilder, die in den Verzeichnissen ‘images’ bzw. ‘crop’ gespeichert sind.

Legen Sie die maximale Breite für das Bild fest

Manchmal möchte der Benutzer möglicherweise die maximale Breite für eine beschnittene Version eines Bildes definieren. imgAreaSelect bietet verschiedene Optionen wie z. B. Seitenverhältnis, maxWidth, maxHeight usw., um das Endergebnis eines Bildes anzupassen. Ein Benutzer kann die Option maxWidth verwenden, um die maximale Breite für das Bild festzulegen.

$('#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);            
    }
});

Ich hoffe, Sie verstehen, wie Sie das Bild mit jQuery und PHP hochladen, zuschneiden und die Größe ändern. Ich würde gerne Ihre Meinung im Kommentarbereich unten erfahren.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net