1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
<!DOCTYPE html> <html> <head> <title>psd.coffee</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="blackwhite.html"> blackwhite.coffee </a> <a class="source" href="brightnesscontrast.html"> brightnesscontrast.coffee </a> <a class="source" href="colorbalance.html"> colorbalance.coffee </a> <a class="source" href="curves.html"> curves.coffee </a> <a class="source" href="exposure.html"> exposure.coffee </a> <a class="source" href="gradient.html"> gradient.coffee </a> <a class="source" href="huesaturation.html"> huesaturation.coffee </a> <a class="source" href="invert.html"> invert.coffee </a> <a class="source" href="layereffect.html"> layereffect.coffee </a> <a class="source" href="levels.html"> levels.coffee </a> <a class="source" href="pattern.html"> pattern.coffee </a> <a class="source" href="photofilter.html"> photofilter.coffee </a> <a class="source" href="posterize.html"> posterize.coffee </a> <a class="source" href="selectivecolor.html"> selectivecolor.coffee </a> <a class="source" href="solidcolor.html"> solidcolor.coffee </a> <a class="source" href="threshold.html"> threshold.coffee </a> <a class="source" href="typetool.html"> typetool.coffee </a> <a class="source" href="vibrance.html"> vibrance.coffee </a> <a class="source" href="log.html"> log.coffee </a> <a class="source" href="psd.html"> psd.coffee </a> <a class="source" href="psdassert.html"> psdassert.coffee </a> <a class="source" href="psdchannelimage.html"> psdchannelimage.coffee </a> <a class="source" href="psdcolor.html"> psdcolor.coffee </a> <a class="source" href="psddescriptor.html"> psddescriptor.coffee </a> <a class="source" href="psdfile.html"> psdfile.coffee </a> <a class="source" href="psdheader.html"> psdheader.coffee </a> <a class="source" href="psdimage.html"> psdimage.coffee </a> <a class="source" href="psdlayer.html"> psdlayer.coffee </a> <a class="source" href="psdlayermask.html"> psdlayermask.coffee </a> <a class="source" href="psdresource.html"> psdresource.coffee </a> <a class="source" href="util.html"> util.coffee </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> psd.coffee </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <p>NodeJS or browser?</p> </td> <td class="code"> <div class="highlight"><pre><span class="k">if</span> <span class="nx">exports</span><span class="o">?</span>
<span class="nv">Root = </span><span class="nx">exports</span>
<span class="nv">fs = </span><span class="nx">require</span> <span class="s1">'fs'</span>
<span class="k">else</span>
<span class="nv">Root = </span><span class="nb">window</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>Create our class and add to global scope</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">Root.PSD = </span><span class="k">class</span> <span class="nx">PSD</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Version number</p> </td> <td class="code"> <div class="highlight"><pre> <span class="vi">@VERSION = </span><span class="s2">"0.4.4"</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>Enable/disable debugging console logs</p> </td> <td class="code"> <div class="highlight"><pre> <span class="vi">@DEBUG = </span><span class="kc">false</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>Loads a PSD from a file. If we're in node, then this loads the
file from the filesystem. If we're in the browser, then this assumes
it has been passed a File object (either from a file input element,
or from HTML5 drag & drop).</p> </td> <td class="code"> <div class="highlight"><pre> <span class="vi">@fromFile: </span><span class="nf">(file, cb = ->) -></span>
<span class="k">if</span> <span class="nx">exports</span><span class="o">?</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>We're in node. Load via fs module.
Callback function isn't needed.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">data = </span><span class="nx">fs</span><span class="p">.</span><span class="nx">readFileSync</span> <span class="nx">file</span>
<span class="k">new</span> <span class="nx">PSD</span> <span class="nx">data</span>
<span class="k">else</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>We're in the browser. Assume we have a File object.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">reader = </span><span class="k">new</span> <span class="nx">FileReader</span><span class="p">()</span>
<span class="nv">reader.onload = </span><span class="nf">(f) -></span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>In order to convert the file data to a useful format, we need
to conver the buffer into a byte array.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">bytes = </span><span class="k">new</span> <span class="nx">Uint8Array</span><span class="p">(</span><span class="nx">f</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">result</span><span class="p">)</span>
<span class="nv">psd = </span><span class="k">new</span> <span class="nx">PSD</span><span class="p">(</span><span class="nx">bytes</span><span class="p">)</span>
<span class="nx">cb</span><span class="p">(</span><span class="nx">psd</span><span class="p">)</span>
<span class="nx">reader</span><span class="p">.</span><span class="nx">readAsArrayBuffer</span><span class="p">(</span><span class="nx">file</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>Load a PSD from a URL via ajax</p> </td> <td class="code"> <div class="highlight"><pre> <span class="vi">@fromURL: </span><span class="nf">(url, cb = ->) -></span>
<span class="nv">xhr = </span><span class="k">new</span> <span class="nx">XMLHttpRequest</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">open</span> <span class="s2">"GET"</span><span class="p">,</span> <span class="nx">url</span><span class="p">,</span> <span class="kc">true</span>
<span class="nv">xhr.responseType = </span><span class="s2">"arraybuffer"</span>
<span class="nv">xhr.onload = </span><span class="o">-></span>
<span class="nv">data = </span><span class="k">new</span> <span class="nx">Uint8Array</span><span class="p">(</span><span class="nx">xhr</span><span class="p">.</span><span class="nx">response</span> <span class="o">or</span> <span class="nx">xhr</span><span class="p">.</span><span class="nx">mozResponseArrayBuffer</span><span class="p">)</span>
<span class="nv">psd = </span><span class="k">new</span> <span class="nx">PSD</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span>
<span class="nx">cb</span><span class="p">(</span><span class="nx">psd</span><span class="p">)</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">send</span> <span class="kc">null</span>
<span class="nv">options:</span>
<span class="nv">layerImages: </span><span class="kc">false</span> <span class="c1"># Should we parse layer image data?</span>
<span class="nv">onlyVisibleLayers: </span><span class="kc">false</span> <span class="c1"># Should we skip invisible layer image parsing?</span>
<span class="nv">constructor: </span><span class="nf">(data) -></span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>Store the main reference to our PSD file</p> </td> <td class="code"> <div class="highlight"><pre> <span class="vi">@file = </span><span class="k">new</span> <span class="nx">PSDFile</span> <span class="nx">data</span>
<span class="vi">@header = </span><span class="kc">null</span>
<span class="vi">@resources = </span><span class="kc">null</span>
<span class="vi">@layerMask = </span><span class="kc">null</span>
<span class="vi">@layers = </span><span class="kc">null</span>
<span class="vi">@images = </span><span class="kc">null</span>
<span class="vi">@image = </span><span class="kc">null</span>
<span class="nv">setOptions: </span><span class="nf">(options) -></span>
<span class="nx">@options</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">val</span> <span class="k">for</span> <span class="nx">own</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">val</span> <span class="k">of</span> <span class="nx">options</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>Attempt to parse all sections of the PSD file</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">parse: </span><span class="o">-></span>
<span class="nx">Log</span><span class="p">.</span><span class="nx">debug</span> <span class="s2">"Beginning parsing"</span>
<span class="vi">@startTime = </span><span class="p">(</span><span class="k">new</span> <span class="nb">Date</span><span class="p">()).</span><span class="nx">getTime</span><span class="p">()</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>It's important to parse all of the file sections in the correct order,
which is used here.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">@parseHeader</span><span class="p">()</span>
<span class="nx">@parseImageResources</span><span class="p">()</span>
<span class="nx">@parseLayersMasks</span><span class="p">()</span>
<span class="nx">@parseImageData</span><span class="p">()</span>
<span class="vi">@endTime = </span><span class="p">(</span><span class="k">new</span> <span class="nb">Date</span><span class="p">()).</span><span class="nx">getTime</span><span class="p">()</span>
<span class="nx">Log</span><span class="p">.</span><span class="nx">debug</span> <span class="s2">"Parsing finished in #{@endTime - @startTime}ms"</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>Parse the first section: the header.
This section cannot be skipped, since it contains important parsing information
for the rest of the PSD file (and is relatively small anyways).</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">parseHeader: </span><span class="o">-></span>
<span class="nx">Log</span><span class="p">.</span><span class="nx">debug</span> <span class="s2">"\n### Header ###"</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>Store a reference to the file header</p> </td> <td class="code"> <div class="highlight"><pre> <span class="vi">@header = </span><span class="k">new</span> <span class="nx">PSDHeader</span> <span class="nx">@file</span>
<span class="nx">@header</span><span class="p">.</span><span class="nx">parse</span><span class="p">()</span>
<span class="nx">Log</span><span class="p">.</span><span class="nx">debug</span> <span class="nx">@header</span>
<span class="nv">parseImageResources: </span><span class="nf">(skip = false) -></span>
<span class="nx">Log</span><span class="p">.</span><span class="nx">debug</span> <span class="s2">"\n### Resources ###"</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>Every PSD file has a number of resources, so we simply store them in an
array for now. In the future, it might make more sense to store resources
in an object indexed by the resource ID.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="vi">@resources = </span><span class="p">[]</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Find the size of the resources section</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">n = </span><span class="nx">@file</span><span class="p">.</span><span class="nx">readInt</span><span class="p">()</span>
<span class="nv">length = </span><span class="nx">n</span>
<span class="k">if</span> <span class="nx">skip</span>
<span class="nx">Log</span><span class="p">.</span><span class="nx">debug</span> <span class="s2">"Skipped!"</span>
<span class="k">return</span> <span class="nx">@file</span><span class="p">.</span><span class="nx">seek</span> <span class="nx">n</span>
<span class="nv">start = </span><span class="nx">@file</span><span class="p">.</span><span class="nx">tell</span><span class="p">()</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>Continue parsing resources until we've reached the end of the section.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">while</span> <span class="nx">n</span> <span class="o">></span> <span class="mi">0</span>
<span class="nv">pos = </span><span class="nx">@file</span><span class="p">.</span><span class="nx">tell</span><span class="p">()</span>
<span class="nv">resource = </span><span class="k">new</span> <span class="nx">PSDResource</span> <span class="nx">@file</span>
<span class="nx">resource</span><span class="p">.</span><span class="nx">parse</span><span class="p">()</span>
<span class="nx">n</span> <span class="o">-=</span> <span class="nx">@file</span><span class="p">.</span><span class="nx">tell</span><span class="p">()</span> <span class="o">-</span> <span class="nx">pos</span>
<span class="nx">@resources</span><span class="p">.</span><span class="nx">push</span> <span class="nx">resource</span>
<span class="nx">Log</span><span class="p">.</span><span class="nx">debug</span> <span class="s2">"Resource: "</span><span class="p">,</span> <span class="nx">resource</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>This shouldn't happen. If it does, then likely something is being parsed
incorrectly in one of the resources, or the file is corrupt.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="nx">n</span> <span class="o">isnt</span> <span class="mi">0</span>
<span class="nx">Log</span><span class="p">.</span><span class="nx">debug</span> <span class="s2">"Image resources overran expected size by #{-n} bytes"</span>
<span class="nx">@file</span><span class="p">.</span><span class="nx">seek</span> <span class="nx">start</span> <span class="o">+</span> <span class="nx">length</span>
<span class="nv">parseLayersMasks: </span><span class="nf">(skip = false) -></span>
<span class="nx">@parseHeader</span><span class="p">()</span> <span class="nx">unless</span> <span class="nx">@header</span>
<span class="nx">@parseImageResources</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="nx">unless</span> <span class="nx">@resources</span>
<span class="nx">Log</span><span class="p">.</span><span class="nx">debug</span> <span class="s2">"\n### Layers & Masks ###"</span>
<span class="vi">@layerMask = </span><span class="k">new</span> <span class="nx">PSDLayerMask</span> <span class="nx">@file</span><span class="p">,</span> <span class="nx">@header</span><span class="p">,</span> <span class="nx">@options</span>
<span class="vi">@layers = </span><span class="nx">@layerMask</span><span class="p">.</span><span class="nx">layers</span>
<span class="k">if</span> <span class="nx">skip</span>
<span class="nx">Log</span><span class="p">.</span><span class="nx">debug</span> <span class="s2">"Skipped!"</span>
<span class="nx">@layerMask</span><span class="p">.</span><span class="nx">skip</span><span class="p">()</span>
<span class="k">else</span>
<span class="nx">@layerMask</span><span class="p">.</span><span class="nx">parse</span><span class="p">()</span>
<span class="nv">parseImageData: </span><span class="o">-></span>
<span class="nx">@parseHeader</span><span class="p">()</span> <span class="nx">unless</span> <span class="nx">@header</span>
<span class="nx">@parseImageResources</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="nx">unless</span> <span class="nx">@resources</span>
<span class="nx">@parseLayersMasks</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="nx">unless</span> <span class="nx">@layerMask</span>
<span class="vi">@image = </span><span class="k">new</span> <span class="nx">PSDImage</span> <span class="nx">@file</span><span class="p">,</span> <span class="nx">@header</span>
<span class="nx">@image</span><span class="p">.</span><span class="nx">parse</span><span class="p">()</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>Folder layers are denoted by a flag, isFolder. This marks the beginning
of the folder. The end of the folder is marked by the isHidden flag.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">getLayerStructure: </span><span class="o">-></span>
<span class="nx">@parseLayersMasks</span><span class="p">()</span> <span class="nx">unless</span> <span class="nx">@layerMask</span>
<span class="nv">result = </span><span class="p">{</span><span class="nv">layers: </span><span class="p">[]}</span>
<span class="nv">parseStack = </span><span class="p">[]</span>
<span class="k">for</span> <span class="nx">layer</span> <span class="k">in</span> <span class="nx">@layers</span>
<span class="k">if</span> <span class="nx">layer</span><span class="p">.</span><span class="nx">isFolder</span>
<span class="nx">parseStack</span><span class="p">.</span><span class="nx">push</span> <span class="nx">result</span>
<span class="nv">result = </span><span class="p">{</span><span class="nv">name: </span><span class="nx">layer</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> <span class="nv">layers: </span><span class="p">[]}</span>
<span class="k">else</span> <span class="k">if</span> <span class="nx">layer</span><span class="p">.</span><span class="nx">isHidden</span>
<span class="nv">temp = </span><span class="nx">result</span>
<span class="nv">result = </span><span class="nx">parseStack</span><span class="p">.</span><span class="nx">pop</span><span class="p">()</span>
<span class="nx">result</span><span class="p">.</span><span class="nx">layers</span><span class="p">.</span><span class="nx">push</span> <span class="nx">temp</span>
<span class="k">else</span>
<span class="nx">result</span><span class="p">.</span><span class="nx">layers</span><span class="p">.</span><span class="nx">push</span> <span class="nx">layer</span>
<span class="nx">result</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>Exports a flattened version to a file. For use in NodeJS.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">toFile: </span><span class="nf">(filename, cb = ->) -></span>
<span class="nx">@parseImageData</span><span class="p">()</span> <span class="nx">unless</span> <span class="nx">@image</span>
<span class="nx">@image</span><span class="p">.</span><span class="nx">toFile</span> <span class="nx">filename</span><span class="p">,</span> <span class="nx">cb</span>
<span class="nv">toFileSync: </span><span class="nf">(filename) -></span>
<span class="nx">@parseImageData</span><span class="p">()</span> <span class="nx">unless</span> <span class="nx">@image</span>
<span class="nx">@image</span><span class="p">.</span><span class="nx">toFileSync</span> <span class="nx">filename</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>Given a canvas element</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">toCanvas: </span><span class="nf">(canvas, width = null, height = null) -></span>
<span class="nx">@parseImageData</span><span class="p">()</span> <span class="nx">unless</span> <span class="nx">@image</span>
<span class="nx">@image</span><span class="p">.</span><span class="nx">toCanvas</span> <span class="nx">canvas</span><span class="p">,</span> <span class="nx">width</span><span class="p">,</span> <span class="nx">height</span>
<span class="nv">toImage: </span><span class="o">-></span>
<span class="nx">@parseImageData</span><span class="p">()</span> <span class="nx">unless</span> <span class="nx">@image</span>
<span class="nx">@image</span><span class="p">.</span><span class="nx">toImage</span><span class="p">()</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>Extracts all parsed data from this PSD in a clean JSON
format excluding file and image data.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">toJSON: </span><span class="o">-></span>
<span class="nx">@parseLayersMasks</span><span class="p">()</span> <span class="nx">unless</span> <span class="nx">@layerMask</span>
<span class="nv">sections = </span><span class="p">[</span>
<span class="s1">'header'</span>
<span class="s1">'layerMask'</span>
<span class="p">]</span>
<span class="nv">data = resources: </span><span class="p">[]</span>
<span class="k">for</span> <span class="nx">resource</span> <span class="k">in</span> <span class="nx">@resources</span>
<span class="nx">data</span><span class="p">.</span><span class="nx">resources</span><span class="p">.</span><span class="nx">push</span> <span class="nx">resource</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</span>
<span class="k">for</span> <span class="nx">section</span> <span class="k">in</span> <span class="nx">sections</span>
<span class="nx">data</span><span class="p">[</span><span class="nx">section</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="p">[</span><span class="nx">section</span><span class="p">].</span><span class="nx">toJSON</span><span class="p">()</span>
<span class="nx">data</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
