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