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

Question

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

接下来，我想更详细地介绍：在html页面上的浏览器中，我单击按钮，然后所有页面都被禁用并变成深灰色，但是小窗口以真实页面颜色显示，我可以操纵此窗口：将其放大或缩小-结果，我需要此窗口的坐标。

Answer 1

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

如果只需要他们选择的坐标，则可以在整个页面上覆盖一个透明元素（画布或div）。 然后使用mousedown和mouseup事件捕获鼠标的坐标 ，并有选择地绘制某种透明的正方形，以便他们知道要选择的内容。

Answer 2

我不太确定要完成什么，但是也许您只想显示页面较大部分的一部分。

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

有关overflow属性的更多信息。

Answer 3

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

Answer 4

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

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

您可以在此叠加层div上使用css类来为其赋予虚线或虚线边框，以使其模仿OS选择框。

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

Answer 5

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

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