关键词：
上一节随笔中，我们已经知道了关于jQuery插件ImgAreaSelect基本的知识；那么现在看一下实例：
首先，要知道我们应该实现什么功能？
（1）图片能够实现上传预览功能
（2）拖拽裁剪图片，使其能够显示裁剪后的区域
（3）显示要裁剪区域的坐标
其次，该如何引用该插件呢？
那就具体看一下吧！
第一步：先将样式和文件包引入（根据你自己的位置引入）
<!--引入imgareaselect的css样式--> <link rel="stylesheet" type="text/css" href="../jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" /> <!--引入jquery包--> <script type="text/javascript" src="../jquery-1.11.2.min.js"></script> <!--引入imgareaselect的js文件--> <script type="text/javascript" src="../jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script>
第二步：先用div布局样式,如下图所示
<body>
<div style="float:left; width:300px;">
<p>亲，请上传图片并裁剪</p>
<div style="width:300px; height:300px;float: left;">
<!--原图-->
<img id="uploadPreview"/>
<input id="uploadImage" type="file" name="photoimage" class="fimg1" onchange="PreviewImage();" /> <!--//对这个按钮加一个事件-->
</div>
</div>
<div style="float:left; width:300px;">
<p style="font-size:110%; font-weight:bold; padding-left:0.1em;">
选区预览
</p>
<div style="margin:0 1em; width:100px; height:100px;border: 1px solid black;">
<div id="preview" style="width:100px; height:100px; overflow:hidden;">
<!--裁剪后的图片-->
<img id="tp" style="width:200px; height:200px;">
</div>
</div>
<!--做一个表格用来放选取图片的坐标-->
<table style="margin-top:1em;">
<thead>
<tr>
<th colspan="2" style="font-size:110%; font-weight:bold; text-align:left; padding-left: 0.1em;"> 坐标</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:10%;"><b>X<sub>1</sub>:</b></td>
<td style="width:30%;"><input type="text" id="x1" value="-" /></td>
</tr>
<tr>
<td><b>Y<sub>1</sub>:</b></td>
<td><input type="text" id="y1" value="-" /></td>
</tr>
<tr>
<td><b>X<sub>2</sub>:</b></td>
<td><input type="text" id="x2" value="-" /></td>
</tr>
<tr>
<td><b>Y<sub>2</sub>:</b></td>
<td><input type="text" id="y2" value="-" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
css样式：
<style>
#uploadPreview
{
width: 170px;
height: 170px;
background-position: center center;
background-size: cover;
border: 1px solid brown;
-webkit-box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0);
display: inline-block;
}
</style>
第三步：实现图片的上传预览效果
思路：通过input 将图片的 src传给第一个img，然后再将第一个img的src传给第二个img的src
<script>
//通过input将图片路径传给第一个img
$("#uploadImage").on("change", function(){
// 得到一个参考文件列表
var files = !!this.files ? this.files : [];
// 如果没有选择任何文件,或者没有文件读到就返回
if (!files.length || !window.FileReader) return;
// 只有进行选择的文件是一个形象
if (/^image/.test( files[0].type)){
// 创建一个新的FileReader的实例
var reader = new FileReader();
// 读取本地文件作为一个DataURL
reader.readAsDataURL(files[0]);
// 当加载时,图像数据设置为背景的div
reader.onloadend = function(){
//给第一个img添加路径
$("#uploadPreview").attr("src",this.result);
//给第二个img添加路径
$("#tp").attr("src",this.result);
//开启裁剪功能
$('#uploadPreview ').imgAreaSelect( {handles:true, fadeSpeed:200, onSelectEnd : preview});
}
}
});
</script>
这样，就能够实现如下效果：
点击浏览
点击选择 ：
第四步：实现区域选择功能
<script>
function preview(img, selection)
{
if(!selection.width || !selection.height) //判断选取区域不为空
return;
//分别取高宽比率
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
var img = new Image();
//传路径
img.src = document.getElementById('uploadPreview').src;
//给裁剪的图片定义高和宽
$('#preview img').css( {
width : Math.round(scaleX * 170), //170为第一个img的宽，不然截取的图片会有所缺失，可以自己试试
height: Math.round(scaleY * 170), //170为第一个img的高
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
//显示坐标
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
}
</script>
这样就可以实现如下效果啦~~~
到这一步就可以实现头像的上传以及裁剪功能了，当然后期还要将路径添加到数据库就更完美了~~~~
（------------------------------------------------------------------------此处应有分割线----------------------------------------------------------------------）
如果你只想实现简单的图片裁剪功能，那么可以看看下面代码，此处不做注释了~~~
当然，如果上边的代码看不太明白，也可以参照下面的这个进行修改，将图片上传预览功能添加上即可哈~~~~
效果图：（对比图片就可以知道，下面这个就只是少了浏览功能，其他完全一样）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--在HTML头部加入：-->
<link rel="stylesheet" type="text/css" href="../jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" />
<script type="text/javascript" src="../jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#photo').imgAreaSelect( {handles:true, fadeSpeed:200, onSelectEnd : preview});
});
// 如果加上aspectRatio: '1:1'，$('#photo').imgAreaSelect( {aspectRatio: '1:1',handles:true, fadeSpeed:200, onSelectEnd : preview});则选取区域固定为正方形。
function preview(img, selection)
{
//等同于var scaleX = 100 / (selection.width || 1)
//先对||前面的进行布尔运算,如果结果是true(即width存在且不是0),就使用width,否则使用||后的变量1
//也就是先检查 selection.width 有没有值，有的话就用 100 / 该值再付给 scaleX，没的话就用 100 / 1 来赋值；
if(!selection.width || !selection.height)
return;
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
//设置裁剪后图片的宽高
$('#preview img').css( {
width : Math.round(scaleX * 200),
height: Math.round(scaleY * 200),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('w').val(selection.width);
$('h').val(selection.height);
}
</script>
</head>
<body>
<div>
<!--选取的图片-->
<div style="float:left; width:70%;">
<p>
Click and drag on the image to select an area.
</p>
<div style="margin:0 0.3em; width:200px; height:200px;">
<img id="photo" src="./images/1.jpg" style="width:200px; height:200px;"/>
</div>
</div>
<!--截取的图片-->
<div style="float:left; width:30%;">
<p style="font-size:110%; font-weight:bold; padding-left:0.1em;">
Selection Preview
</p>
<div style="margin:0 1em; width:100px; height:100px;">
<div id="preview" style="width:100px; height:100px; overflow:hidden;">
<img src="./images/1.jpg" style="width:200px; height:200px;">
</div>
</div>
<table style="margin-top:1em;">
<thead>
<tr>
<th colspan="2" style="font-size:110%; font-weight:bold; text-align:left; padding-left: 0.1em;"> Coordinates</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:10%;"><b>X<sub>1</sub>:</b></td>
<td style="width:30%;"><input type="text" id="x1" value="-" /></td>
</tr>
<tr>
<td><b>Y<sub>1</sub>:</b></td>
<td><input type="text" id="y1" value="-" /></td>
</tr>
<tr>
<td><b>X<sub>2</sub>:</b></td>
<td><input type="text" id="x2" value="-" /></td>
</tr>
<tr>
<td><b>Y<sub>2</sub>:</b></td>
<td><input type="text" id="y2" value="-" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
未完待续，明天还有一个小例子~~~
it's a good day today, hope your Mrs Right is companying with you and the same as the next 520~~~if not, please insist that your Mrs Right is on the way, and maybe on next 520, you will be one of the former~~~~
转载请标明本博客地址 http://www.cnblogs.com/chenguanai/p/6883401.html#3697090
关于jquery插件imgareaselect基础讲解
关于ImgAreaSelect, 是一jQuery插件，它支持用户通过鼠标拖曳选择图片的一部分，如图片拖曳、图片编辑等~~来具体看一下1、先下载imgAreaSelect插件下载地址：英文：http://odyniec.net/projects/imgareaselect/中文：http://www.css88.com/EasyTools/ja... 查看详情
jQuery imgAreaSelect 设置具有纵横比的初始选择
】jQueryimgAreaSelect设置具有纵横比的初始选择【英文标题】：jQueryimgAreaSelectsetinitialselectionwithaspectratio【发布时间】：2013-03-1118:47:05【问题描述】：我正在使用jQuery和imgAreaSelect插件。我正在使用区域选择插件，以便用户可以在上... 查看详情
imgareaselect中文文档
...ive/2011/10/08/2201996.html 一、技术文档１、介绍 ImgAreaSelect是一jQuery插件，它支持用户通过鼠标拖曳选择图片的一部分，非常的fashion。另外，可以在这个选择图像区域的基础上应用网站的其他一些技术，比如图片拖曳、... 查看详情
javascript图片裁剪
1.jquery图片裁剪库选择Jcrop：http://deepliquid.com/content/Jcrop.htmlimgareaselect：http://odyniec.net/projects/imgareaselect/CropZoom：https://github.com/cropzoom/cropzoom可供选择的jQuery插件许多，这里选择imgareaselect进行具体演 查看详情
使用imgareaselect辅助后台进行图片裁剪
...的IE浏览器，所以不得不使用后台进行裁剪。这次使用到imgareaselect?插件获取须要裁剪区域的坐标。再由后台进行裁剪操作。先上个效果图再说可是这里有一个坑就是上传的图片过大，可能会造成裁剪的区域跟插件中显示的不一... 查看详情
缩放图像上的 imgareaselect 预览无法正常工作
】缩放图像上的imgareaselect预览无法正常工作【英文标题】：imgareaselectonscaledimagewithpreviewnotworkingproperly【发布时间】：2014-02-2806:06:05【问题描述】：我一直在尝试让imgareaselect插件在缩放后的图像上工作，使用cssmax-width:100%和max-hei... 查看详情
jquery.uploadify文件上传组件实例讲解
1、jquery.uploadify简介在ASP.NET中上传的控件有很多，比如.NET自带的FileUpload，以及SWFUpload，Uploadify等等，尤其后面两个控件的用户体验比较好，无刷新，带上传进度等等。在最近的短信平台开发中，使用Uploadify进行文件上传。Uploadi... 查看详情
多个实例上的 jQuery 插件设置
】多个实例上的jQuery插件设置【英文标题】：jQueryPluginsettingsonmultipleinstances【发布时间】：2011-12-2909:34:56【问题描述】：我在一个jquery插件的多个实例上的设置有问题。如果我多次转换我的插件并在onclick绑定上提醒它们，它总... 查看详情
imgAreaSelect + 即时更改 aspectRatio
】imgAreaSelect+即时更改aspectRatio【英文标题】：imgAreaSelect+changingaspectRatioonthefly【发布时间】：2012-03-2022:05:14【问题描述】：我已经为这个问题苦苦挣扎了一段时间。到目前为止我找不到任何答案/解决方案，我希望你们中的一个... 查看详情
销毁后无法重新实例化 jQuery 插件
】销毁后无法重新实例化jQuery插件【英文标题】：CannotreinstantiatejQuerypluginafterdestroy【发布时间】：2020-05-0500:53:06【问题描述】：我正在制作自己的jquery插件，但在销毁插件后无法重新启动它。为了清楚起见，我已将代码简化为... 查看详情
如何在单个页面上有多个 jQuery 插件实例？
】如何在单个页面上有多个jQuery插件实例？【英文标题】：HowtohavemultipleinstancesofjQuerypluginonsinglepage?【发布时间】：2010-12-0914:37:47【问题描述】：我正在编写一个简单的jQuery插件，但是我无法在一个页面上使用多个实例。例如，... 查看详情
如何使用 jQuery 查找插件的所有实例？
】如何使用jQuery查找插件的所有实例？【英文标题】：HowdoIfindallinstancesofapluginusingjQuery?【发布时间】：2010-09-1712:29:04【问题描述】：我为自己创建了一个jQuerywee插件，它负责显示、隐藏和提交表单以进行就地编辑。目前我在一... 查看详情
jQuery插件多个实例未接收默认设置
】jQuery插件多个实例未接收默认设置【英文标题】：jQuerypluginmultipleinstancesnotreceivingdefaultsettings【发布时间】：2012-03-0305:01:57【问题描述】：我目前正在编写一个插件，并且通过搜索***遇到并发出了问题，但不知道如何编码。这... 查看详情
jquery插件实例
先说明下应用场景，通过可配项的配置和默认项覆盖，获取指定的需求数据，填充到指定的位置（两个指定其实都是可配的）(function($){$.fn.extend({getOneNews:function(opt){//获取单条新闻信息vardefaults={newsId:"",};varoptions=$.extend(defaults,opt)... 查看详情
两个jquery编写插件实例(代码片段)
封装基于jq弹窗插件 相信码友们对于$.fn.extexd();$.extend()以及$.fn.custom和$.custom都有一定的了解；我阐述一下我自己对于$.fn.custom和$.custom的理解、有理解错误或是有更好的建议直接喷我就好！下面咱们进行简单插件的封装；Jquer... 查看详情
jquery常用插件与jquery使用validation插件实现表单验证实例(代码片段)
jQuery常用插件1，jQuery特别容易扩展，开发者可以基于jQuery开发一些扩展动能2，插件:http://plugins.jquery.com3，超厉害的插件：validation、pickadate、 Echarts、chosen、（编辑器插件） ckeditor在百度上都可以直接搜索表单校验jQuery插... 查看详情
java版-jquery上传插件uploadify使用实例
摘自：http://itindex.net/detail/47160-java-jquery-%E4%B8%8A%E4%BC%A0运行效果：包结构图： 后台JAVA逻辑：packagecom.bijian.study;importjava.io.File;importjava.io.IOException;importjava.util.Iterator;importjava 查看详情
jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的，实际使用到项目中的时候，与我们使用的ace-admin（基于bootstrap）存在样式冲突，导致下拉框的样式发生变化。为了界面的美观，不得已查资料寻找另外的插件。使用jquer... 查看详情