這個應(yīng)用的關(guān)鍵：

　1.讓左邊選擇區(qū)域和右邊顯示的圖像信息保持一至。

　2.根據(jù)左邊選擇區(qū)域的大小，來讓右邊有一個對局部放大或縮小的效果。

    3.后臺上傳功能。

　　那么這一次，只談[放大]或[縮小]。[位置]和[上傳]問題，下次，我再寫下(因為那個插件代碼太多，我也沒看完，正在學習研究當中)。

［"區(qū)域"：是寬*高，也就是面積；]

［"放大或縮小"：是一個比例值，通常我們說放大或縮小，都說放大或縮小百分之多少，或者說放大或縮小多少倍數(shù)］

一、怎么能放大或者縮小圖片的局部？

　　局部放大：實質(zhì)是將圖片整個放大，即把圖片的寬度和高度改變大，然后將放大后的圖片，在一個固定大小(當然是比原圖小的框)的框中，顯示出來。

　　局部放大：實質(zhì)是將圖片整個縮小，即把圖片的寬度和高度改變小，然后將縮小后的圖片，在一個固定大小(當然是比原圖小的框)的框中，顯示出來。

二、左右布局:

　　左右各有一張相同的圖片，左邊選中區(qū)域的改變，會讓右邊的圖片，改變大小，根據(jù)第一點講的，所以就有了局部放大縮小效果;

三、放大縮小公式：

　　左邊是原圖，右邊是縮小或放大后的圖。規(guī)律是左邊的選中區(qū)域越大，那么右邊也將縮小這個圖,反之左邊選中區(qū)域越小，那么右邊的圖就會放大.

　　這個規(guī)律告訴我們，算法中應(yīng)該有除法。因為除法中，分子不變，分母變大，那么結(jié)果越小，反之越大。所以除法中的在分子，不變的情況下，分母與結(jié)果正好是一對，反比關(guān)系，一個大，一個就小，反之，一個小，另一個就大。也正好和我們這個應(yīng)用中的圖片放大縮小，關(guān)系一至。

四、目的

　　1.我們要的結(jié)果，是右邊的圖片大小和顯示位置(顯示位置，下次再說，正在研究中)；

五、具體的算法：

　　左圖和右圖寬：一樣300PX;

　　左圖和右圖高：一樣300PX;

　　左圖顯示區(qū)域:寬300PX,高300PX

　　右圖顯示區(qū)域：寬100PX，高100PX

　　選中區(qū)域的寬設(shè)為：selection.width（具體怎么獲得這個值，我也正在分析當中。先設(shè)為一個末知數(shù)）

　　選中區(qū)域的高設(shè)為：selection.Height（具體怎么獲得這個值，我也正在分析當中。先設(shè)為一個末知數(shù)）

　　寬的比例值設(shè)為:scaleX（具體怎么獲得這個值，我也正在分析當中。先設(shè)為一個末知數(shù)）

　　高的比例值設(shè)為:scaleX（具體怎么獲得這個值，我也正在分析當中。先設(shè)為一個末知數(shù)）

　　這里一共有四個東西要理清，才能確定下面的公式。

　　a、 左圖、右圖的大小　　 (寬度都是相同)

　　b、 左邊顯示區(qū)域?qū)捀?　　(300PX*300PX)

　　c.、右邊顯示區(qū)域?qū)捀摺　?(100px*100px)

　　d.、選擇區(qū)域的寬高值：　 (這個是通過JQ獲得selection.width,selection.Height)

　　5.1獲得比例值：

　　分母：根據(jù)第三點，那么選中區(qū)域的寬：selection.width 和 選中區(qū)域的高：selection.Height肯定是分母了，因為根據(jù)實例分析，他倆的值越大，右邊的圖應(yīng)該越小。

　　分子：100px。也就是右邊顯示區(qū)域的寬度值。

　　　 為什么是它的值？我們的目的是要改變右邊圖片的寬或高的值，為什么會與顯示區(qū)域的寬度值相關(guān)聯(lián)呢？

　　　這三者系一定要弄清。[“選擇區(qū)域大小”、“右邊顯示區(qū)域大小”、“右邊圖片大小”]；

　　　選擇區(qū)域越大，超過了右邊顯示區(qū)域的大小，那么右邊圖片要想在這個區(qū)域中顯示，只能縮小圖片。

　　?。ㄒ粋€容器A只能裝100*100的東西，現(xiàn)在你要放B200*200的東西，那么容器不變，只能把東西變小了）

　　　反之選擇區(qū)域越小，小于右邊顯示區(qū)域的大小，那么右邊圖片要想在這個區(qū)域填滿顯示，只能大放圖片。

　　?。ㄒ粋€容器A只能裝100*100的東西，現(xiàn)在你要放B50*50的東西，那么容器不變，只能把東西變大了,才能填滿整個容器）

　　　選擇區(qū)域小大，等于右邊顯示區(qū)域大小，不用放大或縮小，剛剛好；

　　 （一個容器A只能裝100*100的東西，現(xiàn)在你要放B100*100的東西，那么容器不變，東西也不變,剛好填滿整個容器）

　　得出：

　　寬的比例值設(shè)為:scaleX = 100 / selection.width;

　　高的比例值設(shè)為:scaleX = 100 / selection.height;　

　　5.2 計算右邊圖片的大?。?/p>

　　用得到的這個比例值，去乘以右邊圖片的寬高，這里的300正是右邊圖片的寬和高，左邊和右邊是同一個圖片。寬度是一樣的。

　　右邊圖片的width: Math.round(scaleX * 300),

　　右邊圖片的height: Math.round(scaleY * 300),

六、問題：

　　selection.width;

　　selection.height

　　這兩個值如何獲得？

　　我是想先把宏觀的大的東西弄清楚，以后再專門寫幾篇有關(guān)如何獲得這個里面關(guān)鍵的值的分析。

　　必竟這個插件很大，代碼很多復雜，所以只能一步一步的深入了。

這是插件網(wǎng)址：http://odyniec.net/projects/imgareaselect/

以上就是本文的全部內(nèi)容，希望對大家有所幫助，有興趣的可以看下《利用jQuery插件imgAreaSelect實現(xiàn)圖片上傳裁剪（同步顯示圖像位置信息）》，謝謝對腳本之家的支持！

最新評論