Adobe Generator: Getting a layer bitmap

Adobe Generator: Getting a layer bitmap


Now you understand the Adobe Generator scripting basics: Script Your First Adobe Generator Plugin For Photoshop, and it’s time to move on to something real.

In this tutorial, you will learn how to receive bitmaps from Photoshop and process them.

The complete script for this tutorial can be found here: generator-bitmaps repository on GitHub.

Getting a layer bitmap

Generator has a function getPixmap(documentId,layerId,settingsObject) that gets you a defined layer bitmap of a defined document. If you have more documents open, you can still get bitmaps even from documents that are not currently in front (selected).

By calling this function, you get a pixmap object that contains data such as width, height, channelCount (how many channels per pixel, usually 4: ARGB), pixels (an actual buffer of pixels), length (the length of the pixels buffer).

Now, because Photoshop returns pixels in ARGB space, you need to convert the pixels buffer into RGBA space using a simple loop that reorganizes pixel values.

The example below gets the first layer in the document and saves it as a PNG.

Request a pixmap:

_generator.getPixmap(_document.id,_document.layers[0].id,{}).then(
function(pixmap){
    savePixmap(pixmap)
},
function(err){
    console.error("err pixmap:",err);
}).done();

You can put the function above into requestEntireDocument that calls _generator.getDocumentInfo and gives you a document instance.

Save a pixmap:

function savePixmap(pixmap){
    var pixels = pixmap.pixels;
    var len = pixels.length,
        channels = pixmap.channelCount;
 
    // convert from ARGB to RGBA, we do this every 4 pixel values (channelCount)
    for(var i=0;i<len;i+=channels){
        var a = pixels[i];
        pixels[i]   = pixels[i+1];
        pixels[i+1] = pixels[i+2];
        pixels[i+2] = pixels[i+3];
        pixels[i+3] = a;
    }
 
    // init a new PNG
    var png = new PNG({
        width: pixmap.width,
        height: pixmap.height
    });
 
    // set pixel data
    png.data = pixmap.pixels;
    // write to a file (will write out.png to the same directory as this *.js file
    png.pack().pipe(fs.createWriteStream(path.resolve(__dirname, 'out.png')));
}

In order to save the PNG, this example uses pngjs Node.js library. In your plugin root (generator-bitmaps folder), simply run from Terminal (Mac) or Command line (Win):
npm install pngjs
This will download pngjs packages and you will able to use them in your project via:

var PNG = require('pngjs').PNG;

Checkout the next tutorial on how to use savePixmap function in Generator without using pngjs.


Written by: |   Tutorials     |    September 13, 2013

Creative Cloud - Get all the Adobe creative desktop tools + services like 20 GBs file sharing.
  • Michael Chaize

    You’re the new CTO

  • ian morton

    Thanks for the articles; I can now process and save my images easily. Is there a way to send pixels back to a layer?

ToTop