Bild hochladen, über Div "zuschneiden"

  • Hallo Forum :)


    Ich habe eine Frage..


    Ich will ein Bild auf einen Server hochladen.
    Jedoch will ich davor das Bild "zuschneiden".


    Dazu soll es z.B. in ein Div geladen werden und per Maus zentriert werden.
    Das Bild kann auch über den Div-Rand hinausverschoben werden, sodass nur ein Auschnitt zusehen ist.
    Danach soll dieses "zugeschnittene" Bild auf den Server hochgeladen werden.


    Hat jemand eine Idee wie ich das machen kann?


    Vielen Dank im voraus! :)

  • Hi. Das ist so nicht ganz einfach, aber durchaus machbar.


    HTML 5 lässt mittels Javascript eine Datei von der Festplatte des Benutzers laden, dazu gibt es die FileReader Klasse. Ich habe mal ein funktionierendes Beispiel erstellt, eine Erklärung hierzu würde jedoch den Rahmen hier derzeit sprengen. Wenn sich Interessenten finden, kann ich gerne in Zukunft eine detaillierte Anleitung dazu anfertigen.


    Der Ablauf ist ganz einfach:

    • Benutzer wählt Bild zum Hochladen aus
    • Bild wird in Bereich zum Zuschneiden geladen
    • Bild kann verschoben werden
    • Formular wird abgesendet
    • PHP nimmt Argumente entgegen, erstellt mittels mehrerer image Funktionen den Bildausschnitt und speichert ihn unter /uploads/ (Schreibrechte benötigt!)


    Den Code gibt es hier oder im Anhang per .zip Archiv. Ich habe auf jQuery und jQuery UI zurückgegriffen um den Code etwas schmaler zu halten. Das FileReader Objekt ist nicht auf jQuery angewiesen.


    Hier noch ein paar Quellen:
    php.net - Dateiuploads mit POST - Manual
    php.net - GD- und Imagefunktionen
    Mozilla Developer Network - Zugriff auf Dateien von Webapplikationen


    Funktionalität getestet und bestätigt in aktuellen Versionen von Firefox, Chrome, Opera, Internet Explorer und Edge.
    FileReader Kompatibilität


    Wenn du (oder jemand anders) eine spezielle Verständnisfragte hast(/hat) immer heraus damit. Ich kann nur wie gesagt leider zu diesem Zeitpunkt nicht mal eben anfängerfreundlich erklären "wie das denn funktioniert" (I'm sorry).


    upload.php


    style.css


    imageCropper.js


    uploadLogic.php

  • Das kann imagecopyresampled


    Funktioniert fast genau so wie imagecopy, außer das nun zusätzlich die gewünschten Maße und Koordinaten angegeben werden. Die Koordinaten bleiben bei einem einfachen resize 0 und 0, die Breite und Höhe ($newWidth, $newHeight) kannst du mit PHP dynamisch generieren lassen oder mit ins Formular einbauen.


    PHP: 26
    1. $croppedImage = imagecopyresampled(
    2. $newImage,
    3. $uploadedImage,
    4. 0, 0,
    5. 0, 0,
    6. $newWidth, $newHeight
    7. $cropArray["x"], $cropArray["y"],
    8. $cropArray["width"], $cropArray["height"]
    9. );