我可以將z-index圖層合併到單個圖像中嗎？

Question

我可以將z-index圖層合併到單個圖像中嗎？

我正在爲家庭繪畫可視化工作。使用JavaScript，我有40個div，所有的都有獨特的z-index。在給定的時間，在單個空間中顯示1-4層：塊（其餘顯示：無），在房屋背景圖像上分層顯示彩色形狀。

有沒有一種方法來實質上屏蔽這個空間的拍攝，以便用戶可以「保存」他們的選擇？

如果這是不可能的，也許我可以保存它們的選擇以便預加載顏色組合「加載」或「打開」？

謝謝！

Answer 1

如果您使用<canvas>，則可以使用.getAsDataUrl()，將圖層的內容提交到後端，並使用ImageMagik等庫來合併它們並提供新圖像。否則，我不確定你是如何實現繪圖效果的，但是你可以「記錄」所有繪圖事件的發生，然後當你想合併圖層時，你可以「重放」事件目標div，然後刪除原始div。

您也可以添加代碼，將兩個（或更多）div實質上「鏈接」在一起，並使其表現爲一個行爲。當你隱藏任何一個鏈接的div時，它們都隱藏起來，如果你重新排列了它們的z索引，你將它們全部作爲一個組來移動。對用戶來說，看起來它們只是一個圖層。