jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
(编辑：jimmy 日期: 2024/11/16 浏览：3 次 )
上一节随笔中，我们已经知道了关于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="/UploadFiles/2021-04-02/jquery-1.11.2.min.js">第二步：先用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 "#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" rel="external nofollow" rel="external nofollow" /> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.11.2.min.js">以上所述是小编给大家介绍的jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
下一篇：Angular2 之 路由与导航详细介绍
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。