您可以将Photopea插入网页（using a frame）。让我们将这样的网页称为外部环境（OE）。 OE可以通过Web消息传递与Photopea进行通信。

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

OE可以向Photopea发送两种数据：

• 字符串 - 包含一个脚本，该脚本将由Photopea执行
• ArrayBuffer - 一个二进制文件： psd， svg， jpg， ...字体、画笔等

当Photopea初始化并准备接受命令时，它会发送消息 "done"。处理完您的消息后，Photopea 还会发回"done"消息。

一些在Photopea 的即时通讯演示

从Photopea检索数据

Photopea可以使用以下命令（在脚本中）将当前图像发送到OE：

app.activeDocument.saveToOE("gif");

运行上述脚本后，PP 将发送一条带有GIF 图像的 ArrayBuffer消息，后跟一条带有 String “ done”的消息（脚本处理已完成）。

它还可以使用以下命令（在脚本中）将任何字符串发送到 OE：

app.echoToOE("Hello");

/learn/scripts 中的完整说明。

用法示例

此 API 可以替换主 API。与其让 Photopea 直接与您的服务器通信，倒不如在程序中加载文件，并在客户端设备中将它们传输到Photopea。

您可以使用Photopea作为“模块”，隐藏其用户界面，只使用消息。您可以创建图像的批处理处理器（调整图像大小，添加水印，在格式之间转换）。您可以创建脚本，将文档的每个图层导出为 PNG。您可以创建脚本，该脚本用户的数据替换每个文本层中的文本(以创建名片生成器等)。

示例：与自定义存储集成

我们可以重新定义“File - Open”和“File - Save”的默认行为。

• 我们可以将Photopea消息中的任何图像作为ArrayBuffer发送
• 我们可以调用app.activeDocument.saveToOE("psd"); 将当前文件发送到 OE。
• 我们可以调用app.echoToOE("Hello");将任何字符串发送到 OE。
• 我们可以读写app.activeDocument.source String 来标识文件。
• 我们可以在按 Open 或 Save 键后设置运行自定义脚本:customIO : open, save

现在，我们可以执行以下操作：

• 将自定义脚本设置为app.echoToOE("Open" / "Save"); 在用户按下按钮时收到通知。
• 当用户想要打开文件时，向他显示您自己的文件输入（您甚至可以让用户画一些东西，或者为他拍照）。
• 获得图像（ArrayBuffer）后，将其发送到Photopea并设置source：。app.activeDocument.source="myID2353"
• 当用户想要保存文件时，读取该文件 （app.activeDocument.saveToOE("psd");） 及其source app.echoToOE(app.activeDocument.source);，然后将新版本保存到存储中。