2008-09-17 5 views
5

Ist es möglich, dynamisch Bilder erstellen und ändern auf einem pro Pixel Ebene in JavaScript (auf der Client-Seite)? Oder muss dies mit serverbasierten Sprachen wie PHP geschehen?Erstellen/Ändern von Bildern in JavaScript

Mein Anwendungsfall ist wie folgt:

  • Der Benutzer öffnet die Homepage und lädt lokal gespeicherte Bild
  • Eine Vorschau des Bildes angezeigt wird
  • der Benutzer das Bild mit einem Satz von Schiebern ändern (Pixelebene Operationen)
  • Am Ende kann er das Bild auf seine lokale Festplatte herunterladen

Wenn bei der Suche Im Web habe ich gerade Posts über die Filtermethode von IE gefunden, aber nichts über Bildbearbeitungsfunktionen in JavaScript gefunden.

Antwort

1

Dies muss auf der Serverseite erfolgen. Eine Sache, die Sie tun können, ist, die gesamte Bearbeitung auf Client-Seite gehen zu lassen und dann am Ende das endgültige Bild (via AJAX) an den Server zu senden, um es Ihnen als den richtigen MIME-Typ und korrekt zurückgeben zu können verpackt.

+0

Wie genau die Bearbeitung auf der Client-Seite getan werden? – ffledgling

8

Einige Browser unterstützen die Leinwand: http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas

+0

danke, dass du mich auf dieses Thema gesetzt hast. fand eine gute Grundierung in dieser Antwort http://stackoverflow.com/a/6634646/1382306 Ihre Antwort sollte erhalten chk –

+1

Vielen Dank für alle Kommentare. Zusammenfassend scheint es für einige Browser (z. B. Firefox) Lösungen zu geben. Eine Lösung für alle Browser scheint jedoch eine serverseitige Implementierung zu erfordern. – Fabian

0

Sie einen Satz von JS Tool vorstellen kann, dass der Benutzer definieren, welche Art von Transformation will er tun können, aber die endgültige Arbeit der Transformation auf sein muss getan eine Serverseite. JS auf der Client-Seite kann aus Sicherheitsgründen keine Datei erstellen.

0

Lokale Bildbearbeitung in JavaScript sollte möglich sein - siehe Defender of the Favicon. ;-) Die Frage ist, wie man das Originalbild aus dem Dateisystem in Ihre Seite bringt (ich weiß nichts anderes, als zuerst einen HTTP-Upload auf den Server durchzuführen).

2

Sie möchten vielleicht Processing.js auschecken. John Resig von jQuery Fame hat es geschrieben. Es unterstützt die Pixelverarbeitung, leider kann nur Firefox 3 ausreichend damit umgehen.

1

Schauen Sie auch bei data URIs (obwohl IE-Versionen unter 8 sie nicht unterstützen, leider!)