jquery裁剪图片_只需要调用jquery库即可_PC/移动端都可使用_复制即用非常方便
只需要调用jquery库即可，不需要其它插件，PC/移动端都可使用。
可在avatarcrop.js内设置以下属性：
1、上传文件的大小限制 2、容器大小、默认裁剪区域大小 3、裁剪区域之外的透明度百分比 4、PC端允许操作(绘制、移动、拉伸)的鼠标键值 5、是否禁用右键显示菜单 6、图片上传超时时间(避免上传文件后缀名被篡改导致图片无法加载)
代码内没有添加裁剪区域等宽高的功能，还得加不少判定，懒得弄了
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" /> <title>jquery图片裁剪</title> <link rel="stylesheet" href="avatarcrop.css" /> <script src="https://www.skdy.cc/custom/style/skdy.min.js" type="text/javascript" charset="utf-8"><!--导入jquery包--></script> <script src="avatarcrop.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div style="max-width: 300px;padding: 10px;margin: 15px auto;background: #ddd;border: 1px solid #AAA;"> <div class="avatarSel"><button>选择图片</button><small></small></div> <input type="file" id="avatarSel" name="avatarFile" style="display: none;"> <div id="avatar"></div> </div> </body> </html>
avatarcrop.css
*{margin:0;padding:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.avatarSel{margin:5px 0;height:32px}.avatarSel button{float:left;display:block;height:100%;padding:0 5px;color:#000;background:#dfdfdf;text-align:center;border:1px solid #999;box-sizing:border-box}.avatarSel small{overflow:hidden;float:left;display:block;max-width:200px;font-size:12px;padding-left:3px;color:#900;line-height:32px;white-space:nowrap;text-overflow:ellipsis}#avatar{position:relative}.loading{z-index:99;position:absolute;top:0;left:0;width:100%;height:100%;background:#333 url(https://www.skdy.cc/skin/default/images/loading.gif) no-repeat center}.uploadShow{position:relative;width:100%;height:100%;background:rgba(1,1,1,.35)}.avatarImg{position:absolute;top:0;bottom:0;left:0;right:0;display:block;max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;border:0}.avatarCropBox{display:none;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}.avatarShow{z-index:6;position:absolute;overflow:hidden}.avatarShow img{position:absolute}.avatarCrop{position:relative;width:100%;height:100%}.avatarcropBg{z-index:8;position:absolute;left:0;top:0;width:100%;height:100%;cursor:crosshair}.avatarcrop{z-index:9;position:absolute;cursor:move}.cropArea{z-index:19;position:absolute;top:0;left:0;width:100%;height:100%;border-color:#000;border-width:0;border-style:dashed;box-sizing:border-box}.areaMove{z-index:20;position:absolute;top:0;left:0;width:100%;height:100%}.areaLine{z-index:30;position:absolute}.cropTopline{top:0;left:0;width:100%;height:9px;margin-top:-5px;cursor:n-resize}.cropBttmline{bottom:0;left:0;width:100%;height:9px;margin-bottom:-5px;cursor:s-resize}.cropLtline{top:0;left:0;width:9px;height:100%;margin-left:-5px;cursor:w-resize}.cropRtline{top:0;right:0;width:9px;height:100%;margin-right:-5px;cursor:e-resize}.cropvline{width:100%;height:1px;margin-top:4px;background:#fff url(https://www.skdy.cc/skin/default/images/cropline.gif);opacity:.4}.crophline{width:1px;height:100%;margin-left:4px;background:#fff url(https://www.skdy.cc/skin/default/images/cropline.gif);opacity:.4}.areaBox{z-index:40;position:absolute;width:9px;height:9px;background:#333;border:1px solid #dfdfdf;box-sizing:border-box;opacity:.5}.cropLT{left:0;top:0;margin-top:-5px;margin-left:-5px;cursor:nw-resize}.cropRT{right:0;top:0;margin-top:-5px;margin-right:-5px;cursor:ne-resize}.cropLB{left:0;bottom:0;margin-bottom:-5px;margin-left:-5px;cursor:sw-resize}.cropRB{right:0;bottom:0;margin-bottom:-5px;margin-right:-5px;cursor:se-resize}.cropTC{left:0;right:0;top:0;margin:-5px auto 0;cursor:n-resize}.cropBC{left:0;right:0;bottom:0;margin:0 auto -5px;cursor:s-resize}.cropLC{left:0;top:0;bottom:0;margin:auto 0 auto -5px;cursor:w-resize}.cropRC{right:0;top:0;bottom:0;margin:auto -5px auto 0;cursor:e-resize}
avatarcrop.js
$(function(){
//容器宽度
var containerW=300;
//容器高度
var containerH=300;
//裁切区域默认宽度
var autoW=100;
//裁切区域默认高度
var autoH=100;
//裁切区域之外透明度百分比
var opacity=40;
//限制上传文件的最大为 3000 Kb
var maxsize=3000;
//是否禁用右键显示菜单，true为禁用，false为不禁用
var disablemenu=true;
//PC 端允许操作(区域绘制、移动、拉伸)的鼠标键值，逗号隔开，[1]左键，[1,2]左键+滚动轮，[1,2,3]左键+滚轮+右键
var allowmkey=[1];
//图片上传超时时间为5秒，10为1秒，超时则停止执行
var loadtimeout=50;
var drawing=false;var moving=false;var resizing=false;var resizefrom=false;var global=$(document);var uploadfile=global.find("#avatarSel");var showtip=global.find(".avatarSel small");var container=global.find("#avatar");
const preventMove=(e)=>{e.preventDefault();};function untouchmove(){document.body.addEventListener('touchmove',preventMove,{passive: false});};function touchmove(){document.body.removeEventListener('touchmove',preventMove,{passive: false})};global.bind("contextmenu",function(e){if(disablemenu){return false;}});global.on("click",".avatarSel button",function(){uploadfile.trigger('click');});function clearavatar(){container.removeAttr("style");container.html('');};
uploadfile.change(function(){showtip.html("");if(this.files[0]){var typearray = ["IMAGE"];var avatarfile = this.files[0];var filename = avatarfile.name;var filetype = avatarfile.type.split('/')[0].toUpperCase();var avatarsize = avatarfile.size;avatarurl = URL.createObjectURL(avatarfile);var loadtime=0;if($.inArray(filetype,typearray)=='-1'){clearavatar();showtip.html("文件格式有误");return false;}if(avatarsize>maxsize*1024){clearavatar();showtip.html("文件超出 <b>"+Math.ceil((avatarsize-maxsize*1024)/1024)+"</b> Kb");return false;};showtip.html(filename);
container.css({"width":containerW+"px","height":containerH+"px"});container.html('<div class="uploadShow"><div class="avatarCropBox"><div class="avatarCrop"><div class="avatarShow"></div><div class="avatarcropBg"></div><div class="avatarcrop"><div class="cropArea"><div class="areaMove"></div><div class="areaLine cropTopline"><div class="cropvline"></div></div><div class="areaLine cropBttmline"><div class="cropvline"></div></div><div class="areaLine cropLtline"><div class="crophline"></div></div><div class="areaLine cropRtline"><div class="crophline"></div></div><div class="areaBox cropTC"></div><div class="areaBox cropBC"></div><div class="areaBox cropLC"></div><div class="areaBox cropRC"></div><div class="areaBox cropLT"></div><div class="areaBox cropRT"></div><div class="areaBox cropLB"></div><div class="areaBox cropRB"></div></div></div></div></div><div class="loading"></div><img src="'+avatarurl+'" class="avatarImg"/></div>');
avatarload_t = setInterval(function(){loadtime++;avatarload = new Image();avatarload.src=global.find(".avatarImg").attr("src");if(avatarload.complete){clearInterval(avatarload_t);setTimeout(function(){avatarfload();global.find(".loading").remove();},500);}else{if(loadtime>=loadtimeout){clearInterval(avatarload_t);clearavatar();showtip.html("文件上传超时");return false;}}},100);}else{clearavatar();}});
function avatarfload(){var avatar=global.find(".avatarImg");var croparea=global.find(".avatarcrop");var hdavatar=global.find(".avatarShow");var avatarW=avatar[0].getBoundingClientRect().width;var avatarH=avatar[0].getBoundingClientRect().height;var avatarStartX=avatar.offset().left;var avatarStartY=avatar.offset().top;var avatarEndX=avatarStartX+avatarW;var avatarEndY=avatarStartY+avatarH;var drawStartX=0;var drawStartY=0;var moveStartX=0;var moveStartY=0;var moveLeft=0;var moveTop=0;var areaMaxLeft=0;var areaMaxTop=0;var resizeStartX=0;var resizeStartY=0;var resizeMinX=0;var resizeMaxX=0;var resizeMinY=0;var resizeMaxY=0;var areaAutoW=0;var areaAutoH=0;var areaToTop=0;var areaToLeft=0;autoW = autoW>avatarW?avatarW:autoW;autoH = autoH>avatarH?avatarH:autoH;$(window).resize(function(){avatarStartX = avatar.offset().left;avatarStartY = avatar.offset().top;avatarEndX = avatarStartX + avatarW;avatarEndY = avatarStartY + avatarH;});
global.find(".avatarCropBox").css({"width":avatarW+"px","height":avatarH+"px","display":"block"});croparea.css({"left":(avatarW-autoW)/2+"px","top":(avatarH-autoH)/2+"px","width":autoW+"px","height":autoH+"px"});hdavatar.css({"left":(avatarW-autoW)/2+"px","top":(avatarH-autoH)/2+"px","width":autoW+"px","height":autoH+"px"});avatar.css({"opacity":opacity/100});
hdavatar.append('<img style="left:-'+croparea.position().left+'px;top:-'+croparea.position().top+'px;width:'+avatarW+'px;height:'+avatarH+'px" src="'+avatar.attr("src")+'">');
global.find(".avatarcropBg").bind("mousedown touchstart",function(e){if(e.which&&$.inArray(e.which,allowmkey)=='-1'){return false;};drawStartX=e.pageX||e.originalEvent.changedTouches[0].pageX;drawStartY=e.pageY||e.originalEvent.changedTouches[0].pageY;if(drawStartX>=avatarStartX&&drawStartX<=avatarEndX&&drawStartY>=avatarStartY&&drawStartY<=avatarEndY){croparea.css({"left":drawStartX-avatarStartX+"px","top":drawStartY-avatarStartY+"px","width":"0","height":"0"});global.find(".cropArea").hide();drawing=true;untouchmove();avatarResize();avatar.css({"opacity":1});}});
global.find(".areaMove").bind("mousedown touchstart",function(e){if(e.which&&$.inArray(e.which,allowmkey)=='-1'){return false;};moveStartX=e.pageX||e.originalEvent.changedTouches[0].pageX;moveStartY=e.pageY||e.originalEvent.changedTouches[0].pageY;areaLeft=croparea.position().left;areaTop=croparea.position().top;areaW=croparea.outerWidth();areaH=croparea.outerHeight();areaMaxLeft=avatarW-areaW;areaMaxTop=avatarH - areaH;moving=true;untouchmove();});
global.bind("mouseup touchend",function(){if(drawing){drawing=false;touchmove();}if(moving){moving=false;touchmove();}if(resizing){resizing=false;touchmove();}});
global.bind("mousemove touchmove",function(e){if(drawing){areaDraw(areaDrawX=e.pageX||e.originalEvent.changedTouches[0].pageX,areaDrawY=e.pageY||e.originalEvent.changedTouches[0].pageY);}if(moving){areaMove(areaMoveX=e.pageX||e.originalEvent.changedTouches[0].pageX,areaMoveY=e.pageY||e.originalEvent.changedTouches[0].pageY);}if(resizing){areaResize(resizeX=e.pageX||e.originalEvent.changedTouches[0].pageX,resizeY=e.pageY||e.originalEvent.changedTouches[0].pageY);}});
global.find(".cropTopline,.cropTC").bind("mousedown touchstart",function(e){resizefrom = 'tline';areaval(e);resizeMinY = resizeStartY-areaToTop;resizeMaxY = resizeStartY+areaAutoH-20;});global.find(".cropBttmline,.cropBC").bind("mousedown touchstart",function(e){resizefrom = 'bline';areaval(e);resizeMinY = resizeStartY-areaAutoH+20;resizeMaxY = resizeStartY+avatarH-areaToTop-areaAutoH;});global.find(".cropLtline,.cropLC").bind("mousedown touchstart",function(e){resizefrom = 'lline';areaval(e);resizeMinX = resizeStartX-areaToLeft;resizeMaxX = resizeStartX+areaAutoW-20;});global.find(".cropRtline,.cropRC").bind("mousedown touchstart",function(e){resizefrom = 'rline';areaval(e);resizeMinX = resizeStartX-areaAutoW+20;resizeMaxX = resizeStartX+avatarW-areaToLeft-areaAutoW;});
global.find(".cropLT").bind("mousedown touchstart",function(e){resizefrom = 'ltline';areaval(e);resizeMinX = resizeStartX-areaToLeft;resizeMaxX = resizeStartX+areaAutoW-20;resizeMinY = resizeStartY-areaToTop;resizeMaxY = resizeStartY+areaAutoH-20;});global.find(".cropLB").bind("mousedown touchstart",function(e){resizefrom = 'lbline';areaval(e);resizeMinX = resizeStartX-areaToLeft;resizeMaxX = resizeStartX+areaAutoW-20;resizeMinY = resizeStartY-areaAutoH+20;resizeMaxY = resizeStartY+avatarH-areaToTop-areaAutoH;});
global.find(".cropRT").bind("mousedown touchstart",function(e){resizefrom = 'rtline';areaval(e);resizeMinX = resizeStartX-areaAutoW+20;resizeMaxX = resizeStartX+avatarW-areaToLeft-areaAutoW;resizeMinY = resizeStartY-areaToTop;resizeMaxY = resizeStartY+areaAutoH-20;});global.find(".cropRB").bind("mousedown touchstart",function(e){resizefrom = 'rbline';areaval(e);resizeMinX = resizeStartX-areaAutoW+20;resizeMaxX = resizeStartX+avatarW-areaToLeft-areaAutoW;resizeMinY = resizeStartY-areaAutoH+20;resizeMaxY = resizeStartY+avatarH-areaToTop-areaAutoH;});
function areaDraw(areaDrawX,areaDrawY){areaDrawX=areaDrawX<avatarStartX?avatarStartX:areaDrawX&&areaDrawX>avatarEndX?avatarEndX:areaDrawX;areaDrawY=areaDrawY<avatarStartY?avatarStartY:areaDrawY&&areaDrawY>avatarEndY?avatarEndY:areaDrawY;areaWidth=Math.abs(areaDrawX-drawStartX);areaHeight=Math.abs(areaDrawY-drawStartY);areaLeft=areaDrawX>drawStartX?drawStartX-avatarStartX:drawStartX-avatarStartX+areaDrawX-drawStartX;areaTop=areaDrawY>drawStartY?drawStartY-avatarStartY:drawStartY-avatarStartY+areaDrawY-drawStartY;croparea.css({"left":areaLeft+"px","top":areaTop+"px","width":areaWidth+"px","height":areaHeight+"px"});global.find(".cropArea").show();avatarResize();};
function areaMove(areaMoveX,areaMoveY){moveW=areaMoveX-moveStartX;moveH=areaMoveY-moveStartY;moveToLeft=areaLeft+moveW<0?0:areaLeft+moveW&&areaLeft+moveW>=areaMaxLeft?areaMaxLeft:areaLeft+moveW;moveToTop=areaTop+moveH<0?0:areaTop+moveH&&areaTop+moveH>=areaMaxTop?areaMaxTop:areaTop+moveH;croparea.css({"left":moveToLeft+"px","top":moveToTop+"px"});avatarResize();};
function areaval(e){if(e.which&&$.inArray(e.which,allowmkey)=='-1'){return false;};resizeStartX = e.pageX||e.originalEvent.changedTouches[0].pageX;resizeStartY = e.pageY||e.originalEvent.changedTouches[0].pageY;areaAutoW = croparea.width();areaAutoH = croparea.height();areaToTop = croparea.position().top;areaToLeft = croparea.position().left;resizing = true;untouchmove();};
function areaResize(resizeX,resizeY){resizeX = resizeX<1?1:resizeX;resizeX = resizeX>resizeMaxX?resizeMaxX:resizeX&&resizeX<=resizeMinX?resizeMinX:resizeX;resizeY = resizeY>resizeMaxY?resizeMaxY:resizeY&&resizeY<=resizeMinY?resizeMinY:resizeY;
if(resizefrom=='tline'){resizeH = resizeStartY-resizeY;croparea.css({"top":areaToTop-resizeH+"px","height":resizeH+areaAutoH+"px"});}if(resizefrom=='bline'){resizeH = resizeY-resizeStartY;croparea.css({"height":resizeH+areaAutoH+"px"});}if(resizefrom=='lline'){resizeW = resizeStartX-resizeX;croparea.css({"left":areaToLeft-resizeW+"px","width":resizeW+areaAutoW+"px"});}if(resizefrom=='rline'){resizeW = resizeX-resizeStartX;croparea.css({"width":resizeW+areaAutoW+"px"});}if(resizefrom=='ltline'){resizeW = resizeStartX-resizeX;resizeH = resizeStartY-resizeY;croparea.css({"left":areaToLeft-resizeW+"px","top":areaToTop-resizeH+"px","width":resizeW+areaAutoW+"px","height":resizeH+areaAutoH+"px"});};
if(resizefrom=='lbline'){resizeW = resizeStartX-resizeX;resizeH = resizeY-resizeStartY;croparea.css({"left":areaToLeft-resizeW+"px","width":resizeW+areaAutoW+"px","height":resizeH+areaAutoH+"px"});}if(resizefrom=='rtline'){resizeW = resizeX-resizeStartX;resizeH = resizeStartY-resizeY;croparea.css({"top":areaToTop-resizeH+"px","width":resizeW+areaAutoW+"px","height":resizeH+areaAutoH+"px"});}if(resizefrom=='rbline'){resizeW = resizeX-resizeStartX;resizeH = resizeY-resizeStartY;croparea.css({"width":resizeW+areaAutoW+"px","height":resizeH+areaAutoH+"px"});}avatarResize();};
function avatarResize(){avatar.css({"opacity":opacity/100});avatart = croparea.position().top;avatarl = croparea.position().left;avatarw = croparea[0].getBoundingClientRect().width;avatarh = croparea[0].getBoundingClientRect().height;hdavatar.css({"top":avatart+"px","left":avatarl+"px","width":avatarw+"px","height":avatarh+"px"});hdavatar.find("img").css({"top":-avatart+"px","left":-avatarl+"px"});};};
})
上一篇：笔记 - 日常问题记录