How to Merge image and final image should look like real

Question

Does anyone know a product that will let me upload jpg images onto a canvas image(big background image). Move, resize, border choices, then save everything to one merged image Final image should look like real image?

I had research a lot Drag an image on another image and save it to one image (like light augmented reality) Blend two images with pixastic does not work. How to get the new image?

But Doesnot found the exact solution? Any ideas?

Answer 1

You can use the following library:

• Pixastic: http://www.pixastic.com/lib/docs/actions/blend/

I also created a HTML5 version of the Pixastic effect using canvas:

HTML:

<canvas id="myCanvas" width="578" height="400"></canvas>

JS:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.globalAlpha=0.5;

// Image 1
var imageObj1 = new Image();
imageObj1.onload = function() {
    context.drawImage(imageObj1, 0, 0);
};
imageObj1.src = 'http://www.pixastic.com/sample/Flower.jpg';

// Image 2
var imageObj2 = new Image();
imageObj2.onload = function() {
    context.drawImage(imageObj2, 0, 0);
};
imageObj2.src = 'http://www.pixastic.com/sample/Butterfly.jpg';

You can check the effect in the JS Fiddle: http://jsfiddle.net/T364V/1/ You should change the value of context.globalAlpha in case you want to change the opacity.

Image Manipulation:

• FabricJS: http://fabricjs.com/demos/
• JS Manipulate: http://joelb.me/jsmanipulate/