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

Posted 2023-02-25

【中文标题】如何裁剪html页面，而不是图像

【英文标题】：how to crop html page, not image

【发布时间】：2010-08-25 22:02:29

【问题描述】：

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

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

【问题讨论】：

我们需要更多信息。你想在浏览器中裁剪吗？客户端站点？您要寻找的最终结果是什么？

简答：难度很大

在浏览器中，所以我需要 javascript 实现。结果 - 选定区域的坐标

所以你只想要坐标？还是图片呢？

你想要什么并不是那么清楚。你有几个不同的答案都假设你的问题有不同的含义。我的解释是你想在选择图标时左键单击并拖动以创建一个框，就像在 Windows 桌面上一样？所以你需要鼠标位置？你能澄清一下吗？

【参考方案1】：

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

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

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

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

【参考方案2】：

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

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

【讨论】：

我将在 html 源代码之后渲染图像，如果我知道选择的坐标，我就可以裁剪我需要的东西

@hippoout：如果你在服务器端渲染页面来制作图像，你不能保证用户机器上的盒子里面的东西就是你服务器上的盒子里的东西。不同的浏览器、不同的缩放等都会让它变得不一样。

是的，rmeador 是正确的......很可能客户端看到的与服务器端浏览器看到的完全不同。

【参考方案3】：

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

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

More information on the overflow property.

【参考方案4】：

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

【参考方案5】：

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

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