使用jQuery插件imgAreaSelect实现图像上传和裁剪(放大和缩小)

这个应用程序的关键是：

1.保持左侧的选定区域和右侧显示的图像信息一一对应。

2.根据左边选定区域的大小，让右边有一个局部放大或缩小的效果。

3.后台上传功能。

所以这一次，只谈论[放大]或[缩小]。【位置】和【上传】问题，下次我会写下来(因为插件代码太多，还没看完，正在研究)。

【‘面积’:是宽度*高度，也就是面积；]

[“放大或缩小”:这是一个比例值。一般来说，当我们说放大或缩小时，我们说放大或缩小的百分比，或者放大或缩小的次数]

首先，如何放大或缩小部分图片？

局部放大：本质是将整个画面放大，即大幅改变画面的宽度和高度，然后将放大后的画面显示在一个固定大小的框架内(当然比原画面要小)。

部分放大：本质是缩小整个画面，也就是把画面的宽度和高度变小，然后把缩小后的画面显示在一个固定大小的框架里(当然比原来的要小)。

二、左右布局：

左右都有一张相同的图片，左边选定区域的改变会改变右边图片的大小。根据第一点，有局部放大效果；

三、放大缩小公式：

左边是原图，右边是缩小或放大的图。规则是左边的选定区域越大，右边的选定区域越小，左边的选定区域越大。

这个规则告诉我们，算法中应该有除法。因为除法中，分子不变，分母变大，结果越小，反之越大。所以在除法中，当分子不变时，分母和结果正好是一对，成反比。一个大，一个小，一个大。在我们的应用中，它也恰好与图片的放大和缩小有关。

四.目的

1.我们想要的结果是右边图片的大小和显示位置(显示位置，下次再说，正在研究中)；

动词（verb的缩写）具体算法：

左右图宽度：同300PX

左图右图高：同300PX

左图为：区域宽300PX，高300PX

右侧显示区域：宽100像素，高100像素

所选区域的宽度设置为：selection.width(我也在分析如何得到这个值。首先设置为最后已知的数字)

选定区域的高度设置为：选区。身高(我也在分析如何得到这个值。首先设置为最后已知的数字)

宽刻度值设置为：scaleX(我也在分析如何得到这个值。首先设置为最后已知的数字)

高比例值设置为：scaleX(我也在分析如何得到这个值。首先设置为最后已知的数字)

为了确定下面的公式，有四件事需要整理。

a、左图和右图的尺寸(宽度相同)

B.左侧显示区域的宽度和高度(300像素* 300像素)

C.右侧显示区域的宽度和高度(100px*100px)

D.选择区域的宽度和高度值：(这是为了获得选择。宽度和选择。穿过JQ的高度)

5.1获得比例值：

分母：根据第三点，选定区域的宽度：selection.width，选定区域的高度：selection。高度一定是分母，因为根据一个实例分析，它们的值越大，右边的数字应该越小。

分子：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是右边图片的宽度和高度，左右图片相同。宽度是一样的。

宽度：数学。右边图片的圆形(scalex * 300)，

身高：数学。右边图片的圆形(比例尺* 300 ),

不及物动词问题：

selection.width

选择。高度

这两个值是怎么得到的？

我想先把大的宏观的东西搞清楚，然后再写几篇关于如何在里面得到关键值的文章。

这个插件很大，代码很复杂，只能一步一步加深。

这是插件网址：http://odyniec.net/projects/imgareaselect/

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