利用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/

以上就是本文的全部内容，希望对大家有所帮助，有兴趣的可以看下《利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）》，谢谢对北冥有鱼的支持！

您可能感兴趣的文章:

• jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
• struts2+jsp+jquery+Jcrop实现图片裁剪并上传实例
• 利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）
• jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
• jQuery实现图片上传和裁剪插件Croppie
• jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
• jQuery+PHP实现上传裁剪图片