Bild croppen

Dieses Thema im Forum "Webdesign" wurde erstellt von ted, 23. Februar 2009.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. ted

    ted Member

    Registriert seit:
    8. Januar 2002
    Beiträge:
    112
    Hallo.

    Ich habe folgendes vor:

    Ein Formular, wo man ein Bild uploaden können soll. Das ganze soll folgendermaßen ablaufen:

    - Bild wird ausgewählt und on-the-fly hochgeladen
    - Bild soll auf z.B. 300x300 resized werden
    - dann soll dort ein Rechteck im Bild sein, beispielsweise 100x100 Pixel, welches mit der Maus im Bild bewegt werden kann
    - dann soll da ein Button ausschneiden sein, der dann das Rechteck ausschneidet und den Teil dann als Bild irgendwie ins Formular überträgt

    Ich habe keine Ahnung, wie man sowas überhaupt macht, geht wohl Richtung Java-Applet?

    Gibt es da irgendwas fertiges? Die Sachen, die ich mir angeguckt hatte, waren alle irgendwie unbrauchbar.

    Bin für jegliche Tips dankbar :)

    -ted
     
  2. Dresden-Hosting (JS)

    Dresden-Hosting (JS) Eingetragener Provider

    Registriert seit:
    21. August 2007
    Beiträge:
    1.472
    Firmenname:
    Dresden-Hosting
    Anbieterprofil:
    Klick
    AW: Bild croppen

    Suche mal in der WHL nach Gabriel Schuster.... der kann Dir vielleicht weiterhelfen.
    Das ist ein ganz pfiffiger Programmierer
     
  3. schwarzlicht

    schwarzlicht New Member

    Registriert seit:
    7. Mai 2007
    Beiträge:
    287
    Ort:
    Wildeshausen
    AW: Bild croppen

    Hallo,
    wenn Dir diese DEMO gefällt, kannst Du Dich hier informieren wie das geht.

    Gruß
    Daniel
     
  4. G.Schuster

    G.Schuster Eingetragener Provider

    Registriert seit:
    30. August 2004
    Beiträge:
    4.062
    Firmenname:
    actra.development
    Anbieterprofil:
    Klick
    AW: Bild croppen

    Da stimmen aber die Maße des zugeschnittenen Bildes überhaupt nicht.
    Ich hab einen nahezu quadratischen Ausschnitt mit viel Himmel gewählt und hab einen rechteckigen Ausschnitt nahezu ohne Himmel bekommen.

    Nicht nur vielleicht ;)
     
  5. schwarzlicht

    schwarzlicht New Member

    Registriert seit:
    7. Mai 2007
    Beiträge:
    287
    Ort:
    Wildeshausen
    AW: Bild croppen

    Das stimmt leider. Wie es aussieht gibt es bei der Demo zurzeit Probleme mit Imagemagick, das war vor 1 Jahr als ich es entdeckt hatte jedoch i.O. Ich würde hier besser auf php_gd setzen, so kann man sich den Umweg der Speicherung auf dem Datenträger (für die Vorschau) sparen.
     
  6. ted

    ted Member

    Registriert seit:
    8. Januar 2002
    Beiträge:
    112
    AW: Bild croppen

    Danke für den Tip schwarzlicht, das schaut spontan schonmal sehr gut aus, werde ich ausprobieren.
     
  7. Miles

    Miles Erfahrener Benutzer

    Registriert seit:
    10. Mai 2002
    Beiträge:
    5.351
    Ort:
    49424 Lutten
    AW: Bild croppen

    Ist ansonsten schnell mit JavaScript und PHP+GD gemacht! Gerade da es nur ein einfaches DIV ist... hab gerade einen Imagemap-Editor in JavaScript geschrieben, inkl. Polygon-Unterstützung, das ist etwas mehr fummelei ;)
     
  8. schwarzlicht

    schwarzlicht New Member

    Registriert seit:
    7. Mai 2007
    Beiträge:
    287
    Ort:
    Wildeshausen
    AW: Bild croppen

    Hallo ted,

    hier mal ein Beispiel wie es mit PHP aussehen könnte:
    Code:
         <?php
    
    header("Content-type: image/jpeg");
    
    function GrafikSkalieren($Grafik, $Seite)
    {
        $Bilddaten = getimagesize($Grafik);
        $Breite = $Bilddaten[0];
        $Hoehe = $Bilddaten[1];
    
        if($Breite > $Hoehe)
        {
            $NeueBreite = $Seite;
            $NeueHoehe = $Seite / $Breite * $Hoehe;
        }
        else
        {
            $NeueBreite = $Seite / $Hoehe * $Breite;
            $NeueHoehe = $Seite;
        }
    
        $SkalierteGrafik = ImageCreateTrueColor($NeueBreite, $NeueHoehe);
        $Originalgrafik = ImageCreateFromJPEG($Grafik);
        ImageCopyResampled($SkalierteGrafik, $Originalgrafik, 0, 0, 0, 0, $NeueBreite, $NeueHoehe, $Breite, $Hoehe);
        return $SkalierteGrafik;
    }
    
    ImageJPEG(GrafikSkalieren("grafik.jpg", 500));
    
    ?> 
    Quelle: http://www.webmaster-resource.de
    Muss natürlich noch etwas geschliffen werden.

    Falls Du einen eigenen Server hast, kannst Du es natürlich so einsetzen wie in der Demo beschrieben (mit Imagemagick), es funktioniert dann auch.
     
  9. ted

    ted Member

    Registriert seit:
    8. Januar 2002
    Beiträge:
    112
    AW: Bild croppen

    Imagemagick ist vorhanden, damit bin ich auch vertraut. Mir gehts in erster Linie um das croppen des Bildes.

    Miles, kannst du ggf. kurz erläutern, wie das grob funktioniert? Rest fummel ich mir dann zurecht. Hört sich so an, als ob es genau das ist, was ich suche :) Kopfschmerzen bereitet mir, wie ich da ein Rechteck reinbekomme, welches man dann auch mit der Maus verschieben kann.
     
  10. Miles

    Miles Erfahrener Benutzer

    Registriert seit:
    10. Mai 2002
    Beiträge:
    5.351
    Ort:
    49424 Lutten
    AW: Bild croppen

    Das Rechteck ist ein einfaches Div. mit Javascript die Events MouseDown, MouseMove und MouseUp abfangen. Damit ist das verschieben schnell erledigt.

    Größe ändern per Reckteck-Ecken letztlich das selbe, da legste auf die Ecken wiederum Divs, wo du auch die Events abfängst.

    Position und Größe einfach per element.style.top/left/width/heigh ändern.
     
  11. schwarzlicht

    schwarzlicht New Member

    Registriert seit:
    7. Mai 2007
    Beiträge:
    287
    Ort:
    Wildeshausen
    AW: Bild croppen

    Und dann brauchst Du noch die relative Position der Mouse bei mouseDown zum "Rahmen"-div und nach der Aktion die relative Position vom "Rahmen"-div im eigentlich Bild.
    Schwer wird es dann, das Ganze in ein bestehendes Design einzubauen, aber Du hast mir da eine gute Aufgabe gegeben für meine Bildersammlung.
     
  12. antondollmaier

    antondollmaier Eingetragener Provider

    Registriert seit:
    19. April 2004
    Beiträge:
    902
    Firmenname:
    ADIT Systems
    Anbieterprofil:
    Klick
  13. schwarzlicht

    schwarzlicht New Member

    Registriert seit:
    7. Mai 2007
    Beiträge:
    287
    Ort:
    Wildeshausen
    AW: Bild croppen

    Sehr gute Vorlage. Habe damit mal ein wenig gebastelt:
    die Vorlage hat als Auflösung 3648x2736px, das angezeigte Bild 640x480px
    Beispiel
    Code:
    <?php
    if($_POST['CROPVAL'])
    {
        $cropval = explode('::',$_POST['CROPVAL']);
        $jpeg_quality = 90;
        $src = 'CIMG1450_org.JPG';
        $img_r = imagecreatefromjpeg($src);
        $dst_r = ImageCreateTrueColor( $cropval[4], $cropval[5]);
        imagecopyresampled($dst_r,$img_r,0,0,$cropval[0],$cropval[1],$cropval[4],$cropval[5],$cropval[4],$cropval[5]);
        header('Content-type: image/jpeg');
        imagejpeg($dst_r, null, $jpeg_quality);
        die;
    }
    ?>
    <html>
    
    <head>
    <meta ************"Content-Type" content="text/html; charset=windows-1252">
    <title>Demo</title>
    
    <script src="Jcrop/js/jquery.pack.js"></script>
    <script src="Jcrop/js/jquery.Jcrop.pack.js"></script>
    <link rel="stylesheet" href="Jcrop/css/jquery.Jcrop.css" type="text/css" />
    </head>
    <body>
    <img src="CIMG1450.JPG" id="cropbox" />
    <form method="post" action="">
    <input type="submit" name="CROP" value="zuschneiden">
    <input type="hidden" name="CROPVAL" value="" id="data1">
    </form>
    
    </body>
    <script language="Javascript">
    
        function showCoords(c)
        {
          document.getElementById('data1').value = c.x+'::'+c.y+'::'+c.x2+'::'+c.y2+'::'+c.w+'::'+c.h+'::'+document.getElementById('cropbox').src;
        };
        jQuery(function() {
            jQuery('#cropbox').Jcrop({
                onSelect: showCoords,
                onChange: showCoords,
                setSelect:   [ 100, 100, 300, 300 ],
                trueSize: [3648,2736]
            });
        });    
    </script>
    </html>
    
    
     
    Zuletzt bearbeitet: 26. Februar 2009
  14. Miles

    Miles Erfahrener Benutzer

    Registriert seit:
    10. Mai 2002
    Beiträge:
    5.351
    Ort:
    49424 Lutten
    AW: Bild croppen

    Code:
    $_POST[CROPVAL]
    Da fehlen aber noch ein paar ' im Code, oder wenigstens " ;)
     
  15. schwarzlicht

    schwarzlicht New Member

    Registriert seit:
    7. Mai 2007
    Beiträge:
    287
    Ort:
    Wildeshausen
    AW: Bild croppen

    JO Meister, gestatte mir doch dieses quick & dirty; ich muss damit ja nicht mein Geld verdienen
     
  16. Miles

    Miles Erfahrener Benutzer

    Registriert seit:
    10. Mai 2002
    Beiträge:
    5.351
    Ort:
    49424 Lutten
    AW: Bild croppen

    Das hat nichts mit quick&dirty zu tun...
     
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen