使用jQuery插件imgAreaSelect实现图像上传和裁剪(同步显示图像位置信息)

body div class=' container demo ' div class=' big ' p class=' instructions ' big picture preview/p div class=' big frame ' img width=' 300 ' height=' 300 ' src=' http 3360 images/Resized _ pic . jpg ' alt=' '//div/div class=' small ' PS mall scale/p div class=' small frame ' div class=' pre ' id=' preview ' img src=' http : images/Resized _ pic . jpg ' alt=' '

最近练手写了一些小东西，都是网上成熟的JQ或者JS。但是，在练手的过程中，我发现很多应用，其实归结为元素的宽度和高度的变化，位置的变化，最后通过事件或者算法形成效果或者应用。

如果看到一些炫目的效果，其实可以从宽度和高度、位置、显示和隐藏等方面进行分析。循序渐进。这是一点个人经验。好吧，我们言归正传。

如何让左边选中区域和右边的图像信息同步显示？

一、右显示与左同步：

在左边选择一个区域，那么右边的图像信息应该和这个区域的一样？其本质是移动右图像，使移动后的右图像的显示区域显示的图像信息与左选择区域完全相同。

第二，如何移动正确的图像

要移动图片，即移动元素，可以更改TOP LEFT值，这是绝对或相对定位的情况。在这里，没有。

因此，使用了更改边距-上边距-左边距值的方法。

第三，移动公式

上图中：黑色：图片，白色：选择区域，红色：起点，绿色：起点的水平和垂直坐标；黄色是：右侧图片的上边距和左边距

假设：左图和右图的大小、宽度和高度相同。我想把左边白色区域的图像信息显示在右边，所以我需要把图像放在右边

上边距值设置为：红点的y坐标值

左边距的值设置为：红点的x坐标值

那就是：

边距-顶部=x；左边距=Y；但是现在假设不成立，因为右边图片的大小随时都在变化(在第一次分析中)；

这种变化是基于一个比例值。

所以不管图片在这里放大还是缩小，结果是

应该乘以这个放大或缩小的值：

margin-top=Scalex * x；左边距=ScaleX * Y；好了，现在你可以得到移动位置值了。也就是说，左右两侧可以同步显示图像信息。

以上就是本文的全部内容，希望对大家有所帮助。感兴趣的朋友可以看看《利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）》，谢谢支持！