Can I merge z-index layers into a single image?

Can I merge z-index layers into a single image?

I am working on a painting visualizer for homes. Using Javascript, I have 40 divs, all with a unique z-index. At a given time, 1-4 layers are display:block (and the rest are display:none) in a single space, layering colored shapes over a background image (of a house).

Is there a way to essentially screen shot this space so the user can 'save' their selections?

If that is not possible开发者_运维问答, perhaps I can save their selections to be pre-loaded for a color-combination 'load' or 'open'?

Thanks!

If you use <canvas> then you can use .getAsDataUrl( ), submit the contents of your layers to your backend and use a library like ImageMagik to merge them and serve a new image.

Otherwise, I'm not sure how you're achieving your drawing effects, but you could "record" all the drawing events as they occur, then when you want to merge layers, you could "replay" the events on the target div, then delete the original div.

You could also add code to essentially "link" the two (or more) divs together and cause them to behave as one. When you hide any of the linked divs, they all hide, if you rearrange their z-index, you move them all as a group. To the user, it would appear that they were just a single layer.