jQuery插件ImgAreaSelect如何实现头像上传预览和裁剪功能

小编给大家分享一下jQuery插件ImgAreaSelect如何实现头像上传预览和裁剪功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

创新互联专业为企业提供石柱土家族网站建设、石柱土家族做网站、石柱土家族网站设计、石柱土家族网站制作等企业网站建设、网页设计与制作、石柱土家族企业网站模板建站服务，十余年石柱土家族做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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

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

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

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

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

那就具体看一下吧！

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

第二步：先用div布局样式,如下图所示


 
 亲，请上传图片并裁剪

选区预览

$(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); }

Click and drag on the image to select an area.

Selection Preview

Coordinates X₁:

Y₁:

X₂:

Y₂:

重庆分公司，新征程启航

jQuery插件ImgAreaSelect如何实现头像上传预览和裁剪功能

其他资讯