html5 Canvas创建虚拟房间[关闭]

I'm seeking for something that can mix two images above each other to create a dynamic environment, see example below: http://www.armstrong.com/flooring/design-a-room.asp?darScene=10&shortCode=&productCategory=

I was able to decode the method. they mix those images for example: http://www.armstrong.com/ei2/data/assets/Robbins/0557AW148630.jpg http://www.armstrong.com/ei2/data/images/room-scenes/RSX3050L_2A.jpg

output: http://www.armstrong.com/ei2/cgi-bin/Swatchbox.cgi?a=RenderImage%5Boutput=jpegstream%5D&v=1&i=data/images/room-scenes/RSEWE5205_2&o=data/out/&w=530&h=4444&Floor=~stitch~data/assets/Robbins/0557AW148630~%5BSpecialStitch=randomOffset%5D%5BPPF=75%5D

this will be a part of an overall website experience which customers can customize. It feels like this requires backend scripting, though I would like to keep it to php/javascript/jquery if possible.

I found many solutions only, that requires the script to be executed on their side which requires a monthly fee. This is not an option to use anything remotely. Though paying for a product is an option if its capability is not limited on another server.

Well, if you want to do something like that, you can go for some html5 canvas.

I've done something very similar, and I used JCanvas. http://calebevans.me/projects/jcanvas/index.php the best part is the multiple layers, and the ability to change and control z-index in them. That way you can layer different transparent pngs and even move them around.