[JS] Ausschnitt aus Bild speichern

  • Guten Tag,

    Auf eine Empfehlung von einem Bekannten habe ich mich hier angemeldet und ich habe ein Problem mit Javascript und weis nicht, wie ich das Problem lösen kann und brauche eure Hilfe.

    Folgendes möchte ich realisieren:

    Es wird ein Bild im Browser angezeigt. Wenn man mit der Maus über das Bild fährt erscheint um den Mauszeiger ein Kasten. Wenn man nun auf auf einen Bereich des Bildes klickt, wird dieser Teil (innerhalb des Kastens) aus dem Bild "ausgeschnitten" und auf dem Server abgespeichert.

    Ich habe das ganze mal mit ein paar Bildern versucht verständlich zu machen:

    I. Das Grundbild, so wird es im Browser angezeigt.
    [Blockierte Grafik: http://img15.myimg.de/grund92a86.jpg]

    II. Wenn man mit der Maus über einen Bereich des Bildes fährt dann wird um diesen Bereich der Kasten gelegt sodass man sieht, wie der Ausschnitt hinterher aussehen wird.
    [Blockierte Grafik: http://img15.myimg.de/kastenf4edf.png]

    III. Man klickt nun auf das Bild und der Ausschnitt den man vorher ausgewählt hat wird aus dem Bild ausgeschnitten und z.B. als: ausschnitt1.png auf dem Server abgespeichert.
    [Blockierte Grafik: http://img15.myimg.de/ergebnisf4a4b.png]


    Ich hoffe das Problem ist verständlich und lösbar, per Google habe ich leider nichts brauchbares gefunden, unter Anderem weil ich nicht genau weis, welche Suchbegriffe ich wählen sollte.

  • Wenn du dich mit JS und PHP nicht gut auskennst oder nicht gewillt bist, es dafür zu lernen, dann lass es besser bleiben.

    Ansonsten:

    Lies dich in folgendes ein:
    - Javascript Maus Events (onmouseover / onmouseout usw.)
    - Javascript Maus Position (clientx, clienty usw.)
    - AJAX
    - PHP Bildmanipulation
    Mach zu allen Punkten ein paar Tutorials.

    Das Vorgehen wäre dann etwa so:
    - onmouseover des Bildes ein absolut positioniertes div einblenden, welches der maus folgt (onmouseout: wieder ausblenden)
    - onclick: die Koordinaten der Maus holen und mit der vorher fix festgelegten Grösse des divs berechnen wo die vier Ecken des Quadrates im Moment liegen
    - die Daten mit AJAX an ein PHP script schicken
    - mit PHP und den Pixelangaben den Ausschnitt berechnen und speichern

    Klingt interessant, viel Spass damit.

    9 Mal editiert, zuletzt von phore (3. Juni 2009 um 15:14)

  • Habe noch ein paar Fragen bezüglich mit PHP und den Pixelangaben den Ausschnitt berechnen und speichern. Könntest du mir vll. sagen wie diese Funktion heißt womit man den Ausschnitt berechnet bzw. wie man danach bei Google suchen könnte? Könntet ihr mir vielleicht ein paar Tips geben? Würde mich sehr gerne einlesen und bin dankbar für Tips und die Vorgehensweise.

  • Da gibts keine Funktionen, das musst du berechnen. Ungefähr so:

    - Quadrat: 70x70 px
    - Bild: 20px margin nach oben und links
    - Maus befindet sich auf x Achse (horizontal) 120 und y Achse (vertikal) 400
    - Bild ist 400 px Breit und 500 px hoch

    Ich gehe davon aus, dass das Quadrat vom Mauszeiger aus unten rechts positioniert ist.

    obere link Ecke des Quadrates:
    120-20 = 100
    100-70 = 30px

    400-20 = 380
    380-70 = 310px
    Die Koordinaten der oberen linken Ecke des Quadrates auf dem Bild ist also 30x310.
    Ich glaube das sollte so stimmen. Zeichne dir das mal auf dann kommst du mit.

    Mach erstmal die Tutorials, dann weisst du schon besser was auf dich zukommt.

  • So,

    Ich bin es nochmal. Ich habe es jetzt soweit geschafft, dass man eine Box hat, aus der man den Hintergrund wählen kann, eine DIV Box verfolgt die Maus und wenn man draufklickt sendet das Script die Koordinaten (obere linke Ecke).

    Das PHP Script sieht so aus:

    (Keine Sorge bezüglich der Sicherheit, das wird noch verändert)
    So, jetzt gibt er mir auch den gewünschten Bildinhalt aus, jedoch ist die Qualität des Endbildes ziemlich schlecht.
    Hier mal ein Beispiel:

    Original:
    [Blockierte Grafik: http://www.secondpicture.com/tutorials/digital_image_processing/light_and_glow_effects_in_photoshop.jpg]

    Ausschnitt:
    [Blockierte Grafik: http://img15.myimg.de/ausschnitt7d9d6.png]

    Wie man sieht ist die Qualität des Bildes stark gesunken, sodass es kaum noch erkennbar ist. Ist es möglich die Qualität des Ausschnittes zu verbessern?

    Vielen Dank - wäre die Qualität noch ebsser hätte ich das Script fertig :D

  • :lol: Ich wusste bis heute selber nicht das ich überhaupt irgendwie mit Javascript umgehen kann.

    Das schwierige war eigentlich hinter die Logik dahinter zu kommen und dank deiner Hilfe habe ich es geschafft! Vielen Dank ;)