0

我需要选择 html 页面的一部分并获取选择的坐标，而不是图像 - 我想像图像裁剪（方形选择区域）一样实现这一点，我该怎么做？

更详细我想下一步：在html页面上的浏览器中，我单击按钮，然后所有页面都被禁用并变为深灰色，但小窗口以真实页面颜色显示，我可以操纵此窗口：使其更大或更小 -结果我需要这个窗口的坐标。

4

5 回答 5

2

在目标元素（例如文档、表格等）上设置一些鼠标事件处理程序

  • 在 mousedown 上，在单击点创建一个大小为 0,0 的 div。
  • 在 mousemove 上，使用 mousedown 事件中的原始 x,y 作为原点，调整 div 的大小以扩展到新坐标
  • 在 mouseup 上，对刚刚创建的 div 坐标（“选择”）做任何你想做的事情。

您可以在此叠加 div 上使用 css 类为其提供虚线或虚线边框，使其模仿操作系统选择框。

编辑：这只允许您指定选择的坐标。如果您实际上希望在用户计算机上呈现 html 页面时抓取裁剪后的图像，则需要某种客户端浏览器插件来执行此操作。

于 2010-08-25T22:17:33.657 回答
1

除非它是画布元素，否则这是不可能的。您需要一个客户端插件来为您呈现图像。

如果您只想要他们选择的坐标，您可以在整个页面上覆盖一个透明元素（画布或 div）。然后使用mousedownandmouseup事件来捕捉鼠标的坐标，并且可以选择绘制某种透明的正方形，这样他们就知道他们在选择什么。

于 2010-08-25T22:06:02.887 回答
1

我不完全确定您想要完成什么，但也许您正试图仅显示页面较大部分的一部分。

在这种情况下，我认为您正在寻找overflow可以设置为“隐藏”的 css 属性，以便仅显示例如图片的一部分。

有关该overflow物业的更多信息。

于 2010-08-25T22:12:56.987 回答
1

试试 Firefox 的 Web Developer Toolbar 插件。它有一个选项允许您查看坐标。

于 2010-08-25T22:16:36.107 回答
1

如果我理解你，那么这就是我的方式：只需在 a 中呈现页面<div>（你可以直接将它放在 html 中或通过<iframe>）然后将一些 css 设置为<div>类似于{overflow: hidden; width: 100px; height: 70px}.

要控制偏移量，您需要插入 inner<div>并将第一个的内容包装在其中，并将 css 值设置为类似的值，{margin-left: -50px; margin-top: -40px;}然后就完成了。

于 2010-08-25T22:17:50.917 回答