如何在 JavaScript 中将图像叠加到另一个图像之上

Question

我正在尝试使用 JavaScript 实现一项功能，室内设计师可以在该功能中拍摄窗户的照片，然后查看一组窗帘在该窗户上的外观。所以我需要在用户拍摄的图像中以某种方式将窗帘图像覆盖在窗口的同一区域。

这类似于销售眼镜的网站。您可以在哪里上传您的脸部照片，看看您脸上的眼镜是什么样子的。类似的概念，但我需要对窗户和窗帘进行此操作。

我一直在寻找几个小时，但我仍然不明白如何做到这一点。有没有这方面的 JS 库？

我实际上正在构建一个 Blazor 应用程序，但我猜我应该使用普通的旧 JavaScript 来完成类似的事情。

任何提示或指导将不胜感激。 谢谢， 戴夫

Answer 1

这甚至不是 JavaScript 问题，而是 CSS 问题。一般来说，在要叠加在另一个之上的项目上使用position: absolute。确保两者都是同一 div 的子代，而 div 本身具有 position: relative。这应该是全部，但如果您有更具体的场景，请发布一些代码。