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
Share Improve this question asked May 20, 2013 at 6:47 Marc SterMarc Ster 2,3166 gold badges36 silver badges64 bronze badges2 Answers
Reset to default 3Yes, 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/
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745258851a4619116.html
评论列表（0条）