mirrors/photopea-v2
1
0
Fork 0
mirror of https://gitflic.ru/project/photopea-v2/photopea-v-2.git synced 2026-06-18 22:51:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

The creator of Photopea apparently doesn't like scrapers, so it blocked my script access. Going to have to find another way to download it.

Browse Source
This commit is contained in:
DUOLabs333
2021-03-17 18:48:45 -04:00
parent 520766bc0e
commit 80894dbd6e
170 changed files with 76412 additions and 3256 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www.photopea.com/api/live
+137 -32
View File
@@ -1,33 +1,138 @@
<HTML>
<HEAD>
<TITLE>404 Not Found</TITLE>
<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
</HEAD>
<BODY>
<H1>Not Found</H1>
The requested document was not found on this server.
<P>
<HR>
<ADDRESS>
Web Server at photopea.com
</ADDRESS>
</BODY>
</HTML>
<!--
- Unfortunately, Microsoft has added a clever new
- "feature" to Internet Explorer. If the text of
- an error's message is "too small", specifically
- less than 512 bytes, Internet Explorer returns
- its own error message. You can turn that off,
- but it's pretty tricky to find switch called
- "smart error messages". That means, of course,
- that short error messages are censored by default.
- IIS always returns error messages that are long
- enough to make Internet Explorer happy. The
- workaround is pretty simple: pad the error
- message with a big comment like this to push it
- over the five hundred and twelve bytes minimum.
- Of course, that's exactly what you're reading
- right now.
-->
<!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&#038;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>