利用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 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
vue项目接口域名动态获取操作
Aug 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
15种PHP Encoder的比较
2007/03/06 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python编程实现正则删除命令功能
2017/08/30 Python
简单实现Python爬取网络图片
2018/04/01 Python
python中int与str互转方法
2018/07/02 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
公司员工的自我评价范例
2013/11/01 职场文书
食品安全宣传标语
2014/06/07 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
就业推荐表导师评语
2014/12/31 职场文书
大学生个人学年总结
2015/02/15 职场文书
创卫工作总结2015
2015/04/22 职场文书
民间借贷被告代理词
2015/05/23 职场文书
读书笔记格式
2015/07/02 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书