Imaging API for displaying thumbnails? Use the Imaging API on documents that aren't currently open?


I am currently working on a UXP plugin for Photoshop that uses the Imaging API to get image data from some .PSD files in my plugin folder and then to display it in the plugin panel as thumbnails. The Imaging API asks for a documentID to get pixel information from, and if one isn’t provided, the active document is referenced instead. The only way I can think to get these documentIDs for my .PSD files is by opening each file.

My solution for this was to create a loop that:

  1. Opens a file
  2. Uses the Imaging API to getPixels from the newly opened document
  3. Converts that data to base64 to use as an image src in the plugin panel
  4. Closes the newly opened document

This is a working solution but, due to the rapid opening and closing of documents, this isn’t the best user experience. I know that I could use a .JPG or some other image file to use as the image src, but this requires exporting an image file from every .PSD which would be tedious, and wouldn’t be accurate if any changes are ever made to the .PSD. Is there a way I can retrieve documentIDs for the files in my plugin folder without opening the document? Has anyone experimented with this or had success with doing something similar?

DocumentID is created only when you open the document within the current PS session. And if all windows for documents are closed then DocumentID has no use anymore.

@Jarda Thanks for the quick response. I’ve been trying to think of some alternative for a while and haven’t been able to come up with anything. The only other thing I can think of is to find a way to open and close documents in a way that’s more subtle rather than just flashing the user’s screen as it loops through all of the .PSDs. Would love to come up with a solution here as I think this could be useful functionality for developers. Thanks for the help!

You’re saying these files live in your plugin folder, does this mean you’re shipping them with your plugin? If you are shipping them I would suggest pre-computing and storing as a separate file. Depending on the size of your psd files it might be expensive to create the thumbnails on the fly.

Photoshop files actually store a thumbnail as a resource (separate to the layer structure and image data), that’s e.g. used by operating systems to show you a little thumbnail or icon (e.g. in the finder on a Mac). You can read about it in the file spec. However, as far as I know, accessing that would require parsing that relevant block of the PSD file, which I’m not sure is a great thing to do in Javascript. In our pipeline we have tools to do that but they are C++ and super fast.