jQuery-圖片上傳裁剪插件--imgAreaSelect(分析一) 放大縮小


這個應用的關鍵:

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

 2.根據左邊選擇區域的大小,來讓右邊有一個對局部放大或縮小的效果。

   3.后台上傳功能。

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

["區域":是寬*高,也就是面積;]

["放大或縮小":是一個比例值,通常我們說放大或縮小,都說放大或縮小百分之多少,或者說放大或縮小多少倍數]

 

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

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

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

 

二、左右布局:

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

 

三、放大縮小公式:

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

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

 

四、目的

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

 

五、具體的算法:

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

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

  左圖顯示區域:寬300PX,高300PX

  右圖顯示區域:寬100PX,高100PX

  選中區域的寬設為:selection.width(具體怎么獲得這個值,我也正在分析當中。先設為一個末知數)

  選中區域的高設為:selection.Height(具體怎么獲得這個值,我也正在分析當中。先設為一個末知數)

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

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

 

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

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

  b、 左邊顯示區域寬高   (300PX*300PX)

  c.、右邊顯示區域寬高   (100px*100px)

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

 

 

  5.1獲得比例值:

  分母:根據第三點,那么選中區域的寬:selection.width 和 選中區域的高:selection.Height肯定是分母了,因為根據實例分析,他倆的值越大,右邊的圖應該越小。

  分子:100px。也就是右邊顯示區域的寬度值。

      為什么是它的值?我們的目的是要改變右邊圖片的寬或高的值,為什么會與顯示區域的寬度值相關聯呢?

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

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

      (一個容器A只能裝100*100的東西,現在你要放B200*200的東西,那么容器不變,只能把東西變小了)

      反之選擇區域越小,小於右邊顯示區域的大小,那么右邊圖片要想在這個區域填滿顯示,只能大放圖片。

      (一個容器A只能裝100*100的東西,現在你要放B50*50的東西,那么容器不變,只能把東西變大了,才能填滿整個容器)

      選擇區域小大,等於右邊顯示區域大小,不用放大或縮小,剛剛好;

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

  得出:

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

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

  

  5.2 計算右邊圖片的大小:

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

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

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

 

六、問題:

  selection.width;

  selection.height

 

  這兩個值如何獲得?

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

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

 

 

這是插件網址:http://odyniec.net/projects/imgareaselect/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM