如何裁剪 html 页面而不是图像
我需要选择html页面的一部分并获取选择的坐标，而不是图像 - 我想实现像图像裁剪（方形选择区域）这样的功能，我该怎么做？
我想要更详细的下一步： 在 html 页面上的浏览器中，我单击按钮，然后所有页面都被禁用并变为深灰色，但小窗口以真实页面颜色显示，我可以操纵此窗口：使其更大或更小 - 结果我需要坐标这个窗口的。
I need to select a part of html page and get coordinates of selection, not image - i want to realize this like image cropping (square selection area), how can i do it?
in more detail i want next:
in browser on html page i'm click button, then all page are disabled and become darkgrey color, but small window is showing in real page color, i can manipulate this window: make it larger or smaller - in result i'm need coordinates of this window.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
在目标元素（例如文档、表格等）上设置一些鼠标事件处理程序。
您可以在此覆盖 div 上使用 css 类为其提供虚线或点线边框，以便它模仿操作系统选择框。
编辑：这仅允许您指定选择的坐标。如果您实际上希望在用户计算机上呈现时抓取 html 页面的裁剪图像，则需要某种客户端浏览器插件来执行此操作。
Set up some mouse event handlers on the target element (e.g. the document, a table, etc...)
You can use a css class on this overlay div to give it a dashed or dotted border such that it mimics OS selection boxes.
Edit: That just allows you to specify the coordinates of the selection. If you're actually looking to scrape a cropped image of the html page as it is rendered on the user's computer, you'll need some kind of client browser plugin to do that.
除非它是画布元素，否则这是不可能的。您需要一个客户端插件来为您渲染图像。
如果您只想要他们选择的坐标，您可以在整个页面上覆盖一个透明元素（画布或 div）。然后使用
mousedown和mouseup事件捕获 鼠标的坐标，并可以选择绘制某种透明的正方形，以便他们知道自己正在选择什么。This is not possible unless it's a canvas element. You would need a client side addon to render the image for you.
If you just want the coordinates of their selection, you could overlay a transparent element (a canvas, or div) over the whole page. Then use the
mousedownandmouseupevents to capture the coordinates of the mouse, and optionally draw some sort of transparent square so they know what they're selecting.我不太确定您想要完成什么，但也许您正在尝试仅显示页面较大部分的一部分。
在这种情况下，我认为您正在寻找 css
overflow属性，该属性可以设置为“隐藏”，以便仅显示图片的一部分。有关
overflow属性的更多信息。I'm not perfectly sure what you want to accomplish, but perhaps you are trying to display only a portion of a larger part of your page.
In that case, I think you are looking for the css
overflowproperty, which can be set to 'hidden', in order to only display a part of for instance a picture.More information on the
overflowproperty.尝试 Firefox 的 Web 开发工具栏插件。它有一个允许您查看坐标的选项。
Try Firefox's Web Developer Toolbar plugin. It has an option that allows you to view coordinates.
如果我很理解你，那么这就是我的方式：
只需在
中渲染页面（您可以直接将其放入 html 或通过），然后将一些 css 设置为改为{overflow: hide;宽度：100px；高度：70px}。要控制偏移量，您需要插入内部
并将第一个内容包裹在其中，并将 css 值设置为类似{margin-left: -50px; margin-top: -40px;}就完成了。If I understood you well then this is my way:
Just render the page in a
<div>(You can put it either directly in html or through<iframe>) then set the some css to the<div>to something like{overflow: hidden; width: 100px; height: 70px}.To control the offset you need to insert inner
<div>and wrap the content of the first one in it, and set the css values to something like{margin-left: -50px; margin-top: -40px;}and you're done.