位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)(jquery插件使用教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery插件大全,jquery img onload,如何用jquery,简单的jquery插件实例,jquery插件使用教程,jquery插件使用教程,如何使用jquery插件,jquery img onload,内容如对您有帮助,希望把文章链接给更多的朋友!

这个应用的关键:

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

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

3.后台上传功能。

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

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

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

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

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

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

二、左右布局:

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

三、放大缩小公式:

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

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

四、目的

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

五、具体的算法:

  左图和右图宽:一样PX;

  左图和右图高:一样PX;

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

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

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

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

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

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

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

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

  a、 左图、右图的大小   (宽度都是相同)

  b、 左边显示区域宽高   (PX*PX)

  c.、右边显示区域宽高   (px*px)

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

  5.1获得比例值:

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

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

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

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

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

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

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

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

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

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

  得出:

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

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

  5.2 计算右边图片的大小:

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

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

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

六、问题:

  selection.width;

  selection.height

  这两个值如何获得?

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

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

这是插件网址:

基于jQuery实现表格的排序 $(function(){//存入点击列的每一个TD的内容;varaTdCont=[];//点击列的索引值varthi=0//重新对TR进行排序varsetTrIndex=function(tdIndex){for(i=0;iaTdCont.length;i++){vartrCont=aTd

利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息) bodydivclass="containerdemo"divclass="big"pclass="instructions"大图预览/pdivclass="bigframe"imgwidth=""height=""src="images/resized_pic.jpg"alt=""//div/divdivclass="small"p小图缩放/pdivc

利用jQuery插件imgAreaSelect实现获得选择域的图像信息 还是先来分析一下:(以下的值,如何获得,以后在具体的实现中再来分析,现在只谈宏观的)如何获得选择域的图像信息其实就是要我们如何获得这

标签: jquery插件使用教程

本文链接地址:https://www.jiuchutong.com/biancheng/376290.html 转载请保留说明!

上一篇:利用jQuery来动态为属性添加或者删除属性的简单方法(jquery动态生成div)

下一篇:基于jQuery实现表格的排序(jquery实战)

  • 股权转让和变更法人一样吗?
  • 一般纳税人可以开免税发票吗
  • 小规模附加税减半吗
  • 在电子税务里怎么查以前年度亏损数据
  • 转账支票开给个人收款人怎么写
  • 医院员工工资表模板
  • 关联方交易影响因素
  • 新会计准则开办费分摊
  • 员工补偿金扣税
  • 商业用房怎么缴税
  • 上市公司限制性股票行权时间限制多久
  • 复利现值系数完整版
  • 小企业所得税申报流程
  • 代开建安发票怎么做账务处理?
  • 发票限额是多少
  • 装修职工宿舍用的瓷砖,灯具等计入什么科目?
  • 融资协议如何缴纳印花税
  • 房地产增值税预征率
  • 公司买卖股票如何账务处理
  • 社保公积金会计分录怎么写
  • 公司为员工负担的工资
  • 替票是什么和发票的区别
  • 节能减排奖励资金追回
  • 怎么更正以前年度企业所得税
  • 只有发票才能税前扣除吗
  • 0申报季末资产总额填多少
  • 退回的费用如何入账
  • 反避税的意义
  • 苹果电脑itu
  • 工厂没有生产许可证可以生产吗
  • 咨询服务费需要什么附件
  • 写一篇推荐书
  • 银行存款期末调汇吗
  • 超市代金券买什么最划算
  • 长期股权投资引入新投资者账务处理
  • 贷款利息如何计算年利率
  • uni-app实战教程
  • 分期收款销售账务处理及税务处理
  • php随机数组
  • 前端vscode配置
  • netconf over ssh
  • 非流动资产基金对应的新科目
  • 入库管理业务流程图
  • php页面出不来
  • 税金及附加多计提年报更正
  • 新开企业如何开发票
  • 其他应付款货方余额表示什么
  • 税控盘反写是不是说明税都已经成功申报了
  • 存货呆滞的原因及处理表格
  • 销售返利如何做账
  • 货款扣除质量赔款
  • 个人借款产生的利息怎么计算的
  • 小规模纳税人可以抵税吗
  • 要约收购的条件和程序具体包括哪些?
  • sql中varchar和number比较
  • win7 bug
  • lsf.exe是什么
  • ubuntu18 设置静态ip
  • win版本微信
  • csinject.exe是什么程序的进程 csinject进程是安全的吗
  • kernel-headers-2.2.1-4
  • 升级win10系统后安装谷歌打不开
  • 按住鼠标右键拖动文件
  • mvp功能
  • 随机色彩
  • from tkinter import
  • python 执行命令
  • android基础入门教程
  • java 视频教程
  • js保存设置
  • jquery插件开发方法
  • Android性能优化的方面12个
  • 税友核心价值观
  • 税务局解决户口吗
  • 中欧班列补贴政策
  • 山西国税电子税务局电话
  • 自然人电子税务局怎么设置申报密码
  • 美国非税收入排名榜
  • 税务系统党支部工作法
  • 青羊名字由来
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设