首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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

Posted in jQuery onMay 26, 2017

上一节随笔中，我们已经知道了关于jQuery插件ImgAreaSelect基本的知识；那么现在看一下实例：

首先，要知道我们应该实现什么功能？

（1）图片能够实现上传预览功能

（2）拖拽裁剪图片，使其能够显示裁剪后的区域

（3）显示要裁剪区域的坐标

其次，该如何引用该插件呢？

   那就具体看一下吧！

第一步：先将样式和文件包引入（根据你自己的位置引入）

<!--引入imgareaselect的css样式-->
<link rel="stylesheet" type="text/css" href="../jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" rel="external nofollow" rel="external nofollow" />
<!--引入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>

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

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>

这样，就能够实现如下效果：

点击浏览

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

点击选择 ：

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

第四步：实现区域选择功能

<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>

这样就可以实现如下效果啦~~~

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

到这一步就可以实现头像的上传以及裁剪功能了，当然后期还要将路径添加到数据库就更完美了~~~~

 （------------------------------------------------------------------------此处应有分割线----------------------------------------------------------------------）

如果你只想实现简单的图片裁剪功能，那么可以看看下面代码，此处不做注释了~~~

当然，如果上边的代码看不太明白，也可以参照下面的这个进行修改，将图片上传预览功能添加上即可哈~~~~

效果图：（对比图片就可以知道，下面这个就只是少了浏览功能，其他完全一样）

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

<!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" rel="external nofollow" rel="external nofollow" />
 <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>

以上所述是小编给大家介绍的jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

小鱼小鱼加油吐泡泡

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery Plupload上传插件的使用
Apr 19 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
jQuery导航条固定定位效果实例代码
May 26 #jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 #jQuery
jQuery滚动插件scrollable.js用法分析
May 25 #jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 #jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 #jQuery
jquery.masonry瀑布流效果
May 25 #jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 #jQuery
子查询(1) Centos(8)  AD域(1) nginx(76) 日志格式分析(1) 组策略(1) destoon(1) Rewrite(4) Windows server 2012(17) 伪静态(1)
You might like
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
php中的登陆login
2007/01/18 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
python 域名分析工具实现代码
2009/07/15 Python
一个基于flask的web应用诞生 组织结构调整（7）
2017/04/11 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
布里斯班女装时尚品牌：Adrift
2017/12/28 全球购物
Raleigh兰令自行车美国官网：英国凤头牌自行车
2018/01/08 全球购物
Bluebella美国官网：英国性感内衣品牌
2018/10/04 全球购物
百度软件工程师职位
2013/02/14 面试题
如何做好总经理助理
2013/11/12 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
药品促销活动方案
2014/02/14 职场文书
日化店促销方案
2014/03/26 职场文书
金融管理专业求职信
2014/07/10 职场文书
出生公证书
2015/01/23 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
JavaScript的function函数详细介绍
2021/11/20 Javascript
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL
Moment的feature导致线上bug解决分析
2022/09/23 Javascript