I'm trying to implement a feature using JavaScript where an interior designer can take a picture of a window and then see how a set of curtains would look on that window. So I need to somehow overlay an image of curtains over the same area of the window in the image taken by the user.

This is similar to the websites that sell eyeglasses. Where you can upload a pic of your face and see what the glasses look like on your face. Similar concept but I need to do this with windows and curtains.

I've been searching for hours but I still don't understand how to do this. Is there a JS library for this, maybe?

I'm actually building a Blazor app, but I'm guessing that I should use plain old JavaScript for something like this.

Any hints or guidance would be greatly appreciated. thanks, Dave

CodePudding user response：

It's not even a JavaScript problem but a CSS problem. Generally speaking use position: absolute on the item you want to overlay on top of the other. Make sure both are children of the same div which itself has position: relative. That should be all it takes but if you have a more specific scenario please post some code.