Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Blick auf die Uferpromenade in Bremen bei Sonnenuntergang..

      Bremen

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Blick auf die Uferpromenade in Bremen bei Sonnenuntergang..

      Bremen

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Webdesign » Bildbearbeitung mit Javascript

Bildbearbeitung mit Javascript

"Bildbearbeitung mit Javascript" - das klingt zunächst seltsam. Javascript wird im Webbrowser ausgeführt. Dort Bildbearbeitung zu betreiben, erscheint zunächst fragwürdig. Mit PhotoType geht das, wenn auch mit Hilfe eines kleinen PHP-Scripts, welches die [...]

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 12 Kommentare
Lesedauer: 2 Minuten
  • von Dr. Web Redaktion
  • 6. Juni 2008
Bookmarke mich
Share on pocket

Webagentur klickbeben

wp-agentur.de | WordPress-Agentur

SEO-Sicht

DAZECON - Webdesign und Marketing

Werbeagentur Hannover | 360 Grad Konzept

Carmen Hurst | Webdesign

„Bildbearbeitung mit Javascript“ – das klingt zunächst seltsam. Javascript wird im Webbrowser ausgeführt. Dort Bildbearbeitung zu betreiben, erscheint zunächst fragwürdig. Mit PhotoType geht das, wenn auch mit Hilfe eines kleinen PHP-Scripts, welches die Berechnungen auf dem Server erledigt.

Das auf Prototype basierende Script kann Bilder skalieren, kippen, spiegeln und rotieren sowie Schatten, Bilder und Texte einfügen (lassen). Beispiel:

l_oImage = new Photo().load("image.jpg").resize({width:200}).rotate(3).dropShadow();
l_oImage.addCaption('Get ajaxorized!', '1942.ttf');
document.body.appendChild(l_oImage.fetch());

Phototype

Auf Deutsch: Lade das Bild „image.jpg“, skaliere es proportional auf 200 Pixel Breite, rotiere es um drei Grad gegen den Uhrzeiger und gib dem Bild einen Schlagschatten. Füge dann die Bildunterschrift „Get ajaxorized!“ in der Schrift „1942.ttf“ hinzu und mache das Bild zu einem Kindobjekt des Body-Tags, damit es im Browser angezeigt wird. Das ist unbestritten einfach und kann durchaus eine Erleichterung beim Entwickeln von Web-Applikationen sein.

Insbesondere für Content Management-Systeme sind diese Funktionen interessant, weil man so gleich mehrere Produktionsschritte für bebilderte Artikel vereinfachen oder gar automatisieren kann. Allerdings: Das alles geht zur Not auch ohne Javascript, so dass PhotoType erstmal eine nette Spielerei bleibt, dessen Einsatz allenfalls in Spezialfällen sinnvoll ist.

Entwickler sollten sich jedoch nicht ohne Skepsis auf PhotoType stürzen. Das Skript verarbeitet ungeprüft GET-Variablen, was es, je nach Vorbedingung, anfällig für Injection-Angriffe machen kann. Außerdem sollte das PHP-Script einen Cache-Mechanismus bekommen. Erzeugt man bei jedem Seitenaufruf das Bild aufs neue, würde die Serverlast stark ansteigen.

Fazit: Auf PhotoType hat die Welt zwar nicht gewartet. Die Software findet aber bestimmt ihre Nische und wird dort ihre Vorteile ausspielen.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, Markus Seyfferth und Jörg Mrusek.

Agenturpartner

Haurand Webdesign

Aachen

NETZhelfer GmbH

Ostfildern

Wee Media | Webdesign Agentur

Dernbach

SEOfolgreich – Local SEO Agentur München

München

Orange Services

München

Alle Agenturpartner

Jobs

Media Manager in München

München

Junior Online Marketing Manager

München

Online Marketing Manager

München

Junior Media Manager

München

SEA Manager in München

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

12 Antworten zu „Bildbearbeitung mit Javascript“
— was ist Deine Meinung?

  1. Tümmel sagt:
    5. August 2008 um 13:29 Uhr

    Für solche Funktionen ist doch eigentlich das Canvas-Element gedacht oder nicht.

    Antworten
  2. Mario Körbler sagt:
    15. Juni 2008 um 13:50 Uhr

    Ich find die Idee die Bilder am Client bearbeiten zu können schon gut, da die Bilder dann erst gar nicht auf den Server geladen werden müssen. Ich habe einige Kunden, die beispielsweise 1-2 x pro Woche 100 Fotos in s Netz stellen müssen. Die Fotos haben eine Größe von > MB. D.h. ich habe meinen Kunden einen ImageResizer (Unter Apple: ThumbsUP) installiert, der die Fotos mit einem Klick kleiner macht. Das kleiner machen könnte man sich dann sparen oder?

    Antworten
  3. Anna sagt:
    10. Juni 2008 um 17:34 Uhr

    Hallo Leute,
    ich möchte meine eigene Webseite erstellen gehöre aber zu den Anfängern überhaupt.Ich habe Notepad++ und FileZilla geladen und mir natürlich auch ein Buch für Anfänger gekauft aber irgendwie komme ich nicht richtig weiter.Wie soll ich den nun richtig vorgehen? Und wie funktioniert JavaScript kann mir das jemand genau und kurz erklären? Ich arbeite sonst nur mit Photoshop und InDesign.Bitte um Rat und Hilfe.
    Gruß, Anna

    Antworten
  4. Olaf sagt:
    6. Juni 2008 um 20:03 Uhr

    Also das ist schon sehr sinnvoll, vor allem wenn man in Communities oder sonstwo persönliche Bilder nur in bestimmten Formaten zulässt. Da kann man den Leuten „live“ anbieten, wie Ihr Bild ausschaut und kann es eventuell drehen, zuschneiden oder was auch immer tun lassen, bis es passt.

    Antworten
  5. Need_you sagt:
    6. Juni 2008 um 17:52 Uhr

    Ist doch ganz gut geeignet für Portale wie Myspace usw.
    So können die Nutzer bei ihren (meist hässlichen Seiten), auch noch die Bilder individuell anpassen.

    Antworten
  6. Sascha sagt:
    6. Juni 2008 um 14:16 Uhr

    Wie geil! Wuste gar nicht das so was möglich ist!

    Antworten
  7. ProfessorWeb sagt:
    6. Juni 2008 um 11:54 Uhr

    @Need_you: Also ich würde niemanden selbst bestimmen lassen, wie ein Bild auszusehen hat. Wenn dann gebe ich Parameter, wie Wasserzeichen, Neigungswinkel oder Schlagschatten selbst im Vorfeld an.

    Gut für ne „Photoshop Online“ Version macht das vielleicht noch irgendwo Sinn, aber im normalen Webdesigner-Alltag ist das Script glaub ich nicht zu gebrauchen.

    Gruß
    ProfessorWeb

    Antworten
  8. alexander sagt:
    6. Juni 2008 um 11:42 Uhr

    @ProfessorWeb

    Ist zur Abwechslung mal andersrum. Java-Entwickler haben ja auch immer so tolle frameworks, mit denen sie ohne eine Zeile JavaScript zu schreiben, JavaScript-Widgets ins Frontend rendern können.

    Aber du hast recht. Der Weg ist komisch.

    Antworten
  9. Need_you sagt:
    6. Juni 2008 um 11:39 Uhr

    @ProfessorWeb: Ich glaub das JavaScript ist dafür notwendig, dass man das Bild im Browser „live“ drehen kann usw.
    Wäre es nur mittels html und php würde es doch nur sozusagen aus eingabefeldern bestehen, und man würde das ergebnis erst sehen, wenn man alle einstellungen getätigt, und auf „ok“ geklickt hat, oder?

    Antworten
  10. Andy sagt:
    6. Juni 2008 um 11:36 Uhr

    Das Script kommt mir sehr gelegen: So kann ich mich als Webmaster zurückhalten und die Benutzer können ihre Bilder auf die Homepage der Pfadi Helfenberg hochladen, und nachträglich z.B. die Bilder drehen, oder einen Text dazuschreiben. Besonders gut gefällt mir die Funktion l_oPhoto.addChuckNorris(); // every library should have this function imo 😉

    Antworten
  11. Schlens sagt:
    6. Juni 2008 um 10:38 Uhr

    ProfessorWeb: Natuerlich kann man das in mehreren Schritten mit x-mal neuladen direkt in PHP machen. Aber warum, wenn man es auch – AJAX-like – wie in einer Anwendung handeln kann? Vom Bedienaspekt her ist das sicherlich der benutzerfreundlichere Ansatz (ein vernuenftiges GUI natuerlich vorausgesetzt).

    Antworten
  12. ProfessorWeb sagt:
    6. Juni 2008 um 10:24 Uhr

    Ich wollte gerade sagen… alles das geht auch ohne JavaScript. Da die Berechnung der Bilder eh auf dem Server per PHP passiert, frage ich mich wo dort überhaupt der Sinn drin liegt, das ganze über JavaScript zu steuern… o.0

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.