利用jQuery插件imgAreaSelect實現(xiàn)獲得選擇域的圖像信息
還是先來分析一下:
(以下的值,如何獲得,以后在具體的實現(xiàn)中再來分析,現(xiàn)在只談宏觀的)
如何獲得選擇域的圖像信息? 其實就是要我們?nèi)绾潍@得這個選擇區(qū)域,在圖像中的那個位置,并且這個區(qū)域的大小是多少?
把位置和大小告訴了計算機,它就知道我們是要獲取那一塊的圖像信息了。
(我們的選擇區(qū)域,是在一個平面當(dāng)中,而且是一個規(guī)則的圖形,正方形,或都矩形(通俗:長方形))
大小:
這個區(qū)域的寬度,高度值,兩值相乘,就是這個區(qū)域的面積,即大小。(這個應(yīng)該不難)
位置:
1.假設(shè)我們只告訴計算機,這個選擇區(qū)域一個[起始點的坐標值],而且也告訴電腦這個區(qū)域的[面積]那么符合這兩個條件情況有四:
“紅色”為選擇區(qū)域的起始點坐標;
A、B、C、D、為 以紅色為起始點,畫出的選擇區(qū)域(每個區(qū)域的面積是相同的,起始點坐標也相同,卻可以出來四種情況);
1.假設(shè)我們告訴計算機,這個選擇區(qū)域兩個坐標值,也告訴電腦區(qū)域面積:
“紅色”為選擇區(qū)域的起始點坐標,
“藍色”為選擇區(qū)域的橫向結(jié)束點坐標值
"綠色"為選擇區(qū)域的面積;
要同時滿足這三個條件,只可能有一種情況
所以得出,我們要獲得這個圖像區(qū)域信息,就需要得到
以上三個值:兩點坐標值,和一個面積值
$('#x1').val(selection.x1); $('#y1').val(selection.y1); $('#x2').val(selection.x2); $('#y2').val(selection.y2); $('#w').val(selection.width); $('#h').val(selection.height);
以上就是本文的全部內(nèi)容,希望對大家有所幫助,感興趣的朋友可以看下《利用jQuery插件imgAreaSelect實現(xiàn)圖片上傳裁剪(同步顯示圖像位置信息)》和《利用jQuery插件imgAreaSelect實現(xiàn)圖片上傳裁剪(放大縮小)》,謝謝對腳本之家的支持!
相關(guān)文章
如何確保JavaScript的執(zhí)行順序 之jQuery.html深度分析
在上一篇文章《如何確保JavaScript的執(zhí)行順序 - 之實戰(zhàn)篇》中,我們發(fā)現(xiàn)jQuery的html函數(shù)能夠確保動態(tài)加載的JavaScript按照引入順序執(zhí)行。2011-03-03jquery關(guān)于圖形報表的運用實現(xiàn)代碼
jquery 關(guān)于圖形報表的運用實現(xiàn)代碼,需要的朋友可以參考下。2011-01-01javascript/jquery實現(xiàn)點擊觸發(fā)事件的方法分析
這篇文章主要介紹了javascript/jquery實現(xiàn)點擊觸發(fā)事件的方法,結(jié)合具體實例形式分析了JavaScript與jQuery針對點擊按鈕觸發(fā)事件的相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下2019-11-11為jquery.ui.dialog 增加“在當(dāng)前鼠標位置打開”的功能
在使用jquery.ui.dialog的過程中,發(fā)現(xiàn)position參數(shù)有些問題,無法通過position: [PosX, PosY]動態(tài)傳遞位置參數(shù)。下面是官方demo 代碼2009-11-11jQuery實現(xiàn)驗證表單密碼一致性及正則表達式驗證郵箱、手機號的方法
這篇文章主要介紹了jQuery實現(xiàn)驗證表單密碼一致性及正則表達式驗證郵箱、手機號的方法,涉及jQuery表單元素獲取及正則驗證相關(guān)操作技巧,需要的朋友可以參考下2017-12-12