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

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
blog.photopea.com/photo-pea-0-1.html
+11 -66
View File
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title> Photo Pea 0.1</title>
<title> Page not found</title>
<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 href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
@@ -26,74 +26,19 @@
<a 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">
<div id="content">
<div class="post" id="post-12">
<span class="date">September 14, 2013</span>
<h1>Photo Pea 0.1</h1>
<div class="entry">
</div><div id="main">
<div id="content" class="narrowcolumn">
<p>Description of the first Photo Pea release. Check it out at the <a href="//www.photopea.com">main site</a>.</p>
<span id="more-12"></span>
<h2>Features</h2>
<ul>
<li>Parsing and basic rendering of PSD files (see below)</li>
<li>Zoom tool</li>
<li>Hand tool (to move the canvas)</li>
<li>Move tool (for moving layers, masks etc)</li>
<li>History panel + navigation Backward / Forward</li>
</ul>
<h2>PSD format</h2>
<p>The first release of Photo Pea contains PSD parser. PSD format comes from Adobe Photoshop and is well documented at <a href="http://www.adobe.com/devnet-apps/photoshop/fileformatashtml/">Adobe's webpage</a>. My parser is very simple, it parses only 8-bit RGBA image channels (no grayscale, HDR etc.). It also parses several layer properties, raster and vector masks, folder structure and layer effects.</p>
<p>After making such parser, my next goal was to "draw" the image. User will probably want his project to look exactly like in Photoshop.
And there was the first big problem. Adobe says, how to get each integer, float and string out of their file, but they don't say how to interpret all that data. Some properties are obvious (layer dimensions, position, opacity), but others are not.</p>
<p>When making a rasterizer, the first necessary thing was to implement blending with different blend modes. Fortunatelly, blend modes are used across differnt applications. In my implementation, blending should work exactly the same, as in Adobe Photoshop, and probably many other programs.</p>
<p>Another hard and still unfinished feature are layer effects. I had no clue, how they work in Adobe Photoshop, so I could only guess. Usually, it was some combination of blurying, colorizing and combining with current layer. But - for example - Bevel and Emboss effect - I still have no idea how it works. If you know, how Bevel and Emboss effect work, let me know in comments below.</p>
<h2>Speed</h2>
<p>All current Photo Pea code is Javascript and is executed by browser on the CPU. Blending can take several seconds, when you blend large project (several megapixels) with many layers and layer effects. If you look into browser console, you can see some information about parsing and blending time. When you edit something, the project is completely reblended. There is no caching of pre-blended data now.</p>
<p>Modern native editors usually use GPU through OpenGL or OpenCL. It will be also necessary in Photo Pea for having some decent performance. The WebGL standard is already present in all main browsers, but WebCL, which is more appropriate, is not :( </p>
<img class="fullw" src="//blog.photopea.com/wp-content/uploads/2013/09/916FD094-7E37-4143-9FEC-64FC0A1BBA1E.jpg" alt="Screenshot on iPad" />
<p>Drag and Drop your PSD files to PP window and see how it works by yourself :)</p>
</div>
</div>
<h2 class="center">Error 404 - Not Found</h2>
</div>
<div id="sidebar">
</div><!--content-->
<div style="width:110px; margin: 0px auto;">
<a href="#" title="Share on Facebook" onclick="smallWindow('http://www.facebook.com/share.php?u=');"><img src="//www.photopea.com/promo/fb.png" /></a>
<a href="#" title="Share on Google Plus" onclick="smallWindow('https://plus.google.com/share?url=');"><img src="//www.photopea.com/promo/gp.png" /></a>
<a href="#" title="Share on Twitter" onclick="smallWindow('http://twitter.com/share?url=');"><img src="//www.photopea.com/promo/tw.png" /></a>
<script type="text/javascript">
function smallWindow(url)
{
var w = 640, h = 300;
window.open(url+"https://blog.photopea.com/photo-pea-0-1.html", "Share", "width="+w+",height="+h+",left="+Math.floor((window.innerWidth-w)/2)+",top="+Math.floor((window.innerHeight-h)/2));
}
</script>
</div>
</div>
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'photopeablog'; // required: replace example with your forum shortname
(function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();
</script>
<!--main-->
<?//php get_sidebar(); ?>
<h3>Visitors</h3>
<a href="http://info.flagcounter.com/nBqI"><img src="http://s10.flagcounter.com/count/nBqI/bg_FFFFFF/txt_000000/border_CCCCCC/columns_1/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
</div></div>
<div id="footer">&copy; 2013-2021 support@photopea.com</div>
</div> <!--page-->
</body>