我可以将z-index图层合并为一个图像吗？

Question

我可以将z-index图层合并到一个图像中吗？

我正在为家庭制作绘画可视化工具。使用Javascript，我有40个div，都有一个独特的z-index。在给定的时间，在一个空间中显示1-4层：块（其余的显示：无），在背景图像（房屋）上分层彩色形状。

有没有办法基本上屏幕拍摄这个空间，以便用户可以“保存”他们的选择？

如果那是不可能的，也许我可以保存他们的选择以预先加载颜色组合“加载”或“打开”？

谢谢！

Answer 1

如果您使用<canvas>，则可以使用.getAsDataUrl( )，将图层内容提交到后端，并使用像ImageMagik这样的库来合并它们并提供新图像。

否则，我不确定你是如何实现绘图效果的，但是你可以“记录”所有绘图事件，然后当你想要合并图层时，你可以“重放”上的事件。目标div，然后删除原始div。

您还可以添加代码以将两个（或更多）div基本上“链接”在一起并使它们表现为一个。隐藏任何链接的div时，它们都隐藏，如果重新排列z-index，则将它们全部作为一组移动。对于用户来说，它们似乎只是一个单层。