利用jQuery插件imgAreaSelect實(shí)現(xiàn)獲得選擇域的圖像信息
還是先來分析一下：
（以下的值，如何獲得，以后在具體的實(shí)現(xiàn)中再來分析，現(xiàn)在只談宏觀的）
如何獲得選擇域的圖像信息? 其實(shí)就是要我們?nèi)绾潍@得這個(gè)選擇區(qū)域，在圖像中的那個(gè)位置，并且這個(gè)區(qū)域的大小是多少？
把位置和大小告訴了計(jì)算機(jī)，它就知道我們是要獲取那一塊的圖像信息了。
（我們的選擇區(qū)域，是在一個(gè)平面當(dāng)中，而且是一個(gè)規(guī)則的圖形，正方形，或都矩形（通俗：長方形））
大?。?/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)，畫出的選擇區(qū)域（每個(gè)區(qū)域的面積是相同的，起始點(diǎn)坐標(biāo)也相同，卻可以出來四種情況）；
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);
以上就是本文的全部內(nèi)容，希望對大家有所幫助，感興趣的朋友可以看下《利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪（同步顯示圖像位置信息）》和《利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪（放大縮小）》，謝謝對腳本之家的支持！
相關(guān)文章
jquery ajax提交整個(gè)表單元素的快捷辦法，需要的朋友可以參考一下2013-03-03
Jquery 基礎(chǔ)學(xué)習(xí)筆記之文檔處理
本節(jié)讓我們繼續(xù)Jquery知識(shí)的了解：文檔處理。文檔處理主要是對HTML元素進(jìn)行一些增操作，刪除操作，復(fù)制操作，替換操作。2009-05-05
jquery獲取復(fù)選框checkbox的值實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query獲取復(fù)選框checkbox的值實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
jQuery 中使用JSON的實(shí)現(xiàn)代碼
json 是 Ajax 中使用頻率最高的數(shù)據(jù)格式，在瀏覽器和服務(wù)器中之間的通訊可離不開它2011-12-12
extend是常用的參數(shù)處理函數(shù)，特別是對默認(rèn)值的使用，但是在使用過程中，默認(rèn)值往往是不能被改變的,需要的朋友可以參考下2014-08-08
完美解決jQuery fancybox ie 無法顯示關(guān)閉按鈕的問題
下面小編就為大家?guī)硪黄昝澜鉀QjQuery fancybox ie 無法顯示關(guān)閉按鈕的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
無需 Flash 使用 jQuery 復(fù)制文字到剪貼板
需要做的只是引入其腳本，在HTML標(biāo)簽上賦一個(gè)“data-clipboard-target”屬性然后寫一小段JavaScript片段。為了演示假定有一個(gè)貨幣轉(zhuǎn)換應(yīng)用，在一個(gè)文本框中輸入數(shù)值時(shí)同時(shí)將兌換結(jié)果顯示在另一個(gè)文本框中，當(dāng)點(diǎn)擊文本框時(shí)，會(huì)觸發(fā)事件將其復(fù)制到剪貼板然后顯示一條消息。2016-04-04
或許在網(wǎng)絡(luò)上你已經(jīng)見過數(shù)百種通過jQuery實(shí)現(xiàn)的相冊，但是我們發(fā)現(xiàn)的這些相冊，他們有額外的東西，優(yōu)雅和獨(dú)特的創(chuàng)意！每個(gè)相冊都是可在線預(yù)覽和免費(fèi)下載的。你可以為你的Web項(xiàng)目添加色彩。2011-02-02
事件會(huì)向這個(gè)對象的父級(jí)對象傳播，從里到外，直至它被處理（父級(jí)對象所有同類事件都將被激活），或者它到達(dá)了對象層次的最頂層2014-07-07
jquery使用append(content)方法注意事項(xiàng)分享
append(content)函數(shù)的功能向每個(gè)匹配的元素內(nèi)部追加內(nèi)容，在使用方法上需要引起大家的注意，詳細(xì)看下面示例2014-01-01