Skip to content

P
psd.js
Commit e6b4e828 authored by Ryan LeFevre's avatar Ryan LeFevre
Browse files
Options

Add browser example and fix browser usage

parent 998666f6
Expand all Show whitespace changes
Inline Side-by-side
Showing with 696 additions and 130 deletions
Cakefile
View file @ e6b4e828
...@@ -9,7 +9,8 @@ task 'compile', 'Compile with browserify for the web', -> ...@@ -9,7 +9,8 @@ task 'compile', 'Compile with browserify for the web', ->
.transform('coffeeify') .transform('coffeeify')
.require('./shims/png.coffee', expose: './image_exports/png.coffee') .require('./shims/png.coffee', expose: './image_exports/png.coffee')
.require('./shims/init.coffee', expose: './psd/init.coffee') .require('./shims/init.coffee', expose: './psd/init.coffee')
.add('./lib/psd.coffee') .require('./shims/rgb.coffee', expose: './image_modes/rgb.coffee')
.require('./lib/psd.coffee', expose: 'psd')
.bundle (err, src) -> .bundle (err, src) ->
return console.log(err) if err? return console.log(err) if err?
fs.writeFile './dist/psd.js', src, -> fs.writeFile './dist/psd.js', src, ->
......
dist/psd.js
View file @ e6b4e828
This diff is collapsed.
examples/browser/image.html 0 → 100644
View file @ e6b4e828
<!DOCTYPE html>
<html>
<head>
<title>psd.js image example</title>
<style type="text/css">
body, html {
padding: 0;
margin: 0;
}
#dropzone {
width: 500px;
height: 100px;
border: 1px #ababab dashed;
margin: 50px auto;
}
#dropzone p {
text-align: center;
line-height: 100px;
margin: 0;
padding: 0;
}
#image {
text-align: center;
}
</style>
<script type="text/javascript" src="../../dist/psd.js"></script>
</head>
<body>
<div id="dropzone">
<p>Drop here</p>
</div>
<div id="image"></div>
<pre id="data"></pre>
<script type="text/javascript">
(function () {
var PSD = require('psd');
document.getElementById('dropzone').addEventListener('dragover', onDragOver, true);
document.getElementById('dropzone').addEventListener('drop', onDrop, true);
function onDragOver(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
}
function onDrop(e) {
e.stopPropagation();
e.preventDefault();
PSD.fromEvent(e).then(function (psd) {
var data = JSON.stringify(psd.tree().export(), undefined, 2);
document.getElementById('data').innerHTML = data;
psd.image.toPng().then(function (image) {
document.getElementById('image').appendChild(image);
});
});
}
}());
</script>
</body>
</html>
\ No newline at end of file
examples/export.js → examples/node/export.js
View file @ e6b4e828
var PSD = require('../'); var PSD = require('../../');
var file = process.argv[2] || './examples/images/example.psd'; var file = process.argv[2] || './examples/images/example.psd';
var start = new Date(); var start = new Date();
......
examples/node/tree.js 0 → 100644
View file @ e6b4e828
var PSD = require('../../');
var file = process.argv[2] || './examples/images/example.psd';
PSD.open(file).then(function (psd) {
console.log(psd.tree().export());
});
\ No newline at end of file
lib/psd/file.coffee
View file @ e6b4e828
...@@ -32,20 +32,16 @@ module.exports = class File ...@@ -32,20 +32,16 @@ module.exports = class File
@pos = 0 @pos = 0
tell: -> @pos tell: -> @pos
read: (length) -> read: (length) -> (@data[@pos++] for i in [0...length])
data = @data[@pos...@pos+length]
@pos += length
return data
readf: (format, len = null) -> jspack.Unpack format, @read(len or jspack.CalcLength(format)) readf: (format, len = null) -> jspack.Unpack format, @read(len or jspack.CalcLength(format))
seek: (amt, rel = false) -> if rel then @pos += amt else @pos = amt seek: (amt, rel = false) -> if rel then @pos += amt else @pos = amt
readString: (length) -> @read(length).toString().replace /\u0000/g, '' readString: (length) -> String.fromCharCode.apply(null, @read(length)).replace /\u0000/g, ""
readUnicodeString: (length = null) -> readUnicodeString: (length = null) ->
length or= @readInt() length or= @readInt()
@read(length * 2) @read(length * 2)
.toJSON()
.map((c) -> Util.getUnicodeCharacter(c)) .map((c) -> Util.getUnicodeCharacter(c))
.join('') .join('')
.replace(/\u0000/g, '') .replace(/\u0000/g, '')
......
lib/psd/layer_mask.coffee
View file @ e6b4e828
Util = require('./util.coffee') _ = require 'lodash'
Layer = require('./layer.coffee') Util = require './util.coffee'
Layer = require './layer.coffee'
module.exports = class LayerMask module.exports = class LayerMask
constructor: (@file, @header) -> constructor: (@file, @header) ->
...@@ -41,7 +42,7 @@ module.exports = class LayerMask ...@@ -41,7 +42,7 @@ module.exports = class LayerMask
maskEnd = @file.tell() + length maskEnd = @file.tell() + length
@globalMask = _({}).tap (mask) -> @globalMask = _({}).tap (mask) =>
mask.overlayColorSpace = @file.readShort() mask.overlayColorSpace = @file.readShort()
mask.colorComponents = [ mask.colorComponents = [
@file.readShort() >> 8 @file.readShort() >> 8
......
shims/init.coffee
View file @ e6b4e828
...@@ -3,13 +3,28 @@ RSVP = require 'rsvp' ...@@ -3,13 +3,28 @@ RSVP = require 'rsvp'
module.exports = module.exports =
extended: (PSD) -> extended: (PSD) ->
@fromURL = (url) -> @fromURL = (url) ->
return new RSVP.Promise (resolve, reject) -> new RSVP.Promise (resolve, reject) ->
xhr = new XMLHttpRequest() xhr = new XMLHttpRequest()
xhr.open "GET", url, true xhr.open "GET", url, true
xhr.responseType = "arraybuffer" xhr.responseType = "arraybuffer"
xhr.onload = -> xhr.onload = ->
data = new Uint8Array(xhr.response or xhr.mozResponseArrayBuffer) data = new Uint8Array(xhr.response or xhr.mozResponseArrayBuffer)
psd = new PSD(data) psd = new PSD(data)
psd.parse()
resolve(psd) resolve(psd)
xhr.send null xhr.send null
@fromEvent = (e) ->
new RSVP.Promise (resolve, reject) ->
file = e.dataTransfer.files[0]
reader = new FileReader()
reader.onload = (e) ->
psd = new PSD(new Uint8Array(e.target.result))
psd.parse()
resolve(psd)
reader.onerror = reject
reader.readAsArrayBuffer(file)
shims/png.coffee
View file @ e6b4e828
RSVP = require 'rsvp'
module.exports = module.exports =
toPng: -> toPng: ->
new RSVP.Promise (resolve, reject) => new RSVP.Promise (resolve, reject) =>
...@@ -12,6 +14,8 @@ module.exports = ...@@ -12,6 +14,8 @@ module.exports =
pixelData[i] = pixel for pixel, i in @pixelData pixelData[i] = pixel for pixel, i in @pixelData
context.putImageData(imageData, 0, 0)
# Create the image and set the source to the # Create the image and set the source to the
# canvas data URL. # canvas data URL.
image = new Image() image = new Image()
......
shims/rgb.coffee 0 → 100644
View file @ e6b4e828
module.exports =
combineRgbChannel: ->
rgbChannels = @channelsInfo
.map (ch) -> ch.id
.filter (ch) -> ch >= -1
for i in [0...@numPixels]
r = g = b = 0
a = 255
for chan, index in rgbChannels
val = @channelData[i + (@channelLength * index)]
switch chan
when -1 then a = val
when 0 then r = val
when 1 then g = val
when 2 then b = val
@pixelData.push r, g, b, a
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment