Facebook Button Twitter Button YouTube Button RSS Button

IT-Runde

PHP & Java Script: Teilausschnitte von Bildern online festlegen

  • Java Script: Teilausschnitte von Bildern online festlegen

    Heute gibt es mal wieder ein nützliches Plugin für die Programmierer unter euch! 🙂

    Auf Webseiten und Blogs wird vor allem in Artikeln viel mit Bilder und Fotos gearbeitet. Allein hier auf eurer IT-Runde gehen wir bei jedem Artikel auf die Suche nach einem passenden Artikelbild und müssen dies dann mit Photoshop aufwändig verkleinern, abspeichern und hochladen. Will man neben dem Artikelbild noch einen anderen Teilausschnitt vom Foto im Artikel online stellen, muss man dieses wieder in Photoshop öffnen, anpassen, speichern und hochladen. Bei uns hält sich der Aufwand noch in Grenzen, bei Magazinen oder anderen Portalen muss ein einzelnes Foto jedoch für das Artikelbild, den Slider, ein Themenbild etc. herhalten. Immer das Originalfoto zu laden wäre schwachsinnig und sieht pixelig aus, alle Fotos einzeln in Photoshop je nach Größe anpassen ist viel zu aufwändig – Was nun?

    Einfaches Festlegen des auszuschneidenden BereichesWeil ich eine passende Funktion vor kurzem bei einem großen Portal im Backend gesehen habe, mit der man Teilausschnitte von einem Foto festlegen und als eigenes Bild neu speichern kann, habe ich mich mal auf die Suche nach einem Codeschnipsel gemacht. Für die eigentliche Bildbearbeitung benötigen wir gdlib in PHP, da ich meinen Ausschnitt aber selbst definieren und online „ziehen“ wollte, ist auch Java Script von Vorteil.

    Ein paar Foren durchsucht und einige Scripte weiter bin ich dann auf das einfache aber geniale Plugin „Manual jQuery Image Resizer/Cropper“ gestoßen (Demo). Dies bietet genau die Funktionen die man zum zerschneiden und speichern des Teilausschnittes braucht. Ganz einfach kann man mit einem Grau/Transparenten Block über das vorhandene Bild fahren und über dem optimalen Platz das Bild „cutten“ – Zusätzlich bietet das Script übrigens noch eine Verkleinerung des originalen Fotos an. Alles kann dann genau an einem selbst festgelegten Speicherort abgelegt und gespeichert werden. Genau das was wir wollten und eigentlich noch mehr! 🙂

    Der Ausschnitt kann unter einem eigenen Pfad gespeichert werdenDas ist natürlich nur eine super Grundlage, jeder muss das Plugin natürlich noch an die eigenen Bedürfnisse anpassen. Ich beispielsweise habe einen Upload für das originale Bild eingebaut und auf diesem kann ich dann vorher je nach Area festgelegte Größen hin und her schieben. Diese werden dann mit einem Wasserzeichen abgespeichert und passend zum Artikel in die Datenbank geschrieben. Ist das Script einmal fertig und läuft es einwandfrei, kann man sehr viel Spaß damit haben und im nachhinein einiges an Zeit einsparen! 😎

    Wie findet ihr das Plugin – Absolutes Muss für jeden Entwickler oder kennt ihr bessere Alternativen? Ihr seid gefragt! 🙂

  • Kostenlose IT-Tipps

    • Nebenbei ein Online Business aufbauen
    • Passiv Geld generieren
    • Online Trends (Nischenseiten, SEO, Google & Co.)

     
     


  1. #1 Der__Lukas
    09.01.2012 um 20:56 Uhr

    Danke für den Tipp! Find ich gut 🙂

    Post ReplyPost Reply
  2. #2 %~TheMachine~%
    09.01.2012 um 23:28 Uhr

    Hätte ich nicht geglaubt, dass man sowas wirklich Online realisieren kann? Geil! Werde ich sofort Morgen mal meinen Programmierer ansprechen, ob er mir nicht noch mehr Arbeit mit dem Einbau des Codes ersparen will :D!

    Danke ITRunde!

    LG,
    %~TheMachine~%

    Post ReplyPost Reply
  3. #3 Nico
    11.01.2012 um 18:28 Uhr

    Danke, gibt es auch kleine Scripte aus reinem PHP? Danach suche ich schon lange und habe noch immer nichts gescheites gefunden.

    Post ReplyPost Reply
Kommentar schreiben