Develop Reference

Photoeffects site based on php

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.

Answering your questions:
Adobe doesn't provide an API for this. However you can use Adobe Creative SDK for your Photo-editing stuff.
Usually a lot of Javascript libraries are used. you can check out top image manipulation libraries at codegeekz
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!
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

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.
You need to start with a high resolution image. Especially if you will be offering physical prints to your users.
The high resolution is also quite necessary as you will have to edit and prep these in a program like Photoshop beforehand.
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.

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">

Uses for canvas | Practical examples

I'm trying to understand what people use canvas for?
I see it on job postings I read about it in Definitive JavaScript, but I don't quite get what it is used for.
I understand that you can draw 2d or 3d ( usually 2d ) objects but why no just use Gimp or Photoshop and upload the image.
Is it so you can create dynamic images based on say...user-specific data?
What is a practical example or perhaps a link to a professional implementation of canvas ( Definite JavaScript show basis stuff like drawing circles ).
MDN Tutorial

I have used a canvas to draw a graph, and it falls back to requesting a PHP-generated image if the browser doesn't support <canvas>. It's always a good idea to delegate processing from the server to the client, as this places less load on the server. In other words, instead of the server going "here's the stuff", it's more like "here's the data and the instructions to show it".
Another use I've seen is to highlight areas of an imagemap when moused over.
<canvas> is central in HTML5 game development, since it is used to draw the entire game viewport. Without it, there is no game.

Is it so you can create dynamic images based on say...user-specific data?
Yes

We used <canvas> to build interactive design editor for apparel in our e-commerce store — http://printio.ru/tees/new
The kind of interactivity we provide was only possible with Flash until recently.
Even on back end, we use Node.js and <canvas>-based image processing+generation to take data from online editor and create designs that are later used in store. These canvas-generated designs are eventually printed out on tshirts, mugs, caps, bags, and so on.
I think that's a pretty practical example :)
This is all done via Fabric.js canvas library (developed by us as well).

<canvas> is used for better Performance. <canvas> is much more faster and dynamic than jpeg or anything else. Example: http://www.profistart.com/internetseiten.html here was <canvas> used for Background.

SVG drawing application with vector export

I want to create a drawing application where I can place text and images on a canvas. Those elements also need to be interactively manipulated. Eventually the resulting canvas has to be exported to a vector based PDF. An excellent contender for this functionality would be SVG.
However, this application also needs to be crossbrowser compatible. I've been browsing around for some time now and have seen a couple of solutions available. I found among others RaphaelJS and Google's SVGWeb for working with SVG.
Now for converting those SVG files to a PDF I'm not sure if for instance Batik will offer me what I am looking for.
Also, how would bitmap images be handled when converting the SVG to PDF?

Images within a PDF have to be part of the PDF. They can use any number of compression techniques (jpeg, fax, jbig2, zip, gif, a couple others), various bits per color, various colors per pixel, and so forth... but the pixels must be defined within that PDF.
I've used Batik myself. A little clunky in combination with iText (surprisingly large amount of code involved), but quite serviceable. The only thing that really bugged me was that it wouldn't draw text as text... Batik insists on drawing it as paths. They may have overcome this since I started using it a year or two ago. But that was kind of a deal breaker (HUGE pdf bloat) so we ended up rendering our text separately: PITA, potential z-order issues (that never came up for us), plus a couple subtle interal layout issues that didn't turn up till later.
Batik supports script, animation, and a variety of Other Things that don't really matter within the bounds of SVG->PDF conversion. There's at least one other Java SVG library out there that is much more compact(not as feature rich... half empty/half full), though I can't for the life of me remember the name at the moment. The name came up on the iText mailing list maybe a year ago? Don't recall exactly. Quite some time ago, and AFTER I got Batik working. Ah well.

Batik can convert svg to pdf, Inkscape or Adobe Illustrator can too AFAIK.

I think that Inkscape would be your best choice here, it mostly sticks to SVG 1.1 for the shapes it implements (using a few of its own properties, which you can get rid of if you save it as a plain SVG). For me, even when I save as an Inkscape SVG, it displays fine in browsers even with blurs, though it won't work in Internet Explorer. For that, there is no solution besides using an external tool such as (as you've already found) SVGWeb. Unfortunately, javascript support for SVG can differ between browsers, and there is no way to fix this.
As for PDF, I think that raster images are embedded if they are embedded within the SVG itself, or linked if the SVG's is linked. This is easy to do by going to Extensions > Images > select either Embed Images or Extract Images.

You can program a java applet with Processing. It's cross-browser, can export to pdf. Bitmap images would remain bitmap images embedded in the pdf.

animated board game for web - not Flash - what is possible?

What is the best cross-browser way to get a flat mouse coordinate input data and simple callback for mouse events for my rectangular game area on my web page, even when it has loads of larger and smaller images and text string overlaid haphazard onto it?
And what is the best way to insert or remove a text string or semi-transparent image overlay at an arbitrary location (and Z order, specified relative to existing objects) in a board game rectangle with cross-browser DHTML?
And how can I stop the user selecting part or all of my montage of images (I just want them to interact with it as if it was Flash), and can I stop the right click menus coming up in IE, FF etc?
I want to do this without Flash because I want something that will work both on desktops and on iPhone and potentially other mobile platforms too.
I appreciate there are serious limitations (eg less image scaling capabilities, not vector, no rotation capability) to what I can do if I'm not using Flash but I'm very interested to know what capabilities are available.
Are there perhaps any frameworks available to make it easier than coding from scratch?
Would J/Query be a good match for some of the requirements? What else do I need?

I would recommend Google Web Toolkit. It lets you program in Java, which gives you all the type-safety and nice IDE functionality that Java entails, but compiles to Javascript so that you can just run it in a browser. It also does a ton of optimization and supports tons of features.

jQuery is excellent at doing this. I used jQuery's UI and Ajax functionality to implement the frontend for a game of chess.
I made it a little easier by creating an 8-by-8 table with unique div names for each tile, so Javascript can access them by getting the elements by id. If you can't create something like that, you do have the option of placing elements anywhere on the page (either absolute or relative to a given element). You can also easily change the z-index, including when the use is dragging a piece or when they have dropped it.
As far as disable right click and item selection goes, that's something that I didn't figure out how to do. You might want to take a look at some other Ajax games like Grand Strategy, which are much more polished than my experiment and may have figured out how to do this.

There are two main APIs for working with arbitrary drawing and positioning on the web, Canvas and SVG.
Take a look at Chrome Canvas Experiments and the Raphael Javascript toolkit to see some examples and Javascript abstractions.

The key is element.style.position = 'absolute'. To illustrate just what's possible here's how far I've managed to push javascript (and from scratch at that!):
http://slebetman.110mb.com/tank3.html - RTS in DOM! Click on units/squads then click somewhere else to tell them where to go. You can control both sides.

Anyone knows the algorithm for this kind of rubbery effect?

I'm doing some animations and I want to implement something like this on the web. I was thinking that the HTML canvas can do this kind of job. Because I can scale part of an image. I just need the algorithm to actually make it work.
The effect is elastic, if the window is small, the greater the elasticity of the window when you restore it. I was thinking that I can make this work in web images.. if the user click the image it will scale with this kind of effect, not the boring way of scaling.
This is ubuntu, I know that we can look at the source code maybe to see how it actually implements the animation. But I dont know where to find it. Or i don't even understand codes written in linux because I just understand php, javascript. Basically I'm not a software developer, My core expertise is in web development.
http://www.youtube.com/watch?v=hgQP-aFragQ

I believe your best bet is having a look at John Resig's Processing.js.
Processing is a animation language for Java; John has ported it to the browser using canvas.

Your not going to find a web based solution that is going to do this for you. If you need something like this done it will have to be in flash or some other application (Lenni mentioned Java) that runs in a separate media box embedded in a web page.
People don't want big flashy animations, seeing something that is 'boring' is much better if it becomes more usable.

First up - I don't know the actual algorithm they use here.
However, I'd attack this by creating a grid of points (say 10x10), each point attached to it's neighbors by damped springs. It might be worth anchoring the edge/corner points to the screen with springs too.
By deforming the grid (stretching and compressing the springs) and then modeling the spring responses, you'd get some interesting effects like those shown. You might then be able to record the patterns so that the points can follow a pre-computed path for faster animation if your animations are predictable.
Then you need to work out how to split the image and map it onto the grid. The splitting may be better done once on the server, but the client can do it if you use canvas.
svg & vml is a possibility - they'll work without plugins and are similar enough to code for, but I don't think you'll get correct enough image deformation. However, you can scale and rotate with impunity (and quickly) so if you just anchor 2 cell image points to the grid rather than all 4, you'll get an interesting animation - not quite like the video, but pretty good.
As for how to model damped springs, you'll need to keep track of the mass of each point (how heavy it is), how much force the spring is exerting on each point (scalar of how compressed/stretched it is and it's vector) and a damping force on the points (resistive force to the square of the velocity of the point).
It's physics modeling, to be sure, but quite possible.
The response may well be slow. Especially on IE. Canvas needs a plug-in on IE, so if you use canvas, IE folk wont see it. SVG works on almost everything except IE, but it does have VML which is similar. http://raphaeljs.com/ is a library that uses whatever's available. This will be a challenge to tune up :)
However you do this, it will always look best in chrome, the V8 javascript engine outstrips everything else for this kind of work. IE has the slowest javascript engine.