问题
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 becomes one.
Is this possible with javascript & html5?
appreciate any ideas!
thanks
回答1:
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.
回答2:
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.net/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.com/lib/docs/actions/blend/
来源：https://stackoverflow.com/questions/16644035/drag-an-image-on-another-image-and-save-it-to-one-image-like-light-augmented-re