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

这个应用的关键:

 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/

时间: 2024-10-02 15:45:11

利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)_jquery的相关文章

利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)_jquery

  <body> <div class="container demo"> <div class="big"> <p class="instructions">大图预览</p> <div class="bigframe"> <img width="300" height="300" src="imag

利用jQuery插件imgAreaSelect实现获得选择域的图像信息_jquery

还是先来分析一下: (以下的值,如何获得,以后在具体的实现中再来分析,现在只谈宏观的) 如何获得选择域的图像信息?  其实就是要我们如何获得这个选择区域,在图像中的那个位置,并且这个区域的大小是多少? 把位置和大小告诉了计算机,它就知道我们是要获取那一块的图像信息了. (我们的选择区域,是在一个平面当中,而且是一个规则的图形,正方形,或都矩形(通俗:长方形)) 大小: 这个区域的宽度,高度值,两值相乘,就是这个区域的面积,即大小.(这个应该不难) 位置: 1.假设我们只告诉计算机,这个选择区域一

利用jquery.uploadify插件来实现图片上传和预览效果

文章是告诉你如何利用jquery.uploadify插件来实现图片上传和预览效果,首页我们要看看关于利用jquery uploadify上传图片要注意事项吧. 注意事项 (1).如果页面没有显示"browse"按钮,则说明你的'uploader' : '<%=basepath%>images/uploadify.swf'配置不对,检查下路径是否正确. (2).如果需要修改按钮的图片:可以使用'buttonimg'配置进行替换 (3).上传完成后,'oncomplete'事件

jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

  这篇文章主要介绍了jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码,非常的简单实用,效果也很棒,有需要的小伙伴可以参考下. 网页端 裁剪图片,不需要经过服务器. 这个是用 https://github.com/mailru/FileAPI 框架实现的.配合jcrop. 高级浏览器 使用 canvas 裁剪,ie6 7 8使用 flash过度. 核心代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

jquery插件ajaxupload实现文件上传操作_jquery

本文实例讲述了jquery插件ajaxupload实现文件上传操作代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 图1 文件上传前 图2 文件上传后 具体代码如下: 1.创建页面并编写HTML 上传文档:  <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></s

使用jquery.form.js实现图片上传的方法_jquery

本文实例讲述了使用jquery.form.js实现图片上传的方法.分享给大家供大家参考,具体如下: testupfile2.php <?php header('Content-type:text/html;charset=utf-8'); include_once 'includes/common.inc.php'; if(!empty($_FILES['upfile'])){ //文件格式 $image=array('image/jpg', 'image/jpeg', 'image/png',

PHP+jQuery+Ajax实现多图片上传效果_jquery

今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码 代码如下: <form id="imageform" met

JQuery插件ajaxfileupload.js异步上传文件实例

这篇文章主要介绍了JQuery插件ajaxfileupload.js异步上传文件实例,本文直接给出了HTML代码和JS代码以及后台处理代码,需要的朋友可以参考下     在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用:  代码如下: <scr

ajax-Bootstrap插件File Input图片上传报错?怎么解决

问题描述 Bootstrap插件File Input图片上传报错?怎么解决