如何裁剪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;} ，您就完成了。