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


Posted in Javascript onDecember 02, 2016

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

<body>
 <div class="container demo">
  <div class="big">
   <p class="instructions">大图预览</p>
   <div class="bigframe">
    <img width="300" height="300" src="images/resized_pic.jpg" alt="" />
   </div>
  </div>
  <div class="small">
   <p>小图缩放</p>
    <div class="smallframe" >
    <div class="pre" id="preview">
     <img src="images/resized_pic.jpg" alt="" />
    </div>
   </div>
  </div>
 </div>
</body>

先总结一下:

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

如果大家看到一些很炫的东西效果,其实都可以往宽高,位置,显示隐藏,这些方面去分析。一步一步深入。是一点个人体会。好吧,进入正题。

如何让左边选择区域的图像信息和右边的同步显示出来?

一、右边显示和左边同步:

左边选择一块区域,那么右边要和这个区域的图像信息相同?其实质,也就是要移动右边的图像,让移动后的右边图片,在显示区域当中,显示的图像信息,正好和左边的选择区域一样。

二、如何移动右边图像

要移动图片,也就是移动一个元素,可以有改变TOP LEFT值,这是在有绝对或相对定位的情况下。而这里,没有。

所以用到改变margin-top margin-left值的方式。

三、移动公式

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

上图中:黑色:图片,白色:选择区,红色:起始点,绿色:起始点的横纵坐标值; 黄色为:右边图片的margin-top,margin-left

假设:左边图片和右边图片,一样大小,宽和高都一样。我要在右边显示出左边白色区域的图像信息,就需要把右边图片的

margin-top值设为:红点的Y坐标值

margin-left值设为:红点的X坐标值

即:

margin-top = x;
margin-left = Y;

但是现在假设不成立,因为右边图片的大小,是随时变化的(第一篇分析中有);

而变化是根据一个比例值来的。

所以这里不管是图片放大,还是缩小,原来

都应该乘以这个放大或缩小的比例值:

margin-top = scaleX*x;
margin-left = scaleX*Y;

好了,现在可以得到移动的位置值了。也就是说左边和右边可以同步显示图像信息了。

以上就是本文的全部内容,希望对大家有所帮助,有兴趣的朋友可以看下《利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)》,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 Javascript
Java 生成随机字符的示例代码
Jan 13 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 #Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 #Javascript
搭建Bootstrap离线文档的方法
Dec 02 #Javascript
巧用Javascript的逻辑运算符
Dec 02 #Javascript
Vue.js第四天学习笔记(组件)
Dec 02 #Javascript
Javascript之面向对象--接口
Dec 02 #Javascript
Javascript之面向对象--封装
Dec 02 #Javascript
You might like
php mysql数据库操作类
2008/06/04 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
Open and Print a Word Document
2007/06/15 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
Python中List.count()方法的使用教程
2015/05/20 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
用python实现百度翻译的示例代码
2018/03/09 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Python tkinter三种布局实例详解
2020/01/06 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
小区消防演习方案
2014/02/21 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
2015新年寄语大全
2014/12/08 职场文书
初三语文教学计划
2015/01/22 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
幼儿园辞职信
2015/05/13 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
优质护理服务心得体会
2016/01/22 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server