Ergebnis 1 bis 9 von 9

Thema: [JS] Ausschnitt aus Bild speichern

  1. #1
    Teeny
    Registriert seit
    03.06.2009
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard [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.


    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.


    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.



    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.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru
    Registriert seit
    13.01.2005
    Ort
    Schweiz
    Beiträge
    5.240
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: [JS] Ausschnitt aus Bild speichern

    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.
    Geändert von phore (03.06.2009 um 16:14 Uhr)

  3. #3
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: [JS] Ausschnitt aus Bild speichern

    Jep, das is nich ganz ohne

  4. #4
    Teeny
    Themenstarter

    Registriert seit
    03.06.2009
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: [JS] Ausschnitt aus Bild speichern

    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.

  5. #5
    Forum Guru
    Registriert seit
    13.01.2005
    Ort
    Schweiz
    Beiträge
    5.240
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: [JS] Ausschnitt aus Bild speichern

    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.

  6. #6
    Teeny
    Themenstarter

    Registriert seit
    03.06.2009
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: [JS] Ausschnitt aus Bild speichern

    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:

    PHP-Code:
    <?php
    $urs 
    $_GET["u"];
    $x $_GET["x"];
    $y $_GET["y"];

    if (
    eregi('.jpg'$urs)) {
    $imagequelle = @imagecreatefromjpeg($urs);
    }
    if (
    eregi('.png'$urs)) {
    $imagequelle = @imagecreatefrompng($urs);
    }
    if (
    eregi('.gif'$urs)) {
    $imagequelle = @imagecreatefromgif($urs);
    }
    $image = @imagecreate(7575);

    imagecopy($image$imagequelle00$x$y7575);
    imagedestroy($imagequelle);

    header('Content-type: image/png');
    imagepng($image);

    ?>
    (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:


    Ausschnitt:


    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

  7. #7
    Pion
    Gast

    Standard AW: [JS] Ausschnitt aus Bild speichern

    Hehe soso , da kann man sowas erstellen aber zu blöd zum googlen interessant

    http://php-faq.de/q-grafik-farben.html

  8. #8
    Teeny
    Themenstarter

    Registriert seit
    03.06.2009
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: [JS] Ausschnitt aus Bild speichern

    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

  9. #9
    Forum Guru
    Registriert seit
    13.01.2005
    Ort
    Schweiz
    Beiträge
    5.240
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: [JS] Ausschnitt aus Bild speichern

    Kompliment - hab dir das ehrlich gesagt zuerst nicht zugetraut

    Gruss

Ähnliche Themen

  1. Zusatzattribute im Bild speichern
    Von .Holger. im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 11
    Letzter Beitrag: 28.11.2008, 21:50
  2. Bild ausschnitt mit php wählen?
    Von Walerik im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 19.12.2007, 20:56
  3. Ausschnitt voon Bildern bei Core Draw Photo Suite 12...
    Von Eagleye im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 0
    Letzter Beitrag: 03.06.2007, 23:22
  4. Bild oder Text anzeigen wenn mit Maus über Bild
    Von kwg|the-hell im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 12.06.2005, 13:31
  5. schrift als bild speichern
    Von Jagun im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 7
    Letzter Beitrag: 18.01.2005, 15:58

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •