Photoshop mit Javascript

Zu sagen man kennt Photoshop nicht wäre als wenn ein Eisverkäufer mit der Gabel die Waffeln füllt. Erstaunlicherweise ist es aber so, dass nicht ein Browser oder halbwegs intelligente Programmiersprache etwas mit den PSD-Dateien anzufangen weiß. Das bringt einige Probleme mit sich wenn man zum Beispiel eine Bilddatenbank programmieren will, und automatisch Thumbnails erstellen lassen möchte.

Screenshot von psd.js

Lustigerweise gibt es (oder besser gesagt soll es geben) einen Parser für PSD in Javascript. Das Projekt psd.js kann schon die grundlegenden Informationen aus einer PSD-Datei heraus holen. Gehostet wird natürlich (wie sollte es anders sein) auf GitHub. Der Source ist in Coffeescript und sieht recht sauber aus, Ebenen werden bereits erkannt, der Quelltext ist auch recht intuitiv:

{PSD} = require 'psd'
 
psd = PSD.fromFile './path/to/file.psd'
psd.parse()
 
for layer in psd.layers
console.log "Layer: #{layer.name}"
console.log "Size: width=#{layer.cols}, height=#{layer.rows}"
console.log "Position: top=#{layer.top}, left=#{layer.left}"
 
psd.toFile "/path/to/output.png"

Was die Library kann (oder können soll) ist folgendes:

  • Eine PSD als PNG ausgeben
  • Eine PSD als Canvas ausgeben
  • Einzelne Ebene extrahieren und anzeigen
  • Informationen über das Bild und/oder Ebenen bereitstellen

Ein recht ambitioniertes Projekt wie ich finde, und keins das jemals fertig werden wird. Man kann sich mal mit Notepad eine PSD anschauen und wird schnell merken, so einfach ist das alles nicht. Ich bin mir sicher das es immer wieder die eine oder andere PSD-Datei geben wird, die das Skript nicht interpretieren kann. Aber sowohl Idee als auch Umsetzung sind genial, und vor allem: man kann das echt brauchen. Man darf also abwarten wie sich das Projekt weiter entwickelt, aber immerhin bekommt man jetzt die Möglichkeit PSD eventuell mal direkt anzuzeigen anstatt händisch wilde Konvertierungs-Orgien durchzuführen.

Ähnliche Beiträge

d3.js – Visualisierung von Daten mit Javascr... Seit dem ganzen Hype um das Canvas-Element in HTML5 ist es scheinbar zu einem Volkssport geworden, Libraries für Javascript zu entwickeln, die entwede...
TransformJS – einfache Transforms mit JavaSc... CSS Transforms sind eigentlich fester Bestandteil jedes Browser - dummerweise in jedem Browser ein klein wenig anders, und dummerweise auch mit andere...
Google Maps API – Geocodierung In den bisherigen Teilen des Tutorials haben wir eine Adresse immer mittels der Koordinaten übergeben. Wie schon festgestellt birgt das einiges an Pro...
Adobe Brackets – Code Editor für HTML, CSS &... Nach gefühlten 25 Jahren, dem Plattmachen von Homesite und einigen Versuchen Dreamweaver irgend etwas sinnvolles abzugewinnen glaubt jetzt wohl schein...

Schreibe einen Kommentar

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