1、插件介绍

imgareaselect 是一个 允许用户使用简单、直观的点击、拖动界面图像选择矩形区域的jQuery插件。该插件可用于 web 应用程序中轻松实现图像裁剪功能,以及其他功能,如照片标记、 图像编辑功能,等等。
2、基本用法(简单实例)

首先先调用imgareaselect-default.css、jquery-1.7.1.min.js、imgareaselect.pack.js这三个文件(官网下载的)

官网:http://odyniec.net/projects/imgareaselect/

<!--html-->
<div class="frame" style="margin: 0 0.3em; width: 500px; height: 467px;float:left;border:2px solid #dcdcdc;">
  <img id="photo" src="../Images/img3.jpg" style="max-width:100%;max-height:100%;" />
</div> <div id="preview" style="width: 250px; height: 200px; overflow: hidden;border:2px solid #dcdcdc;">
  <img src="../Images/img3.jpg" style="width: 250px; height: 200px;" />
</div>
function preview(img, selection) {
if (!selection.width || !selection.height)
return; var scaleX = 250 / selection.width;
var scaleY = 200 / selection.height;
var hei = $('#photo').height();
var wid = $('#photo').width();
$('#preview img').css({
width: Math.round(scaleX * wid),
height: Math.round(scaleY * hei),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
} $(function () {
$('#photo').imgAreaSelect({
//aspectRatio: '1:1',
handles: true,
fadeSpeed: 200, onSelectChange: preview
});
});

如果在jQuery对象里有不止有一个img元素,那么这个插件会对里面的元素逐个应用此方法。其实这个方法不仅仅应用于img元素,它支持任何块级元素(比如有图像背景的div元素)

实例效果图:

3、实例解析

效果图是通过onSelectChange()回调函数实现选择区域预览的效果。由于预览窗口是250x200px的,因此当截图窗口小于250px时,预览图会放大;当截图窗口大于250px时,预览图会缩小。

在preview()函数中,首先就定义了scaleX与scaleY,它们的内容就是250/selection.width(或height) ,也就是当selection.width小于250时,这个因子起放大作用,反之起缩小作用。

特别值得注意:回调函数中实际图的宽高(要根据实际情况调整!),回调函数中新图的宽高这些参数必须设置正确、否则会出现 选择偏差。(因为我自己的宽高是不定的,所以我是获取的)

 
 
 

jQueryh插件imgareaselect的更多相关文章

  1. jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...

  2. 关于jQuery插件imgAreaSelect基础讲解

    关于ImgAreaSelect,  是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳.图片编辑等~~来具体看一下 1.先下载imgAreaSelect插件 下载地址: 英文:h ...

  3. jQuery插件ImgAreaSelect 实例讲解二

    在上一篇随笔http://www.cnblogs.com/chenguanai/p/6883401.html中,已经了解了头像的上传预览和裁剪功能:那么这次就再看一下imgareaselect的裁剪功 ...

  4. JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)

    前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下:       一.fla ...

  5. Java+jquery实现裁剪图片上传到服务器

    大体分两步: 1.利用jquery裁剪图片,把裁剪到的几个点传入后端 2.利用前端传入的几个点,来裁剪图片 首先,用到一个jquery的插件 imgAreaSelect 实例及插件下载地址:http: ...

  6. ASP.NET MVC 网站开发总结(三) ——图片截图上传

    本着简洁直接,我们就直奔主题吧,这里需要使用到一个网页在线截图插件imgareaselect(请自行下载). 前台页面: <!DOCTYPE html> <html> < ...

  7. JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)

    需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...

  8. jQuery 图片剪裁插件使用之 imgAreaSelect

    插件主页:http://odyniec.net/projects/imgareaselect/ 官方网站上说明支持的浏览器:The plugin works in all major browsers ...

  9. 利用jquery的imgAreaSelect插件实现图片裁剪示例

    http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html 将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借 ...

随机推荐

  1. mui getJSON实现jsonp跨域

    //刚开始做APP的时候,后台给的方式是jsonp,然后就百度mui框架的jsonp跨域,看了好多文章,都说可以支持,但是大部分都是直接把别人复制来的,都不知道是不是真的能支持,做好打包完的时候,下载 ...

  2. java多线程中注入Spring对象问题

    web应用中java多线程并发处理业务时,容易抛出NullPointerException. 原因: 线程中的Spring Bean没有被注入.web容器在启动时,没有提前将线程中的bean注入,在线 ...

  3. 绕过D盾的php一句话

    d_dun.php <?php $a = '小狗狗你好啊'; $b = '小盾盾你好啊'; foreach ($_REQUEST as $key => $value) { $$key = ...

  4. Mybatis MapperScannerConfigurer 自动扫描 将Mapper接口生成代理注入到Spring

    Mybatis MapperScannerConfigurer 自动扫描 将Mapper接口生成代理注入到Spring 非原创[只为记录],原博文地址:https://www.cnblogs.com/ ...

  5. 2019.03.25 NOIP训练 匹配(match)(贪心)

    题意简述: 思路: 直接考虑把人和物品都看成二维平面上面的a,ba,ba,b两类点,然后一个aaa和bbb匹配的条件是xa≤xb&&ya≤ybx_a\le x_b\&\& ...

  6. 关于Data URI

    [新增]:http://www.webhek.com/post/data-url.html 引子:在研究FileReader时,有个方法readAsDataURL;然后看到打印出来的东西类似于如下:[ ...

  7. AIX X11卡顿严重

    在AIX上安装数据库,使用xshell开启dbca,发现卡顿严重,数据包也时断时续,排除掉网络问题,发现字符集采用的是中文,发现ftp服务业异常,将字符集修改成英语,重启机器,问题解决: 修改如下: ...

  8. django建立管理系统之五----单页ajax数据交互

    ajax数据提交: 需求: 1. 点击ajax方式提交后数据提交到后台数据库,并且在前台实现数据更新 a.可以用刷新页面来实现数据页面的更新 对应的html,实现局部刷新(可以用刷新页面实现,例如 $ ...

  9. 下划线“_”在oracle中不是单纯的表示下划线的意思,而是表示匹配单一任何字符!

    [解决办法]1.使用 escape() 函数escape关键字经常用于使某些特殊字符,如通配符:'%','_'转义为它们原来的字符的意义,被定义的转义字符通常使用'\',但是也可以使用其他的符号.例如 ...

  10. CSS3——animation的基础(轮播图)

    作为前端刚入门的小菜鸟,只想记录一下每天的小收获 对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的 ...