Dear All,
I have using the https://github.com/meltingice/psd.js/blob/master/examples/images/example.psd file as an example. I would like to get the logo in the psd. When I use:
'document.getElementById('image').appendChild(psd.image.toPng());' I get the image of whole psd. How could I output the logo image only?

Thank you.

I have a PSD file and would like to export each layer as a png using the name of the layer plus ".png" as the filename. Following the example at : https://github.com/meltingice/psd.js/blob/master/examples/node/layer_comps.js

I get the following error :

[TypeError: Cannot call method 'export' of undefined]

I can provide the psd file if that helps (I tried attaching here but Github only accepts PNG, GIF or JPG).

hello, psd.js is so good ! And i have a problem，can i get the background color from the layer ?

I'm working my way through a PSD exporting each layer and on a specific PSD the 41st item of 125 throws a "Segmentation fault" when I call export() on it. I have no further information provided to me beyond that.

Since dist is a byproduct of compilation and only for distribution having it in source control simply provides more noise than help.

But wait you might say.. how are people supposed to get this tool.... Well we can take advantage of npm and the fact that they actually do not depend on git for distribution.

If you are interested I can implement something like this in the repo
https://github.com/mojotech/dill.js/blob/master/package.json#L27

Some objects contain a "file" object, which contains a binary data buffer.
How can one save the file as a png or anything simialr to that?

How can I include/use this require.js module, PSD.js, inside my require.js application?

If I use the script like this example below, it works as it should:

<script type="text/javascript" src="assets/scripts/vendor/psd.min.js"></script>
<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;
                document.getElementById('image').appendChild(psd.image.toPng());
            });
        }
    }());
</script>

But if I try to include it by doing the recommanded requirejs way it doesn't;

requirejs.config({
    paths: {
        'psd': 'vendor/psd.min'
        }
});

// Load our app module 'main.js' and pass it to our definition function
requirejs(['app'], function (App) {
    // The "app" dependency is passed in as "App"
    App.initialize();
});

define('modules/customwidgets.add_widget', [ 'psd'], function () {
    var Widget = function () {
    };
    Widget.prototype = {
        config: {},
        init: function (htmlElement) {
            "use strict";

            // This module
            var me = this;

           console.log('It loads!');

           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;
                    document.getElementById('image').appendChild(psd.image.toPng());
                });
            }
        }
    };
    return Widget;
});

Can you operate the PSD file?
Hide a layer and then save to the PNG file.

Is it possible we'll see support for linked smart objects in near future? Maybe it's already there and I'm just not doing something right...

I am thinking of having several PSD templates where I have one or more linked smart objects with transformations, distortions, layers, etc. Then in a web service users can upload their own images that would be swapped with the linked smart objects. This would make it really easy to render complex and custom images. You could literally just copy the wanted images into a tmp folder (that originally contained linked smart objects) and render the custom image. It would be immensely helpful as transformations, overlays etc is much easier to just do in Photoshop than imagemagick or similar.

Simple example could be a 3D rendered living room where users could upload their own pictures which would be added to the picture frames in the render.

I would like to use saveAsPng or toPng in a way that maintains their final appearance, currently when exporting specific layer as png the effects are not preserved.
How can it be done?
thanks.

What is the best way to extract text and text properties from a layer?

I want to get pixel data from mask of layer. I've searched and worked on this issue for weeks but come no result. someone please help me to solve this problem? please please! thank you so much

Dear All,
How to recognized a layer is an image?

Thank you.

Hi, first of all thanks for made this great tool :)

I recently find out that the sizes and coords of the layers are wrong. The main problem are the coords (left, top, bottom, right) because you get the width and height with that info. In some layers you will have 3px wrong in others 4px and others 1px or no error. Is a kind of weird.

Anyone has a solution for it? I tested with a lot of files, and different versions of photoshop and the issue still happen.

An example: a layer that in photoshop has top: 130, left:50, bottom: 220, right 110 , this plugin return this info when is parsing : top: 128, left: 48, bottom: 221, right: 112.

The main problem is not all the layers has the same difference, so you can't made a function or simply subtract the appropriate number.

Thanks for the help!

Here are the changes I had to make in order to build via webpack

marvelapp@3f7f27b
marvelapp@b6a183e

I didn't send a pull request as I didn't think you'd want them in the current format (they're more proof of concept than anything else), also I didn't add a command in Cakefile.

You can clone that repo, run npm i -g webpack, npm i, then just simply webpack to build.

I have a psd file, with one font layer. When exporting png file, the font shadow is missing. Here's my code:
PSD = require('psd');

PSD.open('psd/1.psd').then(function(psd) {
psd.tree().descendants().forEach(function(node) {
if(node.isGroup()) return true;
node.saveAsPng("./output1/" + node.name + ".png").catch(function(err) {
console.log(err.stack);
});
});
}).then(function() {
console.log('finished');
});

Help me please

I get JSON doc that contains information about the parsed PSD, but is there any way I can get image library with images of every layers in the psd files ?

Sometimes I get this error on layer render (node.toPng()):

IndexSizeError: Index or size is negative or greater than the allowed amount

This happens because of one or all of dimentions of a node image are equal to 0.
We need to check dimentions to make sure they are nonzero here, before draw on a canvas.

Test file: https://github.com/Ser-Gen/ser-gen.github.com/blob/master/sandbox/psdjs/errorOnToPng.psd

It seems like, doesn't support now.

I would like to save layers one by one. How can I do that?
such as this, https://github.com/layervault/psd.rb/blob/master/examples/export_layer_images.rb

Having a cakefile means that a developer needs coffeescript installed globally* to build this tool.

I propose to make this repo more portable by instead of using the task system within the cakefile to rather put the tasks as npm run-script tasks. Thus making the only dependency for building the tool node and npm.

* or they could use the installed bin version via ./node_modules/.bin/coffee

Seems I can't for the life of me find a license this code is under, only historical posts of being taken over by large companies and so on.

Can this be clarified in the readme, or the convention, a LICENSE file?

I would like to create a png preview of an psd in an Electron App.

But with toPng() I get this Object which isn't mountable to the DOM instead of a Browser Image Object :

If I unterstand it right, psd.js runs in NodeJS mode because Electron has NodeJS build in the Browser/Renderer too. Which isn't the normal use case of node.
I tried to load psd.js with requirejs, but that didn't change anything.

var requirejs = require('requirejs');
var PSD = requirejs('psd');

PSD.fromURL("/path/to/file.psd").then(function(psd) { 
  document.getElementById('ImageContainer').appendChild(psd.image.toPng());
});

The Usage - "NodeJS Example" works fine, the "Browser Example" don't

Can I load psd.js in Browser mode or get the Png Image Object somehow?

Thanks a lot!

I parse a psd file and print out the information of a single layer like this:

console.log(psd.tree().descendants()[2]);

When I find there is a data property in the result.

{ layer:
    { file:
        { data: <Buffer 38 42 50 53 00 01 00 00 00 00 00 00 00 04 00 00 05 36 00 00 02 ee 00 08 00 03 00 00 00 00 00 00 75 30 38 42 49 4d 04 04 00 00 00 00 00 2f 1c 01 5a 00 ... >,
        pos: 838570 },
    header:
    { file: [Object],
        sig: '8BPS',
        version: 1,
        channels: 4,
        height: 1334,
        rows: 1334,
        width: 750,
        cols: 750,
        depth: 8,
        mode: 3 },
...

But when I invoke fs.writeFileSync to save the data of the layer, it saves the image of the psd.

Finally I find the data of every descendant is the same as the data of the whole psd

I also find that some other properties in descendant object such as header.file.data mask.file.data blendMode.file.data image.file.data are the same as layer.file.data.

So how to get the data of a single layer ?

When exporting a layer as PNG file, the result differs depending on the layer type. So I want to tell whether a layer is

• a shape layer / a fill layer with vector mask applied
• a layer with vector mask applied
• a layer with normal layer mask applied

I created a test file as shown below.

Now I go ahead and export each layer as a PNG file, I got the result like this.

The two shape layers, or fill layers with vector masks, appears to be the same as they are in Photoshop when exported as PNG files. However, when a normal pixel layer has vector mask or layer mask applied, the exported PNG file only shows the layer content, regardless of the masks.

If I call the following method on each of these layers: shape_gradient, shape_solid_color, and vector_mask

layer.get('vectorMask').paths

The results are similar. I can't tell shape layers (or fill layers with vector masks) from normal pixel layers with vector masks.

And I don't know how to check if a layer has a normal layer mask applied. Looks like the layer_mask.coffee is dealing with a concept different from Photoshop's layer mask.

Any ideas how to distinguish these layers?

I tried a lot to do that but I couldn't,
How Can I change text value in a textLayer, and export it to png or save it as psd?
Thanks

Hi Ryan LeFevre , I have a problem when use psd,js.
I create a psd file using PhotoShop CS6, and parse it in Node.js using psd.js. But I find the value of locked field always false even if some layers were locked.And I find the loaded value is false.
I never learned Coffee, so I don't know what the lazy_execute.coffee did.In my eyes, the method parse of the locked.coffee file seems never to run.
The above is my problem. My English is poor,and hope I express the problem clearly.

I'm getting this error intermittently, when calling node.layer.image.saveAsPng(imagePath):

TypeError: pxData.copy is not a function at [object Object].Filter._filterNone (/var/task/node_modules/psd/node_modules/pngjs/lib/filter.js:213:16) at [object Object].Filter.filter (/var/task/node_modules/psd/node_modules/pngjs/lib/filter.js:196:27) at [object Object].Packer.pack (/var/task/node_modules/psd/node_modules/pngjs/lib/packer.js:54:23) at [object Object].<anonymous> (/var/task/node_modules/psd/node_modules/pngjs/lib/png.js:68:22) at nextTickCallbackWith0Args (node.js:415:9) at process._tickDomainCallback (node.js:385:13)

I've logged node.layer.image to the console, and it has always looked reasonable, any suggestions on how to fix, or debug this would be greatly appreciated.

thanks

i found some psd files in psd.rb project,but only one can be parsed correctly.
url: https://github.com/layervault/psd.rb/tree/master/spec/files

RT

Hello

Is it possible to save a group as a PNG (e.g. a collection of layers...)

trying to use saveAsPng in a grunt task but its not generating any errors, and not creating any output PNG either, any idea what im doing wrong?

var PSD = require('psd');

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    'convertPSD': {

        target: { prop1:1 },

        options: {
          defProperty: "defValue",
          dFiles: { 
            cwd: './',   
            src: ['*.psd'], 
            dest: './'  

          }
        }
    }

  });



  grunt.registerTask('default', 'convertPSD');

  grunt.registerMultiTask('convertPSD', 'Convert PSDs', function() {

    var curTask = this,
        opts = curTask.options();

    if (!curTask.files.length && 'dFiles' in opts) {
      var df = opts.dFiles;

      curTask.files = grunt.file.expandMapping(df.src, df.dest , df);

    }

this.files.forEach(function(file){

      console.log(file.src[0])

      PSD.open(file.src[0]).then(function (psd) {
        return psd.image.saveAsPng("./TST.png");
      }).then(function () {
        console.log("converted"+file.src[0]+" to "+file.src[0]+".png");
      });
})


});


};

Sometimes psdjs can't get font sizes of nodes.
I have prepared a small test file to get this effect: https://github.com/Ser-Gen/ser-gen.github.com/blob/master/sandbox/psdjs/cantGetTextSizes.psd
node.export().text.font.sizes returns undefined.

My suggestion is to change && to || here. And, of course, find out why font sizes may be undefined.

I want to get the properties ( like font size, color) of the text layer, how can I do it?

Thank you for your attention or help.

There are top and left variables in the layer that aren't used (Ie the image is shoved to the upper left). Is there a way to respect the layer properties on the server side?

Hi,

I am trying to view the file example.psd in chrome, but without success.
Please tell me what I'm doing wrong.
Thank you.

This is my code:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="../../dist/psd.min.js"></script>
</head>

<body>
  <div id="image"></div>

  <script type="text/javascript">
  (function () {
    var PSD = require('psd');

    PSD.fromURL("../images/example.psd").then(function(psd) {
      document.getElementById('image').appendChild(psd.image.toPng());
    });
  }());
  </script>
</body>
</html>

seems noaheverett deleted it? =(
was not a good decision to move the ownership

I am trying to parse a PSD file and getting the following error
/Users/james/gameframe/portal-simple/node_modules/psd/lib/psd/nodes/root.coffee:27
layer.right = psd.header.width;
^
TypeError: Cannot read property 'width' of null
at Function.module.exports.Root.layerForPsd (/Users/james/gameframe/portal-simple/node_modules/psd/lib/psd/nodes/root.coffee:13:29)
at new Root (/Users/james/gameframe/portal-simple/node_modules/psd/lib/psd/nodes/root.coffee:20:16)
at PSD.module.exports.PSD.tree (/Users/james/gameframe/portal-simple/node_modules/psd/lib/psd.coffee:63:16)
at /Users/james/gameframe/portal-simple/psd.js:24:28
at Object.oncomplete (fs.js:107:15)

The file seems valid and I can open it up in Photoshop. Any help would be greatly appreciated. Thanks in advance.

How to check if a file PSD.fromFile("path/to/invalid.psd") is a valid psd?

I 'm using "obj1.layer.mask" but it false some cases

Mask {
file:
File {
data: <Buffer 38 42 50 53 00 01 00 00 00 00 00 00 00 03 00 00 19 2a 00 00 05 ef 00 08 00 03 00 00 00 00 00 5b 5f 52 38 42 49 4d 04 04 00 00 00 00 00 97 1c 01 5a 00 ... >,
pos: 100752008 },
top: -1584,
right: 1519,
bottom: 4858,
left: 0,
size: 20,
width: 1519,
height: 6442,
relative: false,
disabled: false,
invert: false,
defaultColor: 255,
flags: 0 }

I have a psd file, with one font layer. When exporting png file, the font shadow is missing. Here's my code:

Hi!
would you please put min and map files into the tag in next release?

Thank you
Piicksarn

Greetings, I'm testing with a basic PSD file and I have 3 layers with text. All different sizes. And it's reporting two with size 5.58981 when the font size should be 16.8pt and another layer is getting parsed as 13 when it should be 65pt. Also, will the font weight be added soon?

please tell me the way to extract layer with mask data to png

psd.tree().descendants().reverse().forEach(function (layer) {
    if (layer.name == 'Layer 113 copy 6') {
        layer.layer.image.saveAsPng("D:/wsite/abc.png").catch(function (err) {
            console.log(err.stack);
        });
    return;
    }
});

psd.js return

paint.net return

image x,y offset is missing from exported png files.

This information is useful for reassembly, layering, placement in qml or similar ...

node examples/node/export_layers.js
$ identify output/Logo_Glyph.png
output/Logo_Glyph.png PNG 142x179 142x179+0+0 8-bit sRGB 3.27KB 0.000u 0:00.000

Note the geometry is 142x179+0+0.
Should be (see below): 142x179+379+211

$ identify -format '%[label] %[scene] %[width]x%[height]%[X]%[Y]\n' examples/images/example.psd
..
Logo_Glyph 2 142x179+379+211
..
$ convert examples/images/example.psd[2] Logo_Glyph.png
$ identify Logo_Glyph.png
Logo_Glyph.png PNG 142x179 142x179+379+211 8-bit sRGB 3.81KB 0.000u 0:00.000

I can't find any examples of how to access the PSD width and height and any other meta information available on the PSD as a whole.

events.js:85
throw er; // Unhandled 'error' event
^
Error: Parsing file /......../node_modules/psd/lib/psd.coffee: Line 1: Unexpected string
at Deps.parseDeps (/......../node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:339:28)