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

Question

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

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

Answer 1

除非是canvas元素，否则这是不可能的。您需要一个客户端插件来为您渲染图像。

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

Answer 2

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

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

More information on the overflow property.

Answer 3

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

Answer 4

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

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

您可以在此overlay div上使用css类为其添加虚线或虚线边框，以便模仿OS选择框。

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

Answer 5

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

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