mirror of
https://gitflic.ru/project/photopea-v2/photopea-v-2.git
synced 2025-08-17 17:06:21 +00:00
202 lines
8.4 KiB
HTML
202 lines
8.4 KiB
HTML
|
|
<!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 active"><a href="/api/">API Spec</a></li>
|
|
<li class="lvl1"><a href="/api/environment">Environment</a></li>
|
|
<li class="lvl1"><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>Passing data to Photopea</h1>
|
|
|
|
<!--<p>* * * You can also use <a href="https://www.photopea.com/api/live">Live Messaging</a> to get files to and from Photopea.</p>-->
|
|
|
|
<p>Photopea can be configured using a parameter after a hash sign.</p>
|
|
|
|
<pre>https://www.photopea.com#STRING_VALUE</pre>
|
|
|
|
<p>Such URL can be opened directly, or used as a <code>src</code> of an <code>iframe</code>.
|
|
String value is encoded into the URL using classic encoding of query parameters (space as %20 etc.).
|
|
It corresponds to <strong>encodeURI()</strong> in Javascript or <strong>urlencode()</strong> in PHP.
|
|
This string contains a JSON object.</p>
|
|
|
|
|
|
<h3>JSON configuration object</h3>
|
|
<p>JSON object must have the following structure:</p>
|
|
|
|
<pre>{
|
|
"files" : [
|
|
"https://www.mysite.com/images/design.psd",
|
|
"https://www.mysite.com/images/button.png",
|
|
"data:image/png;base64,iVBORw0KGgoAAAAN..."
|
|
],
|
|
"resources" : [
|
|
"https://www.xyz.com/brushes/Nature.ABR",
|
|
"https://www.xyz.com/grads/Gradients.GRD",
|
|
"https://www.xyz.com/fonts/NewFont.otf"
|
|
],
|
|
"server" : {
|
|
"version" : 1,
|
|
"url" : "https://www.myserver.com/saveImage.php",
|
|
"formats" : [ "psd:true", "png", "jpg:0.5" ]
|
|
},
|
|
"environment" : {...},
|
|
"script" : "app.activeDocument.rotateCanvas(90);"
|
|
}</pre>
|
|
<p>
|
|
All parameters are optional.
|
|
Data URIs can be used - file can be passed inside a request (<a target="_new" href="//www.photopea.com#%7B%22files%22:%5B%22data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==%22%5D%7D">test</a>).
|
|
</p>
|
|
<h3>Parameters</h3>
|
|
<ul>
|
|
<li><code>files</code> - array of files, that are loaded when Photopea starts</li>
|
|
<li><code>resources</code> - array of resources (gradients, brushes, fonts ...)</li>
|
|
<li>
|
|
<code>server</code> - parameters for saving documents back to a server
|
|
<ul>
|
|
<li><code>version</code> - the version of the API</li>
|
|
<li><code>url</code> - URL address of a server</li>
|
|
<li><code>formats</code> - formats, in which a document should be sent to a server.
|
|
The string format corresponds to <a href="https://www.photopea.com/learn/scripts">saveToOE</a>.</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<code>environment</code> - parameters of the environment, see <a href="/api/environment">Environment</a>
|
|
</li>
|
|
<li>
|
|
<code>script</code> - the <a href="/learn/scripts">script</a>, that should be executed after loading each file (can be long)
|
|
</li>
|
|
</ul>
|
|
|
|
<h2>Saving to server</h2>
|
|
|
|
<p>When <code>server</code> parameter is specified in a request to Photopea.com,
|
|
every document opened in Photopea will have the <code>File - Save</code> option.
|
|
After a user clicks it, document data are sent to your server in a HTTP request using POST method.</p>
|
|
|
|
<p>Photopea will send binary data (a sequence of bytes) to your server, which has two parts:</p>
|
|
<ul>
|
|
<li>2000 Bytes - JSON data</li>
|
|
<li>the rest - one or more image files</li>
|
|
</ul>
|
|
|
|
<p>The JSON will have a following structure:</p>
|
|
<pre>{
|
|
"source" : "https://www.mysite.com/images/button.png",
|
|
"versions" : [
|
|
{"format":"psd", "start": 0, "size": 700000 },
|
|
{"format":"jpg", "start": 700000, "size": 100000 },
|
|
...
|
|
]
|
|
}</pre>
|
|
<ul>
|
|
<li><code>source</code> - if the file was loaded from your server, the value is the URL of this document.
|
|
Otherwise (opening a local file, creating an empty file), it contains <code>"local,X,NAME"</code>,
|
|
where X is the integer ID of the document, and NAME is the name of the document</li>
|
|
<li>
|
|
<code>versions</code> different versions of your document
|
|
<ul>
|
|
<li><code>format</code> - format of the file, exported from Photopea</li>
|
|
<li><code>start, size</code> - file offset and the size (relative, from the end of JSON)</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>Here is a short PHP example, which accepts files from Photopea.</p>
|
|
|
|
<pre>$fi = fopen("php://input", "rb"); $p = JSON_decode(fread($fi, 2000));
|
|
// getting file name from "source"
|
|
$fname = substr ($p->source, strrpos($p->source,"/")+1);
|
|
$fo = fopen("img/".$fname,"wb"); while($buf=fread($fi,50000)) fwrite($fo,$buf);
|
|
fclose($fi); fclose($fo);</pre>
|
|
<!--<pre>$p = json_decode( $_POST["p"] ); // parse JSON
|
|
// getting file name from "source";
|
|
$fname = substr ($p->source, strrpos($p->source,"/")+1);
|
|
file_put_contents("images/".$fname, base64_decode( $p->versions[0]->data ));</pre>-->
|
|
|
|
<h3>Your Response</h3>
|
|
<p>After the server receives a file, it can send back a JSON response with optional String parameters:</p>
|
|
<ul>
|
|
<li><code>message</code> - when specified, will be displayed to the user for a moment</li>
|
|
<li><code>script</code> - when specified, will be executed (e.g. you can call <code>app.echoToOE("saved");</code>)</li>
|
|
<li><code>newSource</code> - when specified, will be used as a new value of "source" for saving to a server in the future
|
|
(can be useful, when a file was created within Photopea: "source" was "local,...")</li>
|
|
</ul>
|
|
|
|
<h2>Cross-Origin Resource Sharing</h2>
|
|
|
|
<p>For security reasons, webapps can access only files from the same domain.
|
|
In order to let Photopea load your file, the response of your server must contain the following header:<p>
|
|
|
|
<pre>Access-Control-Allow-Origin: *</pre>
|
|
|
|
<p>Find out more at <a href="http://www.w3.org/TR/cors/">CORS specification</a> or at <a href="http://enable-cors.org/">enable-cors.org</a>.</p>
|
|
|
|
<h2>Prices</h2>
|
|
|
|
<p>Usage of Photopea API is completely free. Keep in mind, that PP is in early stages of development and there may be critical bugs.
|
|
We do not take any responsibility for documents edited or generated by Photopea.</p>
|
|
|
|
<p>If you want to hide advertisement and "colorful buttons", and use a <b>whitelabel mode</b>, look at
|
|
<a href="https://www.photopea.com/api/accounts#distributors">Distributor account</a>.</p>
|
|
</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>
|