利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)


Posted in Javascript onDecember 02, 2016

利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)

这个应用的关键:

 1.让左边选择区域和右边显示的图像信息保持一至。

 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果。

    3.后台上传功能。

那么这一次,只谈[放大]或[缩小]。[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中)。

["区域":是宽*高,也就是面积;]

["放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数]

一、怎么能放大或者缩小图片的局部?

局部放大:实质是将图片整个放大,即把图片的宽度和高度改变大,然后将放大后的图片,在一个固定大小(当然是比原图小的框)的框中,显示出来。

局部放大:实质是将图片整个缩小,即把图片的宽度和高度改变小,然后将缩小后的图片,在一个固定大小(当然是比原图小的框)的框中,显示出来。

二、左右布局:

左右各有一张相同的图片,左边选中区域的改变,会让右边的图片,改变大小,根据第一点讲的,所以就有了局部放大缩小效果;

三、放大缩小公式:

左边是原图,右边是缩小或放大后的图。规律是左边的选中区域越大,那么右边也将缩小这个图,反之左边选中区域越小,那么右边的图就会放大.

这个规律告诉我们,算法中应该有除法。因为除法中,分子不变,分母变大,那么结果越小,反之越大。所以除法中的在分子,不变的情况下,分母与结果正好是一对,反比关系,一个大,一个就小,反之,一个小,另一个就大。也正好和我们这个应用中的图片放大缩小,关系一至。

四、目的

1.我们要的结果,是右边的图片大小和显示位置(显示位置,下次再说,正在研究中);

五、具体的算法:

左图和右图宽:一样300PX;

左图和右图高:一样300PX;

左图显示区域:宽300PX,高300PX

右图显示区域:宽100PX,高100PX

选中区域的宽设为:selection.width(具体怎么获得这个值,我也正在分析当中。先设为一个末知数)

选中区域的高设为:selection.Height(具体怎么获得这个值,我也正在分析当中。先设为一个末知数)

宽的比例值设为:scaleX(具体怎么获得这个值,我也正在分析当中。先设为一个末知数)

高的比例值设为:scaleX(具体怎么获得这个值,我也正在分析当中。先设为一个末知数)

这里一共有四个东西要理清,才能确定下面的公式。

a、 左图、右图的大小

(宽度都是相同)

b、 左边显示区域宽高

(300PX*300PX)

c.、右边显示区域宽高

(100px*100px)

d.、选择区域的宽高值:  (这个是通过JQ获得selection.width,selection.Height)

5.1获得比例值:

分母:根据第三点,那么选中区域的宽:selection.width 和 选中区域的高:selection.Height肯定是分母了,因为根据实例分析,他俩的值越大,右边的图应该越小。

分子:100px。也就是右边显示区域的宽度值。

  为什么是它的值?我们的目的是要改变右边图片的宽或高的值,为什么会与显示区域的宽度值相关联呢?

 这三者系一定要弄清。[“选择区域大小”、“右边显示区域大小”、“右边图片大小”];

 选择区域越大,超过了右边显示区域的大小,那么右边图片要想在这个区域中显示,只能缩小图片。

 (一个容器A只能装100*100的东西,现在你要放B200*200的东西,那么容器不变,只能把东西变小了)

 反之选择区域越小,小于右边显示区域的大小,那么右边图片要想在这个区域填满显示,只能大放图片。

 (一个容器A只能装100*100的东西,现在你要放B50*50的东西,那么容器不变,只能把东西变大了,才能填满整个容器)

 选择区域小大,等于右边显示区域大小,不用放大或缩小,刚刚好;

(一个容器A只能装100*100的东西,现在你要放B100*100的东西,那么容器不变,东西也不变,刚好填满整个容器)

得出:

宽的比例值设为:scaleX = 100 / selection.width;

高的比例值设为:scaleX = 100 / selection.height; 

5.2 计算右边图片的大小:

用得到的这个比例值,去乘以右边图片的宽高,这里的300正是右边图片的宽和高,左边和右边是同一个图片。宽度是一样的。

右边图片的width: Math.round(scaleX * 300),

右边图片的height: Math.round(scaleY * 300),

六、问题:

selection.width;

selection.height

这两个值如何获得?

我是想先把宏观的大的东西弄清楚,以后再专门写几篇有关如何获得这个里面关键的值的分析。

必竟这个插件很大,代码很多复杂,所以只能一步一步的深入了。

这是插件网址:http://odyniec.net/projects/imgareaselect/

以上就是本文的全部内容,希望对大家有所帮助,有兴趣的可以看下《利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)》,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
使用javascript做在线算法编程
May 25 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 #Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 #Javascript
基于javascript实现的快速排序
Dec 02 #Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 #Javascript
基于jQuery实现滚动切换效果
Dec 02 #Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 #Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 #Javascript
You might like
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
中专生求职自荐信范文
2013/12/22 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
企业工会工作总结2015
2015/05/13 职场文书
第一军规观后感
2015/06/12 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python