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. Windows端口开放

    1.查看:cmd->netstat -na: 2.测试:cmd->telnet [ip] [port]: 3.开启:防火墙新建规则.

  2. poi实现Excel文件的读取

    1.前端代码 $("#upload").on('click', function() { var formData = new FormData(); var name = $(& ...

  3. 2019.03.09 bzoj5371: [Pkusc2018]星际穿越(主席树)

    传送门 题意简述: 给一个序列,对于第iii个位置,它跟[limi,i−1][lim_i,i-1][limi​,i−1]这些位置都存在一条长度为111的无向边. 称dist(u,v)dist(u,v) ...

  4. win10更新永久关闭

    最烦开发的时候windows来个更新 http://www.ghost580.com/win10/2016-10-21/17295.html

  5. npm: 权限阻止修复

    在使用 npm install 时,总提示: Error: EACCES: permission denied 今天通过这个命令设置了权限解决了问题: sudo chown -R $(whoami) ...

  6. TensorFlow学习笔记1

    1.daocloud 拉取 docker镜像 docker pull daocloud.io/daocloud/tensorflow:latest 镜像位置: /Users/{YourUserName ...

  7. java 保证程序安全退出

    以前在开发时只知道依靠数据库事务来保证程序关闭时数据的完整性. 但有些时候一个业务上要求的原子操作,不一定只包括数据库,比如外部接口或者消息队列.此时数据库事务就无能为力了. 这时我们可以依靠java ...

  8. poj 1050 最大子矩阵

    a11   a12   a13   a14   a15 a21   a22   a23   a24   a25 a31   a32   a33   a34   a35 a41   a42   a43  ...

  9. Android JNI 学习(十):String Operations Api & Other Apis

    一.String Operations(字符串操作) 1. NewString jstring NewString(JNIEnv *env, const jchar *unicodeChars, js ...

  10. Day8:html和css

    Day8:html和css 显示和隐藏: display: none 为 无,隐藏元素 display: block 为 显示元素 转换为块级元素 visibility: visible 显示 vis ...