根據html中需要的座標圖像顯示

Question

我有一個圖像裁剪的小部件，並給出我用戶裁剪的x1 y1和x2 y2座標。現在我的要求是將該裁剪座標放在其他一些html頁面中。

這是我的代碼

我的寬度和窗口中顯示的高度爲200像素200像素。 我想在這個200 * 200像素的窗口中適合裁剪的座標。

我有4個座標，當用戶裁剪圖像時會得到這些座標。

如何實現此目的

謝謝。

---

我很抱歉，因爲我寫的「這裏是我的代碼」，我寫了力什麼。

我會告訴確切的情況....我告訴用戶上傳圖像，然後用戶將進入裁剪頁面，用戶將選擇需要的區域，然後圖像文件將存儲在服務器和裁剪圖像座標將被存儲在數據庫中。

現在我知道其實什麼用戶選擇的座標，我的意思是我有X1，Y1，X2，Y2。並且我具有用戶上傳的完整圖像。

現在我需要的是爲用戶顯示僅用戶200像素* 200像素的框架也隨之而來圖像。

換句話說，如果我說，我有座標和要顯示的圖像開始和與結束在200 * 200像素的寬度和高度幀座標。

謝謝

Answer 1

我前一陣子做過。我想出了以下內容：

你有200x200的分度的位置是：相對和溢出：隱藏，讓它包含與位置img標籤：絕對的，用戶圖片，寬度和高度的src屬性縮放：

width = user_image_width * 200/(x2 - x1) 
height = user_image_height * 200/(y2 - y1) 

，那麼你需要設置左側和頂部適當：

left = -x1 * 200/(x2 - x1) 
top = -y1 * 200/(y2 - y1) 

如果設置img元素對應的CSS屬性（我沒有犯錯），它應該只顯示所選擇的部分填充整個200x200格。