mirror of
https://gitflic.ru/project/photopea-v2/photopea-v-2.git
synced 2025-08-17 17:06:21 +00:00
139 lines
6.1 KiB
Plaintext
139 lines
6.1 KiB
Plaintext
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
|
|
<link rel='stylesheet' id='casper-google-fonts-css' href='//fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&ver=4.0.1' type='text/css' media='all' />
|
|
|
|
<title>Photopea API</title>
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="page">
|
|
<div id="header">
|
|
<a href="/" class="title">Photopea API</a>
|
|
<!--<p>Web-based image editor.</p>-->
|
|
<a href="//blog.photopea.com">Blog</a> |
|
|
<a href="//www.photopea.com/learn">Learn</a> |
|
|
<a href="//www.photopea.com/tuts">Tutorials</a> |
|
|
<a href="//www.photopea.com/templates">Templates</a> |
|
|
<a class="curr" href="//www.photopea.com/api">API</a> |
|
|
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
|
|
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
|
|
</div>
|
|
|
|
<div id="main" style="max-width:960px;">
|
|
<div id="sidebar" style="width:20%;">
|
|
<!--<h3>Topics</h3>-->
|
|
<ul>
|
|
<li class="lvl0"><a href="/api/">API Spec</a></li>
|
|
<li class="lvl1"><a href="/api/environment">Environment</a></li>
|
|
<li class="lvl1 active"><a href="/api/live">Live Messaging</a></li>
|
|
<li class="lvl1"><a href="/api/plugins">Plugins</a></li>
|
|
<li class="lvl0"><a href="/api/playground">Playground</a></li>
|
|
<li class="lvl0"><a href="/api/accounts">Accounts</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="content" style="width:80%;">
|
|
|
|
<div class="post">
|
|
<h1>Live Messaging</h1>
|
|
|
|
<p>You can insert Photopea into a webpage (using a frame). Let's call such webpage the <b>Outer Environment (OE)</b>.
|
|
OE can communicate with Photopea through <a href="http://web.archive.org/web/20150331203017/http://www.w3.org/TR/webmessaging/">Web Messaging</a>.
|
|
</p>
|
|
|
|
<pre>window.addEventListener("message", function(e) { alert(e.data); });
|
|
var wnd = document.getElementById("pp").contentWindow;
|
|
wnd.postMessage(msg, "*");</pre>
|
|
|
|
|
|
<p>OE can send <b>two kinds of data</b> to Photopea:</p>
|
|
|
|
<ul>
|
|
<li><b>String</b> - contains a script, which will be executed by Photopea</li>
|
|
<li><b>ArrayBuffer</b> - a binary file: psd, svg, jpg, ... fonts, brushes, ...</li>
|
|
</ul>
|
|
|
|
<p>When Photopea is initialized and ready to accept commands, it sends the message <code>"done"</code>.
|
|
After your message is processed, Photopea also sends back the message <code>"done"</code>.</p>
|
|
|
|
<a href="https://photopea-api-demo.glitch.me">Some demos of live messsaging in Photopea</a>
|
|
|
|
<h2>Retrieving data from Photopea</h2>
|
|
|
|
<p>Photopea can send the current image to OE using the following command (inside a script):</p>
|
|
|
|
<pre>app.activeDocument.saveToOE("gif");</pre>
|
|
|
|
<p>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 <code>"done"</code> (processing the script has finished).</p>
|
|
|
|
<p>It can also send any String to OE using the following command (inside a script):</p>
|
|
|
|
<pre>app.echoToOE("Hello");</pre>
|
|
|
|
<p>The full description at <a href="https://www.photopea.com/learn/scripts">/learn/scripts</a>.</p>
|
|
|
|
<h2>Examples of usage</h2>
|
|
|
|
<p>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.
|
|
<!--E.g. you can recreate the autosave feature (by calling <code>saveToOE()</code> in regular intervals).--></p>
|
|
|
|
<p>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.).</p>
|
|
|
|
<h2>Example: Integrating with a custom storage</h2>
|
|
|
|
<p>We can redefine the default behaviour of File - Open and File - Save.</p>
|
|
|
|
<ul>
|
|
<li>We can send Photopea any image in a message as ArrayBuffer</li>
|
|
<li>We can call <code>app.activeDocument.saveToOE("psd");</code> to send the current file to OE.</li>
|
|
<li>We can call <code>app.echoToOE("Hello");</code> to send any string to OE.</li>
|
|
<li>We can read and write <code>app.activeDocument.source</code> String to identify files.</li>
|
|
<li>We can set custom scripts to run after pressing Open or Save:
|
|
<a href="https://www.photopea.com/api/environment">customIO : open, save</a></li>
|
|
</ul>
|
|
<p>Now, we can do following:</p>
|
|
<ul>
|
|
<li>Set custom scripts to <code>app.echoToOE("Open" / "Save");</code> to be notified, when the user presses the buttons.</li>
|
|
<li>When the user wants to Open a file, show him your own file input (you can even let the user draw something, or take a picture of him).</li>
|
|
<li>Once you have the image (ArrayBuffer), send it to Photopea and set the source: <code>app.activeDocument.source="myID2353"</code>.</li>
|
|
<li>When the user wants to Save a file, read the file (<code>app.activeDocument.saveToOE("psd");</code>) and its source
|
|
<code>app.echoToOE(app.activeDocument.source);</code>, and save the new version into your storage.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="disqus_thread"></div>
|
|
<script>
|
|
|
|
/**
|
|
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
|
|
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
|
|
/*
|
|
var disqus_config = function () {
|
|
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
|
|
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
|
|
};
|
|
*/
|
|
(function() { // DON'T EDIT BELOW THIS LINE
|
|
var d = document, s = d.createElement('script');
|
|
s.src = '//photopeablog.disqus.com/embed.js';
|
|
s.setAttribute('data-timestamp', +new Date());
|
|
(d.head || d.body).appendChild(s);
|
|
})();
|
|
</script>
|
|
|
|
</div>
|
|
|
|
</html>
|