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

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

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

(1)图片能够实现上传预览功能

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

(3)显示要裁剪区域的坐标

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

那就具体看一下吧！

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

！-引入imgareaselect的钢性铸铁样式- link rel='样式表type='text/css' href='./jquery。imgareservice-0。9 .10/CSS/imgareserve-默认值。CSS ' rel='外部无跟随' rel='外部无跟随'/！-引入jquery包-脚本类型=' text/JavaScript ' src=' http :/jquery-1。11 .2 .量滴js /脚本！-引入imgareaselect的射流研究…文件-脚本类型=' text/JavaScript ' src=' http :/jquery。imgareservice-0。9 .10/scripts/jquery。imgareselect。打包。js '/脚本第二步：先用差异布局样式，如下图所示

body div style=' float : left ' width :300 px ' p亲，请上传图片并裁剪/p div style=' width :300 px；高度' :300像素；左侧浮动：-原图-img id=' uploadPreview '/input id=' uploadImage ' type=' file ' name=' photoimage ' class=' FIM G1 ' on change=' previveimage()；'/!- //对这个按钮加一个事件-/div/div style=' float : left；width :300 px ' p style=' font-size :110%；字体粗细：加粗；填充-左侧：0.1毫米选区预览/p div style=' margin 33600 1em；宽度宽度：100像素高度' :100像素；border: 1px纯黑；div id=' preview '样式=' width :100 px高度：100 pxoverflow:hidden！-裁剪后的图片-img id=' TP ' style=' width :200 px；'height:200px'/div /div！-做一个表格用来放选取图片的坐标-表格样式=' margin-top :1 em；'第二列=' 2 ' style=' font-size :110%；字体粗细：加粗；向左文本对齐：填充-左侧： 0.1毫米坐标/th/tr/ad t车身tr TD style=' width :10%；'xsub 1/sub :/TD TD TD style=' width :30%；'输入类型=' text ' id=' x1 ' value='-'//TD/tr tdysub 1/sub :/TD tdinput type=' text ' id=' y1 ' value='-'//TD/tr tdxsub 2/sub :/TD tdinput type=' text ' id=' y2 ' value='-'//TD/tr/tr ' x2 ' value='-'//TD/tr tdysub 2/sub :/TD tdinput type=' text ' id=' y2 ' value='-'

钢性铸铁样式：

样式# uploadPreview { width : 170 px；高度： 170像素；背景-位置：中心；背景尺寸：封面；border: 1px实心棕色；-web kit-box-shadow : 0 px 0 px rgba(0，0，0，0)；显示器：内联块；}/样式第三步：实现图片的上传预览效果

思路：通过投入将图片的科学研究委员会传给第一个img，然后再将第一个img的科学研究委员会传给第二个img的科学研究委员会

脚本/通过投入将图片路径传给第一个img$('#uploadImage ').on('change '，function(){ //得到一个参考文件列表定义变量文件=!这个文件？这个。文件：[]；//如果没有选择任何文件，或者没有文件读到就返回if(！files.length ||！窗户文件阅读器)返回；//只有进行选择的文件是一个形象if (/^image/.测试（文件[0]。type)){ //创建一个新的文件阅读器的实例var reader=new FileReader()；//读取本地文件作为一个DataURL读取器. readAsDataURL(文件[0]);//当加载时，图像数据设置为背景的div阅读器。onloadend=function(){//给第一个img添加路径$('#uploadPreview ').attr('src '，这个。结果)；//给第二个img添加路径$('#tp ').attr('src '，这个。结果)；//开启裁剪功能$('#uploadPreview ').imgareselect({ handles 3360 true，fadeSpeed:200，on selectend : preview })；} }});/script这样，就能够实现如下效果：

点击浏览

点击选择：

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

脚本函数预览(img，selection) { if(！selection.width ||！Selection.height) //判断所选区域不为空返回；//取长宽比var scaleX=100/selection . width；var Scaley=100/selection . height；var img=new Image()；//路径img . src=document . getelementbyid(' uploadpreview ')。src//定义高度和宽度$ ('# previewimg ')。CSS({ width : path。round (scalex * 170)，//170是第一个img的宽度，否则捕获的图片会丢失，所以可以试试height :math。自己圆(scaley * 170)。//170是第一个img的高边距left :-math . round(scalex * selection . x1)，边距top 3360-math . round(scaley * selection . y1)})；//显示坐标$('#x1 ')。val(selection . x1)；$('#y1 ')。val(selection . y1)；$('#x2 ')。val(selection . x2)；$('#y2 ')。val(selection . y2)；}/脚本这样可以达到以下效果~ ~ ~

在这一步，你可以上传和剪切头像。当然，以后再添加数据库的路径更完美~ ~ ~ ~

(- .

如果你只想实现简单的图像裁剪功能，可以看看下面的代码，这里不做评论~ ~ ~

当然，如果你看不懂上面的代码，也可以参考下面的修改，增加图片上传预览功能~ ~ ~ ~

效果图：(通过对比图片，可以知道下面这张只是缺少了浏览功能，其他都完全一样)

！DOCTYPE html html head meta charset=' UTF-8 ' title/title！-在超文本标记语言头部加入：- link rel='样式表type='text/css' href='./jquery。imgareservice-0。9 .10/CSS/imgareserve-默认值。CSS ' rel='外部nofollow ' rel='外部nofollow '/脚本类型=' text/JavaScript ' src=' http :/jquery-1。11 .2 .量滴js/'脚本脚本类型=' text/JavaScript ' src=' http :/jquery。imgareservice-0。9 .10/scripts/jquery。imgareselect。打包。js '/script脚本类型=' text/JavaScript ' $(文档)。就绪(函数(){ $('#photo ')).imgareselect({ handles 3360 true，fadeSpeed:200，on selectend : preview })；});//如果加上aspectRatio: ' 1:1 '，$('#photo ').im gare select({ aspelection : ' 1:1 '，handles:true，fadeSpeed:200，on selectend : preview })；则选取区域固定为正方形功能预览(img，选择){ //等同于var Scalex=100/(选择。宽度| | 1)//先对||前面的进行布尔运算，如果结果是真（即宽度存在且不是0),就使用宽度，否则使用||后的变量1 //也就是先检查选区。宽度有没有值，有的话就用100/该值再付给scaleX，没的话就用100/1 来赋值；if(！selection.width ||！selection.height)返回；var Scalex=100/选择。宽度；var Scaley=100/选择。身高；//设置裁剪后图片的宽高$(' #预览img ').CSS({ width : math。圆形(scaleX * 200)，高度：数学。四舍五入(scaleY * 200)，左边距：-数学。圆形(scaleX *选择。x1)，边距到p :-数学。圆形(scaleY *选择。y1)})；$('#x1 ').val(选择。x1)；$('#y1 ').val(选择。y1)；$('#x2 ').val(选择。x2)；$('#y2 ').val(选择。y2)；$('w ').val(选择。宽度)；$('h ').val(选择。高度)；}/脚本/头体div！-选取的图片-div style=' float : left；宽度：70%;“p单击并拖动图像以选择一个区域/p div style=' margin 33600 0.3 em；宽度width :200 px ' height :200 px ' img id=' photo ' src=' http :/images/1。jpg ' style=' width :200 px'height :200 px '/div/div！-截取的图片-div style=' float : left；宽度：30%;" p style=' font-size :110%；字体粗细：加粗；填充-左侧：0.1毫米选择预览/p div style=' margin 33600 1em；宽度width :100 px ' height :100 px ' div id=' preview ' style=' width :100 px；高度：100 pxoverflow : hidden ' img src=' http :/images/1。jpg ' style=' width :200 px高度：200px'/div /div表格样式='页边距-top :1 em；'第二列=' 2 ' style=' font-size :110%；字体粗细：加粗；向左文本对齐：填充-左侧： 0.1毫米坐标/th/tr/TD t车身tr TD style='宽度：10%；xsub 1/sub :/TD TD TD style=' width :30%；'输入类型=' text ' id=' x1 ' value='-'//TD/tr tdysub 1/sub :/TD tdinput type=' text ' id=' y1 ' value='-'//TD/tr tdxsub 2/sub :/TD tdinput type=' text ' id=' y2 ' value='-'//TD/tr/tr ' x2 ' value='-'//TD/tr tdysub 2/sub :/TD tdinput type=' text ' id=' y2 ' value='-'以上所述是小编给大家介绍的jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！