如何基于ASP.NET中的XY坐标位置在较大的图像上放置较小的图像
我们需要一个类似于lenskart.com的网站,用户可以使用他们的网络摄像头上传图片或拍照。有一个没有。太阳镜,他们可以选择并点击它应该使玻璃出现在他们的脸上。所以,我的问题是如何将一个图像放在另一个图像上,在这种情况下,是太阳镜在用户图片上的图像。我已经尝试将较小的图像拖到较大的图像上,并在较大的图像上提取较小图像的x和y坐标位置。现在,我希望能够根据这些x和y坐标位置将太阳镜图像放在用户图片上。任何人都可以指导我如何实现这个目标吗?
We have a requirement for a website similar to lenskart.com in which the user can upload their image or take a picture using their webcam. There are a no. of sunglasses that they can choose from and clicking on it should make the glass appear on their face. So, my question is how can I place one image over another image, in this case, the image of the sunglass over the user's picture. I have already tried dragging a smaller image onto a larger image and extracting the x and y co-ordinate positions of the smaller image over the larger one. Now, I want to be able to place the sunglass image over the user picture based on these x and y co-ordinate positions. Can anyone guide me as to how to achieve this?
将透明PNG文件作为太阳眼镜,
并将其用作背景图像对于DIV(或面板)。
然后使用Javascript或JQuery移动图片,,,
检查这个.. b $ b
http://stackoverflow.com/questions/6508139/how-to-move-an-image-to-the-mouse-position-in-html-javascript [ ^ ]
Make Transparent PNG files as sun glasses,
and use it as background image for a DIV (or Panel).
Then use Javascript, or JQuery to move the picture,,,
Check this..
http://stackoverflow.com/questions/6508139/how-to-move-an-image-to-the-mouse-position-in-html-javascript[^]
Hello Deepa,
您可以使用CSS规则来实现此目的。基本上你需要一个包含img元素的div。 img元素将显示护目镜,div将具有面部的背景图像。请参阅JSFiddle上的演示 [ ^ ] 。
问候,
Hello Deepa,
You can use CSS rules to achieve this. Basically you need a div containing an img element. The img element will display the goggle and the div will have the background image of the face. See the demo[^] on JSFiddle.
Regards,