利用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源码分析之Event事件分析
Jun 07 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
深入理解javascript中的this
Feb 08 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使用异或实现的加密解密实例
2013/09/04 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
php生成curl命令行的方法
2015/12/14 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
jquery的map与get方法详解
2013/11/04 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
安全承诺书格式
2014/05/21 职场文书
青年文明号口号
2014/06/17 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
借名购房协议书范本
2014/10/06 职场文书
三八妇女节标语
2014/10/09 职场文书
北京英文导游词
2015/02/12 职场文书
横空出世观后感
2015/06/09 职场文书
八年级英语教学反思
2016/02/15 职场文书