根据html中所需的坐标显示图像

Posted 2023-02-25

【中文标题】根据html中所需的坐标显示图像

【英文标题】：image display according to coordinate needed in html

【发布时间】：2012-03-24 05:50:50

【问题描述】：

我有一个图像裁剪小部件，它为我提供了用户裁剪的 x1 y1 和 x2 y2 坐标。现在我的要求是将裁剪后的坐标放在其他一些 html 页面中。

这是我的代码

我要显示的窗口的宽度和高度是 200px 200px。 我想在这个 200 * 200 px 的窗口中调整裁剪后的坐标。

我有 4 个坐标，当用户裁剪图像时我会得到。

如何做到这一点

谢谢。

---

我很抱歉，因为我写了“这是我的代码”并且我没有写任何东西。

我将告诉确切的场景....我告诉用户上传图像，然后用户将转到裁剪页面，用户将在其中选择所需的区域，然后图像文件将存储在服务器中并裁剪图像坐标将被存储在数据库中。

现在我知道用户实际选择的坐标，我的意思是我有 x1、y1、x2、y2。我有用户上传的完整图片。

现在我需要向用户显示用户在 200 像素 * 200 像素的帧中裁剪的唯一图像。

换句话说，如果我说，我有坐标并且想要在 200 * 200 px 宽度和高度框架中显示以该坐标开始和结束的图像。

谢谢

【问题讨论】：

您想将坐标从一个 html 页面传递到下一个页面吗？如果是这样，那么您必须在表单或一些cookie或其他方法中传递参数，在第二页时您将提取坐标。

我认为他想在下一页上将图像的裁剪部分显示到 200px X 200px 框中。

你是对的，我想以 200px X 200px 显示裁剪的坐标图像，我在数据库中有坐标。我不知道这样做的语法。在我原来的问题上面我添加了评论....感谢您的回复

不确定 html5。但是是否可以在没有服务器端代码的情况下在数据库中裁剪图像/存储裁剪尺寸？您使用 php 的服务器端代码是什么？爪哇？如果你根本不发布你的代码，我猜没有人会帮助你。

【参考方案1】：

我不久前做过。我想出了以下几点：

你有一个 200x200 的 div 位置：相对和溢出：隐藏，让它包含一个 img 标签，位置：绝对，用户图片的 src 属性和宽度和高度缩放：

width = user_image_width * 200 / (x2 - x1)
height = user_image_height * 200 / (y2 - y1)

那么你需要适当地设置left和top：

left = -x1 * 200 / (x2 - x1)
top = -y1 * 200 / (y2 - y1)

如果您设置了 img 元素的相应 css 属性（我没有弄错），它应该只显示填充整个 200x200 div 的选定部分。