mirrors/photopea-v2
1
0
Fork 0
mirror of https://gitflic.ru/project/photopea-v2/photopea-v-2.git synced 2026-06-19 07:01:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Starting to work on this again, started by updating any new files

Browse Source
This commit is contained in:
DUOLabs333
2021-03-17 17:02:52 -04:00
parent 9f37cb6bd5
commit 520766bc0e
170 changed files with 3257 additions and 76413 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www.photopea.com/api/accounts
+32 -152
View File
@@ -1,153 +1,33 @@
<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>
<!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"><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 active"><a href="/api/accounts">Accounts</a></li>
</ul>
</div>
<div id="content" style="width:80%;">
<div class="post">
<h1>Accounts</h1>
<p>Photopea allows you to log-in through a third-party service (Google, Facebook ...).
Once you do it, Photopea can <b>identify you</b> and store your settings online (theme, language, colors, tool options).
Then, settings can be synchronized across all devices, where you use Photopea.</p>
<p>Photopea offers two types of accounts: <b>Free</b> and <b>Premium</b>. The Free account is available to anybody
for free at Photopea.com. The Premium account lets you use Photopea without advertisement and may have other benefits.</p>
<p>You can see prices and manage your account through the <b id="acc-window">Account Window</b> (click the Account button at the top).
Here you can order the Premium account or see, how many days of Premium you have left. Logging in is necessary for having Premium accounts.
The basic option is a Premium account for a single user.</p>
<img src="//i.imgur.com/3q2kgUo.png" class="fullw" />
<h2 id="teams">Teams</h2>
<p>You can order a Premium account for the whole team of users. It has three main benefits:</p>
<ul>
<li>Just a single person pays for the whole team (more comfortable)</li>
<li>You can change team members at any time</li>
<li>You can save money (less expensive per user)</li>
</ul>
<p>Creating teams is very simple. There are no emails, registrations, synchronizations etc.
All can be done inside the Account window. First, everybody has to log in (and see their email address).</p>
<img src="//i.imgur.com/qPnNtCi.png" class="fullw" />
<p>
Now, scroll down to Team Settings. A team leader (the one who pays for the account) ticks <b>Start a team</b> and fills in email addresses of all members of a team.
Other team members tick <b>Join a team</b> and fill in the email address of a team leader. Press "Save Team Settings" to save it.</p>
<a href="//i.imgur.com/yQUwPXI.png" target="_blank"><img src="//i.imgur.com/yQUwPXI.png" style="width:60%" /></a>
<p>To be a member of a team, you have to "choose a leader" and the leader has to "choose you" as one of members.
The leader can add or remove members at any time, and the member can change the leader at any time.</p>
<h2 id="distributors">Distributors</h2>
<p>Photopea API allows you to have the editor at your own website (using the <code>iframe</code>), and configure it as you wish, <b>for free</b>.
But sometimes, you may want to hide advertisement, social media buttons, branding ... let's call it a <b>whitelabel mode</b>.</p>
<p>We have a list of domains, for which Photopea runs in a whitelabel mode. The <b>Distributor account</b> allows you to add your domain into that list.</p>
<p>Order a distributor account (through the <a href="#acc-window">Account Window</a>) for the expected
<b title="A view is one loading of Photopea in a frame. Each reloading of a page is a new view.">number of views per month</b>.
<!--
If you exceed that number, just order a higher version next time.
If you exceed the number many times (and ignore our emails), your domain may be removed from a list (you will have a standard mode instead of whitelabel).
--></p>
<p>After you pay for the Distributor account, enter the name of your domain into the Account window and click "Save Domain Settings".
You can change your domain at any time.</p>
<img src="//i.imgur.com/h6MAEYu.png" style="width:60%" />
<h2 id="self-hosted">Self-Hosted Version</h2>
<p>Photopea consists of a HTML file, a CSS file and several JS files (around 2 MB in total).
Running it is very simple, there is no need for any server-side technologies (no PHP, no Node.js, no databases).</p>
<p>We provide a <b>self-hosted package</b> with a complete editor, which you can use on your own server.
It has several benefits over Distributor accounts:</p>
<ul>
<li>you can change CSS styles</li>
<li>you can run it in a local network without internet access</li>
<li>you do not depend on Photopea.com (when you are afraid, that it may go down)</li>
<li>you can be sure, that no part of the editor changes while you run it</li>
</ul>
<p>A self-Hosted version costs between $500 and $2000 per month. You should pay for a whole year (12 months) in advance,
and you will get resources, that will work for exactly one year. After each year, you can decide, if you want to pay for a next year
(and get new resources), or terminate it. You can get two updates during a year for free (at any time), each next update costs $300.</p>
<p>Write us an email to <a href="mailto:support@photopea.com">support@photopea.com</a>
and tell us an estimated number of your users (and the usage frequency), so we can discuss the terms of our agreement.</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>
<!--
- 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.
-->
www.photopea.com/api/demo
+32 -134
View File
@@ -1,135 +1,33 @@
<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>
<!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"><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">
<style type="text/css">
.image {
display: inline-block;
width:9em;
height:9em;
margin: 1em;
}
img {
width:100%;
height:80%;
}
</style>
<script>
var images = [<br />
<b>Warning</b>: scandir(img): failed to open dir: No such file or directory in <b>/var/www/vhosts/photopea.com/httpdocs/api/pages/demo.html</b> on line <b>18</b><br />
<br />
<b>Warning</b>: scandir(): (errno 2): No such file or directory in <b>/var/www/vhosts/photopea.com/httpdocs/api/pages/demo.html</b> on line <b>18</b><br />
<br />
<b>Warning</b>: sizeof(): Parameter must be an array or an object that implements Countable in <b>/var/www/vhosts/photopea.com/httpdocs/api/pages/demo.html</b> on line <b>19</b><br />
];
function go(e)
{
var html = "";
var fmts = ["png","jpg","jpeg","webp"];
for(var i=0; i<images.length; i++)
{
var editOBJ = {
"files" : [
"//www.photopea.com/api/img/" + images[i],
],
"server" : {
"version":1,
"url" : "//www.photopea.com/api/saveImage.php",
"formats" : [ images[i].split(".")[1] ]
}
}
var suff = images[i].split(".").pop();
var editURL = "//www.photopea.com#" + encodeURI(JSON.stringify(editOBJ));
html += "<div class=\"image\">"
html += "<a href=\"img/" + images[i] + "\">";
if(fmts.indexOf(suff)!=-1) html += "<img src=\"img/" + images[i] + "\" />";
else html += "<img src=\"missing.png\" />";
html += "</a>";
html += "<span>"+images[i]+"</span> <br />";
html += "<a href=\"" + editURL + "\">Edit</a>";
html += "</div>"
}
document.getElementById("imgcont").innerHTML = html;
//updatePlayground();
//window.addEventListener("hashchange", onHashChange, false);
//onHashChange();
}
document.body.onload = go;
</script>
<h1>Editing local images with Photopea</h1>
<p>Click "Edit" to open an image in Photopea. Click "File" - "Save (to Server)" in Photopea to save it back.</p>
<div id="imgcont"></div> </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>
<!--
- 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.
-->
www.photopea.com/api/environment
+32 -153
View File
@@ -1,154 +1,33 @@
<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>
<!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 active"><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>Environment</h1>
<p>The look of the editor can be customized by the <code>environment</code> property of the JSON.</p>
<pre>{
...
"environment" : {
"theme" : 2, "lang" : "es",
"vmode" : 0, "intro" : true,
"eparams" : { "guides" :true, "grid" : true, "gsize": 8,
"paths": true, "pgrid": true },
"customIO" : { "open": "app.echoToOE(\"Open\");" },
"localsave" : false, "autosave" : 120,
"showtools" : [0,5,9], "menus" : [ [1,1,0,1], 1, 0, 1, [0] ],
"panels" : [0, 2],
"phrases" : [ [1,0], "Open Design", [1,2], "Save Design" ],
"topt" : { "t0": ..., "t1": ..., ... },
"tmnu" : { "t0": ..., "t1": ..., ... },
"icons" : { "tools/crop": "https://www.me.com/img/crop.png", ... },
"plugins":[ ... ]
}
}</pre>
<p>Each parameter is optional. They have the following meaning:</p>
<ul>
<!--
<li><code>fcolor</code> - foreground color</li>
<li><code>bcolor</code> - background color</li>
<li><code>rulers</code> - rulers enabled</li>-->
<li><code>theme</code> - theme (0, 1, 2, ...)</li>
<li><code>lang</code> - language</li>
<li><code>vmode</code> - view mode. 0: regular, 1: panels are collapsed, 2: hide all panels</li>
<li><code>intro</code> - when no documents are open, show introduction panel (with buttons etc.)</li>
<li><code>eparams</code> - extras: enable or disable guides, grid, paths, pixel grid ...</li>
<!--<li><code>showbranding</code> - show / hide Log In, Social media links etc.</li>-->
<li><code>customIO</code> - redefine the behavior of File - Open, Save etc. and run a custom script instead.
Possible properties: <code>"new", "open", "openFromURL", "takePic", "showTemplates",
"save", "saveAsPSD", "publishOnline", "exportLayers"</code>.</li>
<li><code>localsave</code> - enable / disable "Save as PSD", "Save for Web" and "Publish Online"</li>
<li><code>autosave</code> - with a value X, Photopea will execute "File - Save" each X seconds</li>
<li><code>showtools</code> - show only following tools (see tool IDs below) </li>
<li><code>menus</code> - specify the structure of File, Edit, Image ... menus with <b>0/1 flags</b>.
Each element of an array is either 0: hide the item, 1: show the item with a standard content,
or an array of flags for sub-items (works recursively). If your array is shorter than required, zeros will be added to the end.
See the current menu structure of Photopea to find the right values.
E.g. [1,1] as the first element means, that the "File" menu will be shown with "New" and "Open" items only.</li>
<!--<li><code>showpanels</code> - allows you to hide elements on the right side.
There are two <b>columns</b>, which contain <b>panel blocks</b>, which contain one or more <b>panels</b>.
Each element of an array is either 0: hide the column, 1: show the column with all standard items,
or an array of indices of panel blocks, that should be displayed.</li>-->
<li><code>panels</code> - what panels should be shown in a sidebar. Use following IDs:<br />
0: HISTORY, 1: SWATCHES, 2: LAYERS, 3: INFO, 4: HISTOGRAM, 5: PROPERTIES, 6: CSS, 7: BRUSH, 8: LAYERCOMPS, 9: CHARACTER, 10: PARAGRAPH,
11: ACTIONS, 12: NAVIGATOR, 13: COLOR, 14: TPRESET, 15: GUIDEGUY, 16: CHANNELS, 17: PATHS, 18: GALLERY.</li>
<li><code>phrases</code> - allows you to replace any phrase inside Photopea with your own.
The aray has the form <code>[ ID1, W1, ID2, W2, ... ]</code>, where IDx is the ID of some phrase and Wx is a new phrase, that should be used instead.<br />
Some useful IDs: [1,2]: Save (File menu), [2,0]: Step Forward, [2,1]: Step Backward.
To discover IDs of other phrases, get familiar with <a href="https://github.com/photopea/OpenWord">OpenWord table structure</a> and find
your phrase in <a href="https://www.photopea.com/code/LNG2.js">a current phrase database</a>, or just write us an email to support@photopea.com.</li>
<li><code>topt</code> - tool options. Lets you change the settings of each tool.
Keys are "tXY", where XY is the tool ID. Each tool has its own format (see below).</li>
<li><code>tmnu</code> - tool menu. Lets you specify the structure of the top menu for each tool.
Keys are "tXY", where XY is the tool ID. Each tool has its own format (see below).</li>
<li><code>icons</code> - custom icons. Each icon has an icon ID (key) and the image URL (value).
You can find icon IDs <a href="//www.photopea.com/code/DBS.js">here</a>.
E.g. the Crop Tool has an ID "tools/crop". The background of the introduction panel as an ID "intro".</li>
<li><code>plugins</code> - described <a href="/api/plugins">here</a></li>
</ul>
<h2>Tool options and menus</h2>
<h3>Move Tool</h3>
<p>Options: <code>[1,0,null]</code>. Three values mean Auto-Select, Transformation controls and Distances.
1 means enabled, 0: disabled, null: not specified.</p>
<p>Menu: <code>[1,1,1,1,1,1]</code>. Six flags to show / hide six items: Auto-Select, Transformation controls, Distances,
Quick Save (Get PNG...), Vertical Align, Horizontal Align.</p>
<h3>Magic Wand</h3>
<p>Options: <code>[0,0,[16,true,true]]</code> - Combining operation, Feather, Select options: Tolerance, Anti-alias, Contiguous.</p>
<h2>Tool IDs</h2>
<ul style="column-count:3; list-style-type: none;">
<li>0: Move Tool</li><li>1: Rectangle Select</li><li>2: Ellipse Select</li><li>5: Lasso Select</li><li>6: Polygonal Lasso Select</li><li>7: Magnetic Lasso Select</li><li>8: Quick Selection</li><li>9: Magic Wand</li><li>10: Crop Tool</li><li>14: Eyedropper</li><li>16: Ruler</li><li>18: Spot Healing Brush Tool</li><li>19: Healing Brush Tool</li><li>20: Patch Tool</li><li>23: Brush Tool</li><li>24: Pencil Tool</li><li>27: Clone Tool</li><li>31: Eraser Tool</li><li>34: Gradient Tool</li><li>35: Paint Bucket Tool</li><li>36: Blur Tool</li><li>37: Sharpen Tool</li><li>38: Smudge Tool</li><li>39: Dodge Tool</li><li>40: Burn Tool</li><li>41: Sponge Tool</li><li>47: Type Tool</li><li>42: Pen</li><li>43: Free Pen</li><li>51: Path Select</li><li>52: Direct Select</li><li>54: Rectangle</li><li>55: Ellipse</li><li>57: Line</li><li>56: Parametric Shape</li><li>58: Custom Shape</li><li>59: Hand Tool</li><li>61: Zoom Tool</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>
<!--
- 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.
-->
www.photopea.com/api/img2/Waqart-Pricing%20Table.xd
BIN
View File
Binary file not shown.
www.photopea.com/api/img2/blind.pdf
BIN
View File
Binary file not shown.
www.photopea.com/api/img2/invoice.pdf
BIN
View File
Binary file not shown.
www.photopea.com/api/index.html
+32 -200
View File
@@ -1,201 +1,33 @@
<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>
<!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 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>
<!--
- 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.
-->
www.photopea.com/api/live
+32 -137
View File
@@ -1,138 +1,33 @@
<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>
<!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>
<!--
- 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.
-->
www.photopea.com/api/playground
+32 -126
View File
@@ -1,127 +1,33 @@
<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>
<!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"><a href="/api/live">Live Messaging</a></li>
<li class="lvl1"><a href="/api/plugins">Plugins</a></li>
<li class="lvl0 active"><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">
<script>
function onMSG(e) {
console.log(e.origin, e);
if(e.origin.indexOf("photopea.com")==-1) return;
var nst;
if(typeof e.data=="string") nst = e.data;
else nst = "ArrayBuffer["+e.data.byteLength+"]";
document.getElementById("msgs").textContent += nst+"\n";
};
var frame = null;
function updatePlayground(e)
{
var json = document.getElementById("json").value;
json = JSON.stringify(JSON.parse(json));
var url = "https://www.photopea.com";
var end = "#"+encodeURI(json);
document.getElementById("url").value = url+end;
frame.src = url+"?rnd="+Math.floor(Math.random()*0xffffffff)+end;
//frame.contentWindow.location.reload(true);
//wnd.postMessage(script, "*");
}
function runScript(e)
{
var script = document.getElementById("script").value;
frame.contentWindow.postMessage(script,"*");
}
document.body.onload = function(e) {
frame = document.getElementById("pp");
window.addEventListener("message", onMSG);
updatePlayground();
}
</script>
<h1>Playground</h1>
<p>Enter the JSON configuration file, which will be encoded into the URL:</p>
<textarea rows="8", style="width:100%;" id="json">{
"files": [
"https://www.photopea.com/api/img2/pug.png"
],
"environment": {
}
}</textarea>
<button onclick="updatePlayground()" style="display:block; font-size:1.2em;" >Update</button> <br />
<b>URL:</b>
<textarea rows="3", style="width:100%;" id="url"></textarea>
<iframe src="" id="pp" style="border:none; width:100%; height:500px;"></iframe>
<h2>Run a script</h2>
<textarea rows="4", style="width:100%;" id="script">app.activeDocument.activeLayer.translate(20,20);</textarea>
<button onclick="runScript()" style="display:block; font-size:1.2em;">Run</button> <br />
<b>Messages from Photopea</b>
<pre id="msgs"></pre>
</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>
<!--
- 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.
-->
www.photopea.com/api/plugins
+32 -115
View File
@@ -1,116 +1,33 @@
<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>
<!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"><a href="/api/live">Live Messaging</a></li>
<li class="lvl1 active"><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>Plugins</h1>
<p>Create Plugins for Photopea and provide them to your users through a configuration JSON.</p>
<pre>{ "environment": {
"plugins" : [
{
"name" : "Wikipedia",
"url" : "https://en.wikipedia.org",
"width" : 400,
"height": 300,
"icon" : "https://en.wikipedia.org/static/favicon/wikipedia.ico"
}
]
} }</pre>
<ul>
<li><code>name</code> - plugin name</li>
<li><code>url</code> - plugin URL</li>
<li><code>width</code> - panel width</li>
<li><code>height</code> - panel height</li>
<li><code>icon</code> - plugin icon (optional)</li>
</ul>
<p>For each plugin, the button will be added to the right side, below the current buttons.</p>
<img src="//i.imgur.com/8tPgmho.png" class="fullw" />
<p>After the user clicks the plugin button, the panel is opened with a website <code>url</code>, having the size of <code>width</code> and <code>height</code>.</p>
<p>Users can drag-and-drop images from your website to Photopea (as Photopea supports dropping images from any website, opened by a browser).</p>
<p>Your website can connect with Photopea using <a href="/api/live">Live Messaging</a> (your website acts as the OE).
It allows your plugin to execute scripts (e.g. to change foreground color, to move a layer, etc.).</p>
<p>The plugin can give files to Photopea (images: psd, jpg, svg ... or resources: brushes, patterns, fonts ...),
or request the current file in a specific format.
All this can be controlled e.g. by buttons in your plugin (website).</p>
<pre>window.parent.postMessage("...script...", "*");
window.parent.postMessage(ArrayBuffer, "*");</pre>
<h2>Examples of usage</h2>
<p><b>Photo Store</b>. Let users browse your database of images. They can search the database by a keyword.
You can add a button "Open" next to each image, which would open that image in Photopea.</p>
<p><b>Font Gallery</b>. Let users browse your database of fonts. The font will be loaded after clicking the button.
You can integrate a payment gateway into the plugin, too (as it is your website, you have full control over it).</p>
<p>You can make your plugin "commercial" - let users pay for them monthly. The sign-in and the payment interface could still be
in the same "iframe" of your plugin, inside Photopea (or you could open a new window and then, come back to Photopea).</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>
<!--
- 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.
-->