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. 4月23日 db 命令操作 和表操作

    1内容回顾: # 补充的知识点 # server端肯定是确定下来的 # mysql的客户端 # mysql.exe 直接在命令行就可以运行的 (学习阶段用) # navicat等可视化的客户端,是第三 ...

  2. ajax用户是否存在

    $(function(){ $("#username").blur(function(){ var usernameInput=$(this).val(); $.post( &qu ...

  3. Maven捆绑TestNG实现测试自动化执行、部署和调度

    一. 需求介绍 自动化测试,尤其是接口测试时,要写大量的测试用例,这些测试用例我们当然首选使用TesteNG编写,用例数量大,还涉及各种依赖包之类的问题,因此用Maven管理也是最方便最易实现的. 面 ...

  4. webpack踩坑--webpack 2.x升级至4.x

    一.安装webpack-cli,webpack@4.26.1 1.npm install webpack-cli -D 2.npm install webpack@4.26.1 -D 二.踩坑 执行n ...

  5. php倒计时

    <form name="form1"> <div align="center" align="center"> &l ...

  6. DOM函数和jQuery函数的覆盖与执行顺序

    <script type="text/javascript"> window.onload = function () { alert(); } window.onlo ...

  7. shell中的常用条件判断

    -e :该“文件名”是否存在.exit-d :该文件名是否为目录.dir-f  :该文件名是否为普通文件.file -b:该文件是否为块文件.block -r :该文件是否具有可读属性 read-w ...

  8. springboot 不同环境切换不同的配置文件

    开发的流程是本地>测试>预发布>正式,所以不同的环境,肯定是不同的配置文件,所以我们需要针对不同的环境做不同的配置切换. 下面我们来说说 springboot 是怎么来切换的: 1. ...

  9. 接口测试工具之Postman笔记

    根据学习内容对Postman进行的个人总结,对于Postman说明.安装方法等说明性文字就不赘述了. 下面是页面中元素的和输入说明: New collection:集合可以把同一平台.系统,或功能的接 ...

  10. Docker基础知识介绍

    本节内容 1.  Docker概述 2.  Docker的安装 3.  Docker基本使用 4.  Docker相关命令汇总 5.  Docker概念理解 一  Docker概述 Docker是什么 ...