如何基于ASP.NET中的XY坐标位置在较大的图像上放置较小的图像 [英] How to place a smaller image over a larger image based on XY co-ordinate positions in ASP.NET

问题描述

我们需要一个类似于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移动图片,,,



检查这个.. < br $> 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,

这篇关于如何基于ASP.NET中的XY坐标位置在较大的图像上放置较小的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！