Live Messaging

You can insert Photopea into a webpage (using a frame). Let's call such webpage the Outer Environment (OE). OE can communicate with Photopea through Web Messaging.

window.addEventListener("message", function(e) { alert(e.data); });
var wnd = document.getElementById("pp").contentWindow;
wnd.postMessage(msg, "*");

OE can send two kinds of data to Photopea:

• String - contains a script, which will be executed by Photopea
• ArrayBuffer - a binary file: psd, svg, jpg, ... fonts, brushes, ...

When Photopea is initialized and ready to accept commands, it sends the message "done". After your message is processed, Photopea also sends back the message "done".

• Demo: Wait for "done", then send a script
• Demo: Load a file (as ArrayBuffer) and give it to Photopea

Retrieving data from Photopea

Photopea can send the current image to OE using the following command (inside a script):

app.activeDocument.saveToOE("gif");

The full description at /learn/scripts. The image will be sent as ArrayBuffer.

After you run the script above, PP will send a message with an ArrayBuffer of a GIF image, followed by a message with a String "done" (processing the script has finished).

Examples of usage

This API can replace the main API. Instad of letting Photopea communicate with your server directly, you can load files inside your progrm and transfer them to and from Photopea in a clients device.

You can use Photopea as a "module", hide its UI and use only the messaging. You can create a batch-processor of images (resizing images, adding watermarks, converting between formats). You can make scripts, that would export each layer of the document as a PNG. You can make scripts, that would replace the text in each text layer by data from your user (to create a generator of business cards, etc.).