1. 程式人生 > >Jquery 裁剪圖片外掛imgAreaSelect應用注意點整理

Jquery 裁剪圖片外掛imgAreaSelect應用注意點整理

背景:接之前的內容,在專案中已經開始用外掛imgAreaSelect了,使用過程中遇到了一些問題。

1.點選圖片裁剪按鈕,進行初始框設定時:

a.裁剪區域完全被藍色覆蓋,看不到內容   =>  造成原因是在給圖片繫結裁剪內容時,設定了selectionColor: 'blue',改成空格或者去掉這個屬性就可以了。

2.頁面展示完成後,滑動滑鼠滑輪,然後再點選圖片裁剪按鈕,此時初始裁剪區域會掉到圖片下面   =>   造成原因是設定初始裁剪框時沒有設定parent屬性,取的是預設值body,將該屬性設定成存放圖片的父元素就可以了parent: '.search_img_show' (.search_img_show 這個值是按照jquery選擇器填寫的),這樣設定之後就正常了。

3.在點選搜尋按鈕時,在處理事件函式裡需要判斷當前有沒有裁剪內容(imgAreaSelect 的處理狀態onSelectEnd對應的函式有實時的將資訊寫入隱藏域),此時驗證的欄位可以取selection.width對應的隱藏域。這樣可以避免設定了初始裁剪區域,但是取消了裁剪操作後,點選搜尋按鈕依舊會提交表單的錯誤。