利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪（放大縮?。?/h1>
更新時(shí)間：2016年12月02日 11:02:50 作者：船長(zhǎng)op
本篇文章主要對(duì)jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪（放大縮?。┑氖褂米隽撕?jiǎn)要分析說明。需要的朋友來看下吧
這個(gè)應(yīng)用的關(guān)鍵：
1.讓左邊選擇區(qū)域和右邊顯示的圖像信息保持一至。
2.根據(jù)左邊選擇區(qū)域的大小，來讓右邊有一個(gè)對(duì)局部放大或縮小的效果。
3.后臺(tái)上傳功能。
那么這一次，只談[放大]或[縮小]。[位置]和[上傳]問題，下次，我再寫下(因?yàn)槟莻€(gè)插件代碼太多，我也沒看完，正在學(xué)習(xí)研究當(dāng)中)。
［"區(qū)域"：是寬*高，也就是面積；]
［"放大或縮小"：是一個(gè)比例值，通常我們說放大或縮小，都說放大或縮小百分之多少，或者說放大或縮小多少倍數(shù)］
一、怎么能放大或者縮小圖片的局部？
局部放大：實(shí)質(zhì)是將圖片整個(gè)放大，即把圖片的寬度和高度改變大，然后將放大后的圖片，在一個(gè)固定大小(當(dāng)然是比原圖小的框)的框中，顯示出來。
局部放大：實(shí)質(zhì)是將圖片整個(gè)縮小，即把圖片的寬度和高度改變小，然后將縮小后的圖片，在一個(gè)固定大小(當(dāng)然是比原圖小的框)的框中，顯示出來。
二、左右布局:
左右各有一張相同的圖片，左邊選中區(qū)域的改變，會(huì)讓右邊的圖片，改變大小，根據(jù)第一點(diǎn)講的，所以就有了局部放大縮小效果;
三、放大縮小公式：
左邊是原圖，右邊是縮小或放大后的圖。規(guī)律是左邊的選中區(qū)域越大，那么右邊也將縮小這個(gè)圖,反之左邊選中區(qū)域越小，那么右邊的圖就會(huì)放大.
這個(gè)規(guī)律告訴我們，算法中應(yīng)該有除法。因?yàn)槌ㄖ?，分子不變，分母變大，那么結(jié)果越小，反之越大。所以除法中的在分子，不變的情況下，分母與結(jié)果正好是一對(duì)，反比關(guān)系，一個(gè)大，一個(gè)就小，反之，一個(gè)小，另一個(gè)就大。也正好和我們這個(gè)應(yīng)用中的圖片放大縮小，關(guān)系一至。
四、目的
1.我們要的結(jié)果，是右邊的圖片大小和顯示位置(顯示位置，下次再說，正在研究中)；
五、具體的算法：
左圖和右圖寬：一樣300PX;
左圖和右圖高：一樣300PX;
左圖顯示區(qū)域:寬300PX,高300PX
右圖顯示區(qū)域：寬100PX，高100PX
選中區(qū)域的寬設(shè)為：selection.width（具體怎么獲得這個(gè)值，我也正在分析當(dāng)中。先設(shè)為一個(gè)末知數(shù)）
選中區(qū)域的高設(shè)為：selection.Height（具體怎么獲得這個(gè)值，我也正在分析當(dāng)中。先設(shè)為一個(gè)末知數(shù)）
寬的比例值設(shè)為:scaleX（具體怎么獲得這個(gè)值，我也正在分析當(dāng)中。先設(shè)為一個(gè)末知數(shù)）
高的比例值設(shè)為:scaleX（具體怎么獲得這個(gè)值，我也正在分析當(dāng)中。先設(shè)為一個(gè)末知數(shù)）
這里一共有四個(gè)東西要理清，才能確定下面的公式。
a、 左圖、右圖的大小 (寬度都是相同)
b、 左邊顯示區(qū)域?qū)捀? (300PX*300PX)
c.、右邊顯示區(qū)域?qū)捀摺 ?(100px*100px)
d.、選擇區(qū)域的寬高值： (這個(gè)是通過JQ獲得selection.width,selection.Height)
5.1獲得比例值：
分母：根據(jù)第三點(diǎn)，那么選中區(qū)域的寬：selection.width 和 選中區(qū)域的高：selection.Height肯定是分母了，因?yàn)楦鶕?jù)實(shí)例分析，他倆的值越大，右邊的圖應(yīng)該越小。
分子：100px。也就是右邊顯示區(qū)域的寬度值。
為什么是它的值？我們的目的是要改變右邊圖片的寬或高的值，為什么會(huì)與顯示區(qū)域的寬度值相關(guān)聯(lián)呢？
這三者系一定要弄清。[“選擇區(qū)域大小”、“右邊顯示區(qū)域大小”、“右邊圖片大小”]；
選擇區(qū)域越大，超過了右邊顯示區(qū)域的大小，那么右邊圖片要想在這個(gè)區(qū)域中顯示，只能縮小圖片。
?。ㄒ粋€(gè)容器A只能裝100*100的東西，現(xiàn)在你要放B200*200的東西，那么容器不變，只能把東西變小了）
反之選擇區(qū)域越小，小于右邊顯示區(qū)域的大小，那么右邊圖片要想在這個(gè)區(qū)域填滿顯示，只能大放圖片。
?。ㄒ粋€(gè)容器A只能裝100*100的東西，現(xiàn)在你要放B50*50的東西，那么容器不變，只能把東西變大了,才能填滿整個(gè)容器）
選擇區(qū)域小大，等于右邊顯示區(qū)域大小，不用放大或縮小，剛剛好；
（一個(gè)容器A只能裝100*100的東西，現(xiàn)在你要放B100*100的東西，那么容器不變，東西也不變,剛好填滿整個(gè)容器）
得出：
寬的比例值設(shè)為:scaleX = 100 / selection.width;
高的比例值設(shè)為:scaleX = 100 / selection.height;
5.2 計(jì)算右邊圖片的大?。?/p>
用得到的這個(gè)比例值，去乘以右邊圖片的寬高，這里的300正是右邊圖片的寬和高，左邊和右邊是同一個(gè)圖片。寬度是一樣的。
右邊圖片的width: Math.round(scaleX * 300),
右邊圖片的height: Math.round(scaleY * 300),
六、問題：
selection.width;
selection.height
這兩個(gè)值如何獲得？
我是想先把宏觀的大的東西弄清楚，以后再專門寫幾篇有關(guān)如何獲得這個(gè)里面關(guān)鍵的值的分析。
必竟這個(gè)插件很大，代碼很多復(fù)雜，所以只能一步一步的深入了。
這是插件網(wǎng)址：http://odyniec.net/projects/imgareaselect/
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，有興趣的可以看下《利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪（同步顯示圖像位置信息）》，謝謝對(duì)腳本之家的支持！
您可能感興趣的文章:- 基于jquery實(shí)現(xiàn)一張圖片點(diǎn)擊鼠標(biāo)放大再點(diǎn)縮小
- jquery實(shí)現(xiàn)頁(yè)面圖片等比例放大縮小功能
- 基于jquery的滾動(dòng)鼠標(biāo)放大縮小圖片效果
- jQuery實(shí)現(xiàn)滾動(dòng)鼠標(biāo)放大縮小圖片的方法(附demo源碼下載)
- jQuery實(shí)現(xiàn)的點(diǎn)擊圖片居中放大縮小功能示例
- jQuery實(shí)現(xiàn)的圖片點(diǎn)擊放大縮小功能案例
- jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁(yè)面布局
- 用JQuery模仿淘寶的圖片放大鏡顯示效果
- jquery圖片放大鏡功能的實(shí)例代碼
- jQuery+css實(shí)現(xiàn)的點(diǎn)擊圖片放大縮小預(yù)覽功能示例【圖片預(yù)覽 查看大圖】
相關(guān)文章
-
jquery cookie實(shí)現(xiàn)的簡(jiǎn)單換膚功能適合小網(wǎng)站
使用jquery cookie做了一個(gè)簡(jiǎn)單的換膚功能適合小網(wǎng)站并且代碼低級(jí)，具體實(shí)現(xiàn)過程如下，感興趣的朋友可以了解下 2013-08-08
-
jQuery獲取及設(shè)置表單input各種類型值的方法小結(jié)
這篇文章主要介紹了jQuery獲取及設(shè)置表單input各種類型值的方法,總結(jié)分析了jQuery針對(duì)表單元素的各種常見操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下 2016-05-05
-
jQuery實(shí)現(xiàn)滾動(dòng)切換的tab選項(xiàng)卡效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)滾動(dòng)切換的tab選項(xiàng)卡效果代碼,涉及jquery鏈?zhǔn)讲僮骷皹邮絼?dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下 2015-08-08
-
今天主要總結(jié)一下jQuery操作元素屬性的一些知識(shí)，學(xué)習(xí)jquery的朋友可以參考下 2010-02-02
-
這篇文章主要介紹了Jquery Ajax方法傳值到action的方法,需要的朋友可以參考下 2014-05-05
-
jQuery實(shí)現(xiàn)的彈幕效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的彈幕效果,結(jié)合完整實(shí)例形式分析了jQuery通過結(jié)合時(shí)間函數(shù)控制輸入文字與樣式的漸變實(shí)現(xiàn)彈幕效果,需要的朋友可以參考下 2017-09-09
-
jquery實(shí)現(xiàn)微博文字輸入框 輸入時(shí)顯示輸入字?jǐn)?shù) 效果實(shí)現(xiàn)
這篇文章介紹了用jquery實(shí)現(xiàn)微博文字輸入框 輸入時(shí)顯示輸入字?jǐn)?shù)的效果，有需要的朋友可以參考一下 2013-07-07
-
jQuery學(xué)習(xí)筆記之 Ajax操作篇（三） - 過程處理
對(duì)于 jQuery 通過 Ajax 方式傳遞數(shù)據(jù)時(shí)，我們還可以在過程中進(jìn)行一定的處理，以便達(dá)到我們的需求。
2014-06-06
-
這篇文章主要介紹了jQuery中before()方法用法,以實(shí)例形式分析了before()方法的功能、定義與具體使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下 2014-12-12
-
超棒的響應(yīng)式布局jQuery插件Freetile.js
隨著頁(yè)面扁平化的普及，越來越多的網(wǎng)站都開始使用響應(yīng)式布局，作為一個(gè)優(yōu)秀的前端工作者，必須要精通的，這里給大家推薦一款響應(yīng)式布局的jQuery插件。 2014-11-11
最新評(píng)論
這個(gè)應(yīng)用的關(guān)鍵：
1.讓左邊選擇區(qū)域和右邊顯示的圖像信息保持一至。
2.根據(jù)左邊選擇區(qū)域的大小，來讓右邊有一個(gè)對(duì)局部放大或縮小的效果。
3.后臺(tái)上傳功能。
那么這一次，只談[放大]或[縮小]。[位置]和[上傳]問題，下次，我再寫下(因?yàn)槟莻€(gè)插件代碼太多，我也沒看完，正在學(xué)習(xí)研究當(dāng)中)。
［"區(qū)域"：是寬*高，也就是面積；]
［"放大或縮小"：是一個(gè)比例值，通常我們說放大或縮小，都說放大或縮小百分之多少，或者說放大或縮小多少倍數(shù)］
一、怎么能放大或者縮小圖片的局部？
局部放大：實(shí)質(zhì)是將圖片整個(gè)放大，即把圖片的寬度和高度改變大，然后將放大后的圖片，在一個(gè)固定大小(當(dāng)然是比原圖小的框)的框中，顯示出來。
局部放大：實(shí)質(zhì)是將圖片整個(gè)縮小，即把圖片的寬度和高度改變小，然后將縮小后的圖片，在一個(gè)固定大小(當(dāng)然是比原圖小的框)的框中，顯示出來。
二、左右布局:
左右各有一張相同的圖片，左邊選中區(qū)域的改變，會(huì)讓右邊的圖片，改變大小，根據(jù)第一點(diǎn)講的，所以就有了局部放大縮小效果;
三、放大縮小公式：
左邊是原圖，右邊是縮小或放大后的圖。規(guī)律是左邊的選中區(qū)域越大，那么右邊也將縮小這個(gè)圖,反之左邊選中區(qū)域越小，那么右邊的圖就會(huì)放大.
這個(gè)規(guī)律告訴我們，算法中應(yīng)該有除法。因?yàn)槌ㄖ?，分子不變，分母變大，那么結(jié)果越小，反之越大。所以除法中的在分子，不變的情況下，分母與結(jié)果正好是一對(duì)，反比關(guān)系，一個(gè)大，一個(gè)就小，反之，一個(gè)小，另一個(gè)就大。也正好和我們這個(gè)應(yīng)用中的圖片放大縮小，關(guān)系一至。
四、目的
1.我們要的結(jié)果，是右邊的圖片大小和顯示位置(顯示位置，下次再說，正在研究中)；
五、具體的算法：
左圖和右圖寬：一樣300PX;
左圖和右圖高：一樣300PX;
左圖顯示區(qū)域:寬300PX,高300PX
右圖顯示區(qū)域：寬100PX，高100PX
選中區(qū)域的寬設(shè)為：selection.width（具體怎么獲得這個(gè)值，我也正在分析當(dāng)中。先設(shè)為一個(gè)末知數(shù)）
選中區(qū)域的高設(shè)為：selection.Height（具體怎么獲得這個(gè)值，我也正在分析當(dāng)中。先設(shè)為一個(gè)末知數(shù)）
寬的比例值設(shè)為:scaleX（具體怎么獲得這個(gè)值，我也正在分析當(dāng)中。先設(shè)為一個(gè)末知數(shù)）
高的比例值設(shè)為:scaleX（具體怎么獲得這個(gè)值，我也正在分析當(dāng)中。先設(shè)為一個(gè)末知數(shù)）
這里一共有四個(gè)東西要理清，才能確定下面的公式。
a、 左圖、右圖的大小 (寬度都是相同)
b、 左邊顯示區(qū)域?qū)捀? (300PX*300PX)
c.、右邊顯示區(qū)域?qū)捀摺 ?(100px*100px)
d.、選擇區(qū)域的寬高值： (這個(gè)是通過JQ獲得selection.width,selection.Height)
5.1獲得比例值：
分母：根據(jù)第三點(diǎn)，那么選中區(qū)域的寬：selection.width 和 選中區(qū)域的高：selection.Height肯定是分母了，因?yàn)楦鶕?jù)實(shí)例分析，他倆的值越大，右邊的圖應(yīng)該越小。
分子：100px。也就是右邊顯示區(qū)域的寬度值。
為什么是它的值？我們的目的是要改變右邊圖片的寬或高的值，為什么會(huì)與顯示區(qū)域的寬度值相關(guān)聯(lián)呢？
這三者系一定要弄清。[“選擇區(qū)域大小”、“右邊顯示區(qū)域大小”、“右邊圖片大小”]；
選擇區(qū)域越大，超過了右邊顯示區(qū)域的大小，那么右邊圖片要想在這個(gè)區(qū)域中顯示，只能縮小圖片。
?。ㄒ粋€(gè)容器A只能裝100*100的東西，現(xiàn)在你要放B200*200的東西，那么容器不變，只能把東西變小了）
反之選擇區(qū)域越小，小于右邊顯示區(qū)域的大小，那么右邊圖片要想在這個(gè)區(qū)域填滿顯示，只能大放圖片。
?。ㄒ粋€(gè)容器A只能裝100*100的東西，現(xiàn)在你要放B50*50的東西，那么容器不變，只能把東西變大了,才能填滿整個(gè)容器）
選擇區(qū)域小大，等于右邊顯示區(qū)域大小，不用放大或縮小，剛剛好；
（一個(gè)容器A只能裝100*100的東西，現(xiàn)在你要放B100*100的東西，那么容器不變，東西也不變,剛好填滿整個(gè)容器）
得出：
寬的比例值設(shè)為:scaleX = 100 / selection.width;
高的比例值設(shè)為:scaleX = 100 / selection.height;
5.2 計(jì)算右邊圖片的大?。?/p>
用得到的這個(gè)比例值，去乘以右邊圖片的寬高，這里的300正是右邊圖片的寬和高，左邊和右邊是同一個(gè)圖片。寬度是一樣的。
右邊圖片的width: Math.round(scaleX * 300),
右邊圖片的height: Math.round(scaleY * 300),
六、問題：
selection.width;
selection.height
這兩個(gè)值如何獲得？
我是想先把宏觀的大的東西弄清楚，以后再專門寫幾篇有關(guān)如何獲得這個(gè)里面關(guān)鍵的值的分析。
必竟這個(gè)插件很大，代碼很多復(fù)雜，所以只能一步一步的深入了。
這是插件網(wǎng)址：http://odyniec.net/projects/imgareaselect/
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，有興趣的可以看下《利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪（同步顯示圖像位置信息）》，謝謝對(duì)腳本之家的支持！
- 基于jquery實(shí)現(xiàn)一張圖片點(diǎn)擊鼠標(biāo)放大再點(diǎn)縮小
- jquery實(shí)現(xiàn)頁(yè)面圖片等比例放大縮小功能
- 基于jquery的滾動(dòng)鼠標(biāo)放大縮小圖片效果
- jQuery實(shí)現(xiàn)滾動(dòng)鼠標(biāo)放大縮小圖片的方法(附demo源碼下載)
- jQuery實(shí)現(xiàn)的點(diǎn)擊圖片居中放大縮小功能示例
- jQuery實(shí)現(xiàn)的圖片點(diǎn)擊放大縮小功能案例
- jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁(yè)面布局
- 用JQuery模仿淘寶的圖片放大鏡顯示效果
- jquery圖片放大鏡功能的實(shí)例代碼
- jQuery+css實(shí)現(xiàn)的點(diǎn)擊圖片放大縮小預(yù)覽功能示例【圖片預(yù)覽 查看大圖】
相關(guān)文章
-
jquery cookie實(shí)現(xiàn)的簡(jiǎn)單換膚功能適合小網(wǎng)站
使用jquery cookie做了一個(gè)簡(jiǎn)單的換膚功能適合小網(wǎng)站并且代碼低級(jí)，具體實(shí)現(xiàn)過程如下，感興趣的朋友可以了解下2013-08-08 -
jQuery獲取及設(shè)置表單input各種類型值的方法小結(jié)
這篇文章主要介紹了jQuery獲取及設(shè)置表單input各種類型值的方法,總結(jié)分析了jQuery針對(duì)表單元素的各種常見操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-05-05 -
jQuery實(shí)現(xiàn)滾動(dòng)切換的tab選項(xiàng)卡效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)滾動(dòng)切換的tab選項(xiàng)卡效果代碼,涉及jquery鏈?zhǔn)讲僮骷皹邮絼?dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08 - 今天主要總結(jié)一下jQuery操作元素屬性的一些知識(shí)，學(xué)習(xí)jquery的朋友可以參考下2010-02-02
- 這篇文章主要介紹了Jquery Ajax方法傳值到action的方法,需要的朋友可以參考下2014-05-05
-
jQuery實(shí)現(xiàn)的彈幕效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的彈幕效果,結(jié)合完整實(shí)例形式分析了jQuery通過結(jié)合時(shí)間函數(shù)控制輸入文字與樣式的漸變實(shí)現(xiàn)彈幕效果,需要的朋友可以參考下2017-09-09 -
jquery實(shí)現(xiàn)微博文字輸入框 輸入時(shí)顯示輸入字?jǐn)?shù) 效果實(shí)現(xiàn)
這篇文章介紹了用jquery實(shí)現(xiàn)微博文字輸入框 輸入時(shí)顯示輸入字?jǐn)?shù)的效果，有需要的朋友可以參考一下2013-07-07 -
jQuery學(xué)習(xí)筆記之 Ajax操作篇（三） - 過程處理
對(duì)于 jQuery 通過 Ajax 方式傳遞數(shù)據(jù)時(shí)，我們還可以在過程中進(jìn)行一定的處理，以便達(dá)到我們的需求。2014-06-06 - 這篇文章主要介紹了jQuery中before()方法用法,以實(shí)例形式分析了before()方法的功能、定義與具體使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
-
超棒的響應(yīng)式布局jQuery插件Freetile.js
隨著頁(yè)面扁平化的普及，越來越多的網(wǎng)站都開始使用響應(yīng)式布局，作為一個(gè)優(yōu)秀的前端工作者，必須要精通的，這里給大家推薦一款響應(yīng)式布局的jQuery插件。2014-11-11