利用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 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
js实现头像上传并且可预览提交
Dec 25 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新手上路(十四)
2006/10/09 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
Pycharm安装python库的方法
2020/11/24 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
服装公司总经理岗位职责
2013/11/30 职场文书
会计求职自荐信
2014/06/20 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
志愿者工作心得体会
2016/01/15 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
解析目标检测之IoU
2021/06/26 Python
Python实现双向链表
2022/05/25 Python
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python