如何裁剪HTML页面，而不是图像

我需要选择一个HTML页面的一部分和获取选择坐标，而不是图像 - 我想实现这种像图像裁剪（方形选区），我该怎么做？如何裁剪HTML页面，而不是图像

我想要下一个：浏览器在html页面我点击按钮，然后所有页面被禁用，并成为darkgrey颜色，但小窗口显示在真正的页面颜色，我可以操纵这个窗口：使它更大或更小 - 结果我需要这个窗口的坐标。

2010-08-25 hippout

我们需要更多信息。你想在浏览器中裁剪？客户网站？你在寻找什么样的最终结果？ – 2010-08-25 22:05:23

简短的回答：很难在浏览器中使用 – fredley 2010-08-25 22:05:45

，所以我需要JavaScript实现。结果 - 选定区域的坐标 – hippout 2010-08-25 22:06:24

设置一些鼠标事件处理的目标元素（例如，文档，表格等）

你可以在这个覆盖div上使用css类来给它一个虚线或虚线边框，以便它模仿OS选择框。

编辑：只允许您指定选择的坐标。如果您实际上想要在用户的计算机上呈现HTML页面的裁剪图像，则需要使用某种客户端浏览器插件来完成此操作。

2010-08-25 22:17:33 Chris

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

如果你只是想要他们的选择的坐标，你可以覆盖整个页面上的透明元素（画布，或div）。然后使用mousedown和mouseup事件来捕获鼠标的coordinates，并可选择绘制某种透明方块，以便他们知道他们正在选择什么。

2010-08-25 22:06:02

我会从html源代码渲染图像，如果我知道坐标选择比我能够裁剪我需要的东西 – hippout 2010-08-25 22:08:20

@hippout：如果你渲染页面服务器端来制作图像，您无法保证用户计算机上的内容在您的服务器上。不同的浏览器，不同的缩放等都会使它不同。 – rmeador 2010-08-25 22:42:36

是的，rmeador是正确的...客户端看到的可能性与您的服务器端浏览器看到的完全不同。 – 2010-08-26 14:02:48

我不完全确定你想要完成什么，但也许你只是试图只显示你页面的一大部分。

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

2010-08-25 22:12:56 bitmask

尝试使用Firefox的Web开发工具栏插件。它有一个选项，可以让你查看坐标。

2010-08-25 22:16:36 Holystream

如果我明白你那么好，这是我的方式：只是渲染页面的<div>（你可以把它直接用HTML或通过）然后设置一些CSS的<div>喜欢的东西{overflow: hidden; width: 100px; height: 70px}。

要控制偏移量，您需要插入内部<div>并将其中第一个内容包裹起来，并将css值设置为{margin-left: -50px; margin-top: -40px;}之类的内容，即可完成。

2010-08-25 22:17:50

回答