Indiscripts

Generating PNGs from InDesign might sound inappropriate to my colleagues, but the exportFile DOM command is more than enough for most of my needs. In scripting terms, you just have to set a few preferences in app.pngExportPreferences, select a component and call exportFile on it with the parameter ExportFormat.PNG_FORMAT.

The result is quite decent. The native exporter supports page items and groups as well as pages and spreads, and it takes care of transparency effects if necessary.

As the name suggests exportFile produces a file object, which is the obvious purpose of ID-to-PNG conversion. But we developers are fond of ready-to-use binary data that we can copy-paste into source codes.

For example, we want to translate this:

into that:

"\x89PNG\r\n\x1A\n\0\0\0\rIHDR\0\0\0#\0\0\x002\b\x06\0\0\0\xD6Sbg
\0\0\0\tpHYs\0\0\v\x12\0\0\v\x12\x01\xD2\xDD~\xFC\0\0\x01'IDATX
\xC3\xED\x99\xD1\x11\x83 \f\x863\x82\xA38\x82#t\x04Ga\x047hGp\x04
Gp\x84\xDEu\x016\xA0\xD0\xC3\x13\xA9\xB6\x86\x12\x8C\xBD<\xFC\x0F
\"$\x9F\x02&\x060\xC6\0Vp}\xB4V\xBD\x95Y\x91ko\x93\xEC&\x80lA\xBC
A\x91\xC2X\x07\xDDN\x90I\x1D%\f\x06\xE4%\x12\x18k\xB8I\x81q\xE38
\xC1\xD4T\xD3\xA4\x91 \x9Ar\xCD($\x8C\xA2\x84\xA9\x10o\xC7\xF5
\xABP\xF6\xFD\xD3\x0E^\xBD\xBF\x0E\xD5D\x1Aw\xC2\x8C+cc\xDB}\xE0
[%mW2\x1D\x0E 0\x02#0\x02S\x18\x06\x1B\x89\xA9\xA4\xE3H\xECb\xC4
\x05\xE68\x92\x1BT\xC3\x1C\xEF\x9C\x9F{pOM\xD1\xB8\x86\x95$\xC8
\xB7\xE7\x84\xD9\xF2Q\xEFJ!l\xC7[&\x90\xDB\xCF\xF9\f\xE0\x13\xAA
-}M\xB4N\x07Sv\x9A>,\xE0\xD4?\x82\xB4\x05\x1CM\x83\xDBjm\xC1\xAD
=,\xB66\xB7\x8F\xDE\xD1\x10\x8Bpp<\x84\xC0\b\x8C\xC0\bLA\x18>%
\x11V\xC5\xA23\x97\xD1x\x14\x18\xE1O\xEA\xC0\xF9a<\x10\x16\x84
\xB4\x0E\xCC\xE7 \xC3\x03\xF18\xE2\t\x80H\x0E\xBF\x9Ep\x84\xC4
\x93\x1F\xD4*_\0\0\0\0IEND\xAEB`\x82"
 

The above hieroglyphs represent the original image in PNG language. More technically, that's the serialized expression of the binary file once compacted into a JavaScript string. (Well, I've added line breaks to make it flow in the box, but you get the picture.)

If you are familiar with ScriptUI icons or stuff like that, you already know how boring it is to export and stringify PNG data, then re-inject these strings in your code.

That's why I've written SelToPng.jsx, an instant tool that serializes the current selection and shows the “stringified code” in an edit box. Here is how this works:

1. Select your artwork in InDesign. (Make sure a single object is selected. If needed, create a group of multiple objects.)

2. Run SelToPng.jsx from the Scripts panel. (Important: the script is based on IdExtenso, so the framework must be reachable from the #include directive.)

3. Copy the PNG string from the edit box. You're done!

On top of that SelToPng also displays the serialized PNG in a ScriptUIImage so you can visualize how binary data actually render in a ScriptUI context.

• SelToPng is part of IdExtenso's Toolbox:
— github.com/indiscripts/IdExtenso/tree/master/tools

• See also:
— IdExtenso: ExtendScript Framework for InDesign Ninjas.
— ‘Sprite’ Buttons in ScriptUI.
— IdExtenso on GitHub.