130 lines
6.4 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&#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 = ["1615457106.jpg", "1615751569.jpeg", "1616054747.gif", "1616275992.jpg", "1616435512.PNG", "g270ad358dbc3f1d746fe4020780db84fbcb180203f29524cb3c2cd8c59fc83d5f17c2bc0387f1545559da3c6ab8d3132afda1e4c7360bf7f02d6ded349652e71_1280.png", "g52200e17767de2a975f5dd8196045eaaae2ecdb763d45ce3aa0cc58d5be01aae17ae1a48836f44646fad0ae293d7ebbd9e62a3a6bdc7b94d298995b3f9082aea_1280.jpg", "g8ebb92544baf2eeba36ff4b0f81a1d38991c6ec63c6006c0aa189ac35519584aa467f115680b561025ad158f1e185f9aeadc4903723fb7354d94c2ada92c405a_1280.png", "g92cce0fcb1411212897557d4b0919498fccdfa9b1c3cb584c2a2f940348c238b0827cdf6d8ce77dae8ad79165750c8eb6b27ebbce27d4e69e26ebf0678f81f93_1280.png", "gea0189c1910661a2794f3aa82c5014d224bfb3d12ebe7be4fe5364d6931a76e2533e17f0a8f0879dee6750056385c6c3819e251c66a57adc9fd39f227463698f_1280.jpg", "new-1614700571.png", "new-1614717605.png", "new-1614718455.png", "new-1614724924.png", "new-1614942864.png", "new-1615328805.png", "new-1615328956.png", "new-1615329059.png", "new-1616022182.png", "new-1616280431.png", "new-1616366881.png", "new-1616437241.png", "new-1616537029.png", "pexels-photo-266642.jpeg", "photo-1454006639960-af9b6a303eae?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8NXx8anVzdGljZXxlbnwwfHx8fDE2MTY1OTA4OTE&ixlib=rb-1.2.1&q=80&w=400", "photo-1491013516836-7db643ee125a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8Mnx8YmFieXxlbnwwfHx8fDE2MTU5MjkwODU&ixlib=rb-1.2.1&q=80&w=400", "photo-1507835661088-ac1e84fe645f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8MXx8RlJFRURPTXxlbnwwfHx8fDE2MTU5OTU2NTI&ixlib=rb-1.2.1&q=80&w=400", "photo-1557125785-9dd832cc42bb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8NDB8fHJhaXNlZCUyMGhhbmRzfGVufDB8fHx8MTYxNjMxMTI2MQ&ixlib=rb-1.2.1&q=80&w=400", "photo-1575505586569-646b2ca898fc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8NXx8bGF3eWVyfGVufDB8fHx8MTYxNjU4MzU4Nw&ixlib=rb-1.2.1&q=80&w=400", "photo-1592323401640-9c24ed330baf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8ODB8fHBob25lfGVufDB8fHx8MTYxNjM1NDQyMg&ixlib=rb-1.2.1&q=80&w=400", "photo-1603899122332-81418ddc0e12?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8NDd8fG1lc3NlbmdlcnxlbnwwfHx8fDE2MTYzNjE0NTM&ixlib=rb-1.2.1&q=80&w=400", "photo-1604654894610-df63bc536371?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNTc5fDB8MXxzZWFyY2h8MXx8bWFuaWN1cmV8ZW58MHx8fHwxNjE1NTQ1NTE3&ixlib=rb-1.2.1&q=80&w=400", "tinyX (15).psd"];
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>