{"id":25044,"date":"2021-05-30T18:22:00","date_gmt":"2021-05-30T15:22:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25044"},"modified":"2021-10-18T02:35:39","modified_gmt":"2021-10-17T23:35:39","slug":"wie-man-ein-bild-mit-jquery-und-php-hochlaedt-zuschneidet-und-seine-groesse-aendert","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/wie-man-ein-bild-mit-jquery-und-php-hochlaedt-zuschneidet-und-seine-groesse-aendert\/","title":{"rendered":"Wie man ein Bild mit jQuery und PHP hochl\u00e4dt, zuschneidet und seine Gr\u00f6\u00dfe \u00e4ndert"},"content":{"rendered":"

Wenn Sie eine Website betreiben, m\u00f6chten Sie das Bild in bestimmten Szenarien m\u00f6glicherweise zuschneiden. Angenommen, Sie m\u00f6chten 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\u00f6\u00dfe \u00e4ndern.<\/p>\n

Wir k\u00f6nnen sagen, dass wir beim Zuschneiden des Bildes die Gr\u00f6\u00dfe tats\u00e4chlich an die bereitgestellten Koordinaten des zugeschnittenen Teils anpassen.<\/p>\n

imgAreaSelect<\/a> ist ein jQuery-Plugin, das eine Funktion zum Zuschneiden der Bilder bietet. Es ist ein leichtes Plugin und einfach zu bedienen.<\/p>\n

Um zu beginnen, m\u00fcssen Sie das imgAreaSelect-Plugin und die Intervention Image-<\/a> Bibliothek verwenden. Mit imgAreaSelect w\u00e4hlen wir den zu beschneidenden Bildbereich aus und die Internention Image Library hilft uns, die urspr\u00fcngliche und kopierte Version eines Bildes auf dem Server zu speichern.<\/p>\n

Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie das Bild mit jQuery und PHP hochladen, zuschneiden und die Gr\u00f6\u00dfe \u00e4ndern.<\/p>\n

Installation<\/h3>\n

Laden Sie das imgAreaSelect-<\/a> Plugin \u00fcber den angegebenen Link herunter. F\u00fcr die Installation von Interventon Image empfehle ich Composer<\/a>. F\u00fchren Sie den folgenden Befehl im Stammverzeichnis des Projekts aus, um die Intervention Image-Bibliothek zu installieren.<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Wenn Sie fertig sind, stellen Sie sicher, dass Ihre Verzeichnisstruktur wie in einem Screenshot unten aussieht.<\/p>\n
\"Wie<\/a><\/p>\n
So verwenden Sie imgAreaSelect<\/h3>\n
Um imgAreaSelect verwenden zu k\u00f6nnen, m\u00fcssen wir zun\u00e4chst ihre CSS- und JS-Datei zusammen mit der jQuery-Bibliothek einbinden.<\/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
Als n\u00e4chstes ben\u00f6tigen wir ein einfaches Formular, in dem der Benutzer das Bild durchsuchen und zur serverseitigen Verarbeitung senden kann.<\/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
Das obige Formular zeigt die Dateieingabe und die Schaltfl\u00e4che zum Senden an. Ich habe versteckte Felder im Formular genommen, die das Bild auf der Serverseite zuschneiden m\u00fcssen. Grunds\u00e4tzlich senden diese versteckten Felder Koordinaten des Bildes zum Zuschneiden.<\/p>\n
Wenn der Benutzer das Bild durchsucht, zeigen wir das Bild an, in dem ein Benutzer den Bereich ausw\u00e4hlen kann, den er zuschneiden m\u00f6chte. Der folgende Code erm\u00f6glicht es dem Benutzer, eine Vorschau des Bildes anzuzeigen und einen Bereich des Bildes zum Zuschneiden auszuw\u00e4hlen.<\/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
Serverseitiges Hochladen, Zuschneiden und \u00c4ndern der Bildgr\u00f6\u00dfe<\/h3>\n
Nach dem Absenden des Formulars leitet es zu der crop.php<\/code>Datei weiter, in die wir das Bild hochladen und serverseitig zuschneiden. Diese Datei akzeptiert Dateieingaben und Koordinaten des Bildes zum Zuschneiden.<\/p>\n
Lassen Sie uns zun\u00e4chst die Umgebung der Interventionsbildbibliothek einbeziehen.<\/p>\n
<?php\nrequire 'vendor\/autoload.php';\n\u00a0\nuse InterventionImageImageManagerStatic as Image;<\/code><\/pre>\n
Ich werde eine crop()<\/code>Methode einer Bibliothek verwenden, um die beschnittene Version des Originalbilds zu erstellen. Parameter f\u00fcr die Funktion crop() sind Breite, H\u00f6he und Koordinaten der x- und y-Achse. Sie k\u00f6nnen mehr dar\u00fcber in ihrer Dokumentation<\/a> lesen .<\/p>\n
crop.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
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.<\/p>\n
Legen Sie die maximale Breite f\u00fcr das Bild fest<\/h3>\n
Manchmal m\u00f6chte der Benutzer m\u00f6glicherweise die maximale Breite f\u00fcr eine beschnittene Version eines Bildes definieren. imgAreaSelect bietet verschiedene Optionen wie z. B. Seitenverh\u00e4ltnis, maxWidth, maxHeight usw., um das Endergebnis eines Bildes anzupassen. Ein Benutzer kann die Option maxWidth verwenden, um die maximale Breite f\u00fcr das Bild festzulegen.<\/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
Ich hoffe, Sie verstehen, wie Sie das Bild mit jQuery und PHP hochladen, zuschneiden und die Gr\u00f6\u00dfe \u00e4ndern. Ich w\u00fcrde gerne Ihre Meinung im Kommentarbereich unten erfahren.<\/p>\n
Zum Thema passende Artikel<\/h4>\n