利用jQuery插件imgAreaSelect實(shí)現(xiàn)獲得選擇域的圖像信息
還是先來(lái)分析一下：
（以下的值，如何獲得，以后在具體的實(shí)現(xiàn)中再來(lái)分析，現(xiàn)在只談宏觀的）
如何獲得選擇域的圖像信息? 其實(shí)就是要我們?nèi)绾潍@得這個(gè)選擇區(qū)域，在圖像中的那個(gè)位置，并且這個(gè)區(qū)域的大小是多少？
把位置和大小告訴了計(jì)算機(jī)，它就知道我們是要獲取那一塊的圖像信息了。
（我們的選擇區(qū)域，是在一個(gè)平面當(dāng)中，而且是一個(gè)規(guī)則的圖形，正方形，或都矩形（通俗：長(zhǎng)方形））
大?。?/strong>
這個(gè)區(qū)域的寬度，高度值，兩值相乘，就是這個(gè)區(qū)域的面積，即大小。（這個(gè)應(yīng)該不難）
位置：
1.假設(shè)我們只告訴計(jì)算機(jī),這個(gè)選擇區(qū)域一個(gè)[起始點(diǎn)的坐標(biāo)值],而且也告訴電腦這個(gè)區(qū)域的[面積]那么符合這兩個(gè)條件情況有四：
“紅色”為選擇區(qū)域的起始點(diǎn)坐標(biāo)；
A、B、C、D、為 以紅色為起始點(diǎn)，畫(huà)出的選擇區(qū)域（每個(gè)區(qū)域的面積是相同的，起始點(diǎn)坐標(biāo)也相同，卻可以出來(lái)四種情況）；
1.假設(shè)我們告訴計(jì)算機(jī),這個(gè)選擇區(qū)域兩個(gè)坐標(biāo)值,也告訴電腦區(qū)域面積：
“紅色”為選擇區(qū)域的起始點(diǎn)坐標(biāo)，
“藍(lán)色”為選擇區(qū)域的橫向結(jié)束點(diǎn)坐標(biāo)值
"綠色"為選擇區(qū)域的面積；
要同時(shí)滿足這三個(gè)條件，只可能有一種情況
所以得出，我們要獲得這個(gè)圖像區(qū)域信息，就需要得到
以上三個(gè)值:兩點(diǎn)坐標(biāo)值，和一個(gè)面積值
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，感興趣的朋友可以看下《利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪（同步顯示圖像位置信息）》和《利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪（放大縮?。?/a>，謝謝對(duì)腳本之家的支持！
相關(guān)文章
如何確保JavaScript的執(zhí)行順序 之jQuery.html深度分析
在上一篇文章《如何確保JavaScript的執(zhí)行順序 - 之實(shí)戰(zhàn)篇》中，我們發(fā)現(xiàn)jQuery的html函數(shù)能夠確保動(dòng)態(tài)加載的JavaScript按照引入順序執(zhí)行。2011-03-03
動(dòng)態(tài)加載jQuery的兩種方法實(shí)例分析
這篇文章主要介紹了動(dòng)態(tài)加載jQuery的兩種方法,實(shí)例分析了jquery動(dòng)態(tài)加載的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
jquery關(guān)于圖形報(bào)表的運(yùn)用實(shí)現(xiàn)代碼
jquery 關(guān)于圖形報(bào)表的運(yùn)用實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery內(nèi)存泄露解決辦法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
javascript/jquery實(shí)現(xiàn)點(diǎn)擊觸發(fā)事件的方法分析
這篇文章主要介紹了javascript/jquery實(shí)現(xiàn)點(diǎn)擊觸發(fā)事件的方法,結(jié)合具體實(shí)例形式分析了JavaScript與jQuery針對(duì)點(diǎn)擊按鈕觸發(fā)事件的相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2019-11-11
為jquery.ui.dialog 增加“在當(dāng)前鼠標(biāo)位置打開(kāi)”的功能
在使用jquery.ui.dialog的過(guò)程中，發(fā)現(xiàn)position參數(shù)有些問(wèn)題，無(wú)法通過(guò)position: [PosX, PosY]動(dòng)態(tài)傳遞位置參數(shù)。下面是官方demo 代碼2009-11-11
jQuery實(shí)現(xiàn)驗(yàn)證表單密碼一致性及正則表達(dá)式驗(yàn)證郵箱、手機(jī)號(hào)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)驗(yàn)證表單密碼一致性及正則表達(dá)式驗(yàn)證郵箱、手機(jī)號(hào)的方法,涉及jQuery表單元素獲取及正則驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
jQuery產(chǎn)品間斷向下滾動(dòng)效果核心代碼
這篇文章主要為大家分享了jQuery產(chǎn)品間斷向下滾動(dòng)的核心代碼,需要的朋友可以參考下2014-05-05
有時(shí)候，我們可能不會(huì)在網(wǎng)頁(yè)中<script src="jquery.min.js">來(lái)加載Jquery庫(kù),可能在用戶點(diǎn)擊某個(gè)按鈕后,才去加載Jquery庫(kù),下面介紹一下動(dòng)態(tài)加載jquery庫(kù)的方法2014-02-02
JQuery操作(下拉,單選,復(fù)選)Radio、DropDownList、CheckBox三大控件，示例代碼如下，感興趣的朋友可以學(xué)習(xí)下，希望對(duì)大家有所幫助2013-08-08