mirror of
https://gitflic.ru/project/photopea-v2/photopea-v-2.git
synced 2025-08-17 17:06:21 +00:00
100 lines
5.9 KiB
HTML
100 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title> Photo Pea 0.1</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">
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-4249565-38', 'photopea.com'); ga('send', 'pageview');
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="page">
|
|
<div id="header">
|
|
<a href="https://blog.photopea.com/" class="title">Photopea Blog</a>
|
|
<!--<p>Web-based image editor.</p>-->
|
|
<a class="curr" 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 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">
|
|
|
|
<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>
|
|
|
|
</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(); ?>
|
|
|
|
<div id="footer">© 2013-2021 support@photopea.com</div>
|
|
</div> <!--page-->
|
|
</body>
|
|
</html> |