Photoeffects site based on php

Question

I want to know how websites like http://photofunia.com/ and other online photo effects sites are built. For example, using php, i want merge two images frame.png with profile.jpg. I want my frame.png transparent in the center where I would place my profile.jpg.

I have tried this, but it doesn't work:

<?php $dest = imagecreatefromjpeg('dest.jpg');
      $src = imagecreatefrompng('logo.png');
      $src = imagerotate($src, 90, imageColorAllocateAlpha($src, 0, 0, 0, 127));
      $almostblack = imagecolorallocate($src,254,254,254); 
      $src =  imagecolortransparent($src,$almostblack); 
      imagealphablending($dest, true);
      imagesavealpha($dest, 0);
      imagecopymerge($dest, $src, 900,600, 1, 1, 90,90, 90); 

Thanks in advance. Please help me.

Answer 1

Answering your questions:

1. Adobe doesn't provide an API for this. However you can use Adobe Creative SDK for your Photo-editing stuff.

2. Usually a lot of Javascript libraries are used. you can check out top image manipulation libraries at codegeekz

3. If you insist on using php, your best bet is to go with ImageMagick or with Image processing GD Library. It is the developer who is supposed to make these results 'perfect' as you term it. There are some interesting php image editing libraries that you could check out many of which are maintained till date!

4. For Merging images, you can hop to the official docs for imagecopymerge or perhaps utilise the Imagick/GD Library. This SO post may give you a headstart.

You could also use Gmagick which is a fork of ImageMagick and faster (see benchmark) in processing images (although at the cost of lesser features). The original project can be found at graphicsmagick. Going strictly by Php way, personally, I'd recommend ImageMagick given its speed, rich feature-set, popularity, support, documentation and examples.

Additional Ref:

• Php Image Processing
• GD vs ImageMagick vs Gmagick

Answer 2

If I understood the Question, Then it does'nt need to be js, Css will do the trick. Look into alpha and opacity and z-index

#img1{position:absolute;top:0px;}
#img2{position:absolute;top:50px;opacity:.6;}

<img src="http://lorempixel.com/400/200/sports/1" id="img1">
<img src="http://lorempixel.com/50/50/sports/2" id="img2">

Answer 3

You've received a more technical answer already so I'm going to focus on the creative aspect of things. You've also mentioned familiarity with the associated php libraries and even previous attempts to create similar compositions that seemed to lack luster in the end.

In my opinion, this endeavor is far more reliant on artistry, creativity and, most importantly, prepared assets. By manually preparing these images you will have more finesse over the final result as well as leave only the simple compositing to php. Not the entire editing process.

Frankly, such detailed results are not achievable via an API. This project will require hours of manual labor and editing. Paying attention to lighting, transparency and colors.

The most impressive effects are the ones where objects in the photo overlap the user-added image. Ie:

While this example is rather simple, the same logic applies to more complex compositions.

1. You need to start with a high resolution image. Especially if you will be offering physical prints to your users.
2. The high resolution is also quite necessary as you will have to edit and prep these in a program like Photoshop beforehand.
3. For best results these will require complex, compound masks in Photoshop. Think sharp and smooth alpha transitions. Don't just cut everything with hard lines.

When considering the example above, you would be able to get away with only one layer in photoshop. Simply cut a hole where photos will be placed and export as png.

For other examples I would recommend separate background and foreground layers, with the user-added image sandwiched in between.

This is another great example where resolution is of utmost importance. The leaves are way too small to be effectively masked out at a tiny resolution. Some of the leaves may also be blurred and out of focus; again, don't cut them with hard lines. For best results, use a soft brush when masking them in Photoshop.

And last but not least, here's a very simple hands-on example.

Note how the background image has a smooth mask while the leaf has a hard one. Frankly, parts of the leaf are out of focus and can be further refined. The investment of time you make here will make the world of difference in how convincing your final results are.

Save out each layer as a png and composite within php. I would recommend making sure each png has the same dimension. Don't try to position a tiny png over a larger one. Give them the same dimensions to make alignment a breeze.