Convert PSD to PNG with Node.js

By  on  

Automating and manipulating media is a fascination of mine, partly because I don't understand the magic behind it and partly because the idea of turning one thing into another is fun and useful.  That latest media tool that has piqued my interest is a JavaScript tool called psd.js.

psd.js is a project that allows you to read PSD files, including:

  • Document structure and size
  • Layer/folder size + positioning, names, visibility, and opacity
  • Font data (via psd-enginedata)
    • Text area contents
    • Font names, sizes, and colors
  • Color mode and bit-depth
  • Vector mask data
  • Flattened image data
  • Layer comps

What the media converter and JavaScript lover in me found most awesome was one basic feature: converting a PSD to PNG with JavaScript!

var PSD = require('psd');
 
PSD.open('homepage.psd').then(function (psd) {
  return psd.image.saveAsPng('homepage.png');
}).then(function () {
  console.log('Finished!');
});

That's a nice, tidy API there and I love that it doesn't require anything other than JavaScript (many other Node.js image libraries require ImageMagick on the machine).  Of course converting PSD to PNG is easy with ImageMagick too, but being able to use Node.js instead opens a whole host of opportunity!

Recent Features

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    Introducing MooTools Dotter

    It's best practice to provide an indicator of some sort when performing an AJAX request or processing that takes place in the background. Since the dawn of AJAX, we've been using colorful spinners and imagery as indicators. While I enjoy those images, I am...

  • By
    TextboxList for MooTools and jQuery by Guillermo Rauch

    I'll be honest with you: I still haven't figured out if I like my MooTools teammate Guillermo Rauch. He's got a lot stacked up against him. He's from Argentina so I get IM'ed about 10 times a day about how great Lionel...

Discussion

  1. Simon

    Wow I have been thrilled to learn about this cool feature and implemented a small Node binary to deal with PSD files

    For those running Linux/Mac who are tired of opening a VM and/or cracking Photoshop just to be able to see the new web design you need to integrate… Just install this module :

    npm install -g psd-cli

    You are then ready to see the real rendered PSD in a PNG file, without lousy Gimp changes by typing :

    psd my-file.psd -o

    Link to the NPM package : https://www.npmjs.com/package/psd-cli

  2. Thanks for the shout out David! I know you’re primarily focused on Javascript, but for completeness sake I figured I would mention that the Ruby version of the library is currently more feature complete: https://github.com/layervault/psd.rb

    I am planning on porting the rest of the features in the Ruby library to the JS version in the near future though!

  3. This is super! just been looking at jspdf also, Great what can be done on the client side these days.

  4. Doron

    Ryan, it’d be cool to see feature parity with the Ruby version! I wonder how much support is currently provided for working with PSD layers, e.g. applying transformations such as shadows and overlays (See: https://support.cloudinary.com/hc/en-us/articles/115001217949 for examples).

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!