javascript - Drag an image on another image and save it to one image (like light augmented reality) - Stack Overflow

i´m wondering how can i realize this? I want to have an bigger image in the background and be able to drag and drop a smaller image to the position i want on the bigger image and save it finally, so it bees one.

Is this possible with javascript & html5?

appreciate any ideas!

thanks

i´m wondering how can i realize this? I want to have an bigger image in the background and be able to drag and drop a smaller image to the position i want on the bigger image and save it finally, so it bees one.

Is this possible with javascript & html5?

appreciate any ideas!

thanks

• javascript
• html
• image
• drag-and-drop

Share Improve this question Follow asked May 20, 2013 at 6:47 Marc SterMarc Ster 2,31666 gold badges3636 silver badges6464 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Yes, when you have your images in position:

• Create a canvas element the size of the background image
• Draw your background image into it
• Iterate through your images and record positions
• Draw each image by using the Canvas' context.drawImage(image, posX, posY) that you recorded
• Extract the final image from Canvas using canvas.toDataUrl()

The data url can be set as src on the background image or you can upload it directly to a server etc. Setting it to an image allow you to right-click it and use Save as.

If you initially use the canvas as the "background" image (covering the window) - you just initialize it with the image you want in the background, then continue from point three above.

For the drag an drop part you can just position one image on top of the other and give it some alpha-value to make it half-transparent:

#dragme {
    opacity:0.4;
}

the drag-and-drop you can do with jquery-ui:

$("#dragme").draggable();

try it out at:

http://jsfiddle/bjelline/k3vaX/

If you want to actually merge the two images to create a new one use an image processing library, like pixatastic http://www.pixastic./lib/docs/actions/blend/