3 lines
14 KiB
JavaScript
Executable File
3 lines
14 KiB
JavaScript
Executable File
(function(root,factory){if(typeof define==="function"&&define.amd){define(["jquery","iscroll-zoom","hammer"],factory)}else{if(typeof exports==="object"){module.exports=factory(require("jquery"),require("iscroll-zoom"),require("hammer"))}else{factory(root.jQuery,root.IScroll,root.Hammer)}}}(this,function(jQuery,IScroll,Hammer){jQuery.fn.photoClip=function(option){if(!window.FileReader){alert("您的浏览器不支持 HTML5 的 FileReader API， 因此无法初始化图片裁剪插件，请更换最新的浏览器！");return}var defaultOption={width:200,height:200,file:"",view:"",ok:"",outputType:"jpg",strictSize:false,loadStart:function(){},loadComplete:function(){},loadError:function(){},clipFinish:function(){}};jQuery.extend(defaultOption,option);this.each(function(){photoClip(this,defaultOption)});return this};function photoClip(container,option){var clipWidth=option.width,clipHeight=option.height,file=option.file,view=option.view,ok=option.ok,outputType=option.outputType||"image/jpeg",strictSize=option.strictSize,loadStart=option.loadStart,loadComplete=option.loadComplete,loadError=option.loadError,clipFinish=option.clipFinish;if(outputType==="jpg"){outputType="image/jpeg"}else{if(outputType==="png"){outputType="image/png"}}var jQueryfile=jQuery(file);if(!jQueryfile.length){return}var jQueryimg,imgWidth,imgHeight,imgLoaded;jQueryfile.attr("accept","image/*");jQueryfile.change(function(){if(!this.files.length){return}if(!/image\/\w+/.test(this.files[0].type)){alert("图片格式不正确，请选择正确格式的图片文件！");return false}else{var fileReader=new FileReader();fileReader.onprogress=function(e){console.log((e.loaded/e.total*100).toFixed()+"%")};fileReader.onload=function(e){var kbs=e.total/1024;if(kbs>1024){var quality=1024/kbs;var jQuerytempImg=jQuery("<img>").hide();jQuerytempImg.load(function(){var sourceWidth=this.naturalWidth;jQuerytempImg.appendTo(document.body);var realityHeight=this.naturalHeight;jQuerytempImg.remove();delete jQuerytempImg[0];jQuerytempImg=null;var angleOffset=0;if(sourceWidth==realityHeight){angleOffset=90}var newDataURL=compressImg(this,quality,angleOffset,outputType);createImg(newDataURL)});jQuerytempImg.attr("src",this.result)}else{createImg(this.result)}};fileReader.onerror=function(e){alert("图片加载失败");loadError.call(this,e)};fileReader.readAsDataURL(this.files[0]);loadStart.call(fileReader,this.files[0])}});jQueryfile.click(function(){this.value=""});var jQuerycontainer,jQueryclipView,jQuerymoveLayer,jQueryrotateLayer,jQueryview,canvas,myScroll,containerWidth,containerHeight;init();initScroll();initEvent();initClip();var jQueryok=jQuery(ok);if(jQueryok.length){jQueryok.click(function(){clipImg()})}var jQuerywin=jQuery(window);resize();jQuerywin.resize(resize);var atRotation,curX,curY,curAngle;function imgLoad(){imgLoaded=true;jQueryrotateLayer.append(this);hideAction.call(this,jQueryimg,function(){imgWidth=this.naturalWidth;imgHeight=this.naturalHeight});hideAction(jQuerymoveLayer,function(){resetScroll()});loadComplete.call(this,this.src)}function initScroll(){var options={zoom:true,scrollX:true,scrollY:true,freeScroll:true,mouseWheel:true,wheelAction:"zoom"};myScroll=new IScroll(jQueryclipView[0],options)}function resetScroll(){curX=0;curY=0;curAngle=0;jQueryrotateLayer.css({"width":imgWidth,"height":imgHeight});setTransform(jQueryrotateLayer,curX,curY,curAngle);calculateScale(imgWidth,imgHeight);myScroll.zoom(myScroll.options.zoomStart);refreshScroll(imgWidth,imgHeight);var posX=(clipWidth-imgWidth*myScroll.options.zoomStart)*0.5,posY=(clipHeight-imgHeight*myScroll.options.zoomStart)*0.5;myScroll.scrollTo(posX,posY)}function refreshScroll(width,height){jQuerymoveLayer.css({"width":width,"height":height});jQueryclipView.append(jQuerymoveLayer);myScroll.refresh()}function initEvent(){var is_mobile=!!navigator.userAgent.match(/mobile/i);if(is_mobile){var hammerManager=new Hammer(jQuerymoveLayer[0]);hammerManager.add(new Hammer.Rotate());var rotation,rotateDirection;hammerManager.on("rotatemove",function(e){if(atRotation){return}rotation=e.rotation;if(rotation>180){rotation-=360}else{if(rotation<-180){rotation+=360}}rotateDirection=rotation>0?1:rotation<0?-1:0});hammerManager.on("rotateend",function(e){if(atRotation){return}if(Math.abs(rotation)>30){if(rotateDirection==1){rotateCW(e.center)}else{if(rotateDirection==-1){rotateCCW(e.center)}}}})}else{jQuerymoveLayer.on("dblclick",function(e){rotateCW({x:e.clientX,y:e.clientY})})}}function rotateCW(point){rotateBy(90,point)}function rotateCCW(point){rotateBy(-90,point)}function rotateBy(angle,point){if(atRotation){return}atRotation=true;var loacl;if(!point){loacl=loaclToLoacl(jQuerymoveLayer,jQueryclipView,clipWidth*0.5,clipHeight*0.5)}else{loacl=globalToLoacl(jQuerymoveLayer,point.x,point.y)}var origin=calculateOrigin(curAngle,loacl),originX=origin.x,originY=origin.y,offsetX=0,offsetY=0,parentOffsetX=0,parentOffsetY=0,newAngle=curAngle+angle,curImgWidth,curImgHeight;if(newAngle==90||newAngle==-270){offsetX=originX+originY;offsetY=originY-originX;if(newAngle>curAngle){parentOffsetX=imgHeight-originX-originY;parentOffsetY=originX-originY
|
||
}else{if(newAngle<curAngle){parentOffsetX=(imgHeight-originY)-(imgWidth-originX);parentOffsetY=originX+originY-imgHeight}}curImgWidth=imgHeight;curImgHeight=imgWidth}else{if(newAngle==180||newAngle==-180){offsetX=originX*2;offsetY=originY*2;if(newAngle>curAngle){parentOffsetX=(imgWidth-originX)-(imgHeight-originY);parentOffsetY=imgHeight-(originX+originY)}else{if(newAngle<curAngle){parentOffsetX=imgWidth-(originX+originY);parentOffsetY=(imgHeight-originY)-(imgWidth-originX)}}curImgWidth=imgWidth;curImgHeight=imgHeight}else{if(newAngle==270||newAngle==-90){offsetX=originX-originY;offsetY=originX+originY;if(newAngle>curAngle){parentOffsetX=originX+originY-imgWidth;parentOffsetY=(imgWidth-originX)-(imgHeight-originY)}else{if(newAngle<curAngle){parentOffsetX=originY-originX;parentOffsetY=imgWidth-originX-originY}}curImgWidth=imgHeight;curImgHeight=imgWidth}else{if(newAngle==0||newAngle==360||newAngle==-360){offsetX=0;offsetY=0;if(newAngle>curAngle){parentOffsetX=originX-originY;parentOffsetY=originX+originY-imgWidth}else{if(newAngle<curAngle){parentOffsetX=originX+originY-imgHeight;parentOffsetY=originY-originX}}curImgWidth=imgWidth;curImgHeight=imgHeight}}}}if(curAngle==0){curX=0;curY=0}else{if(curAngle==90||curAngle==-270){curX-=originX+originY;curY-=originY-originX}else{if(curAngle==180||curAngle==-180){curX-=originX*2;curY-=originY*2}else{if(curAngle==270||curAngle==-90){curX-=originX-originY;curY-=originX+originY}}}}curX=curX.toFixed(2)-0;curY=curY.toFixed(2)-0;setTransform(jQueryrotateLayer,curX,curY,curAngle,originX,originY);setTransition(jQueryrotateLayer,curX,curY,newAngle,200,function(){atRotation=false;curAngle=newAngle%360;curX+=offsetX+parentOffsetX;curY+=offsetY+parentOffsetY;curX=curX.toFixed(2)-0;curY=curY.toFixed(2)-0;setTransform(jQueryrotateLayer,curX,curY,curAngle);myScroll.scrollTo(myScroll.x-parentOffsetX*myScroll.scale,myScroll.y-parentOffsetY*myScroll.scale);calculateScale(curImgWidth,curImgHeight);if(myScroll.scale<myScroll.options.zoomMin){myScroll.zoom(myScroll.options.zoomMin)}refreshScroll(curImgWidth,curImgHeight)})}function initClip(){canvas=document.createElement("canvas");canvas.width=clipWidth;canvas.height=clipHeight}function clipImg(){if(!imgLoaded){alert("亲，当前没有图片可以裁剪!");return}var local=loaclToLoacl(jQuerymoveLayer,jQueryclipView);var scale=myScroll.scale;var ctx=canvas.getContext("2d");ctx.clearRect(0,0,canvas.width,canvas.height);ctx.save();if(strictSize){ctx.scale(scale,scale)}else{canvas.width=clipWidth/scale;canvas.height=clipHeight/scale}ctx.translate(curX-local.x/scale,curY-local.y/scale);ctx.rotate(curAngle*Math.PI/180);ctx.drawImage(jQueryimg[0],0,0);ctx.restore();var dataURL=canvas.toDataURL(outputType,1);jQueryview.css("background-image","url("+dataURL+")");clipFinish.call(jQueryimg[0],dataURL)}function resize(){hideAction(jQuerycontainer,function(){containerWidth=jQuerycontainer.width();containerHeight=jQuerycontainer.height()})}function loaclToLoacl(jQuerylayerOne,jQuerylayerTwo,x,y){x=x||0;y=y||0;var layerOneOffset,layerTwoOffset;hideAction(jQuerylayerOne,function(){layerOneOffset=jQuerylayerOne.offset()});hideAction(jQuerylayerTwo,function(){layerTwoOffset=jQuerylayerTwo.offset()});return{x:layerTwoOffset.left-layerOneOffset.left+x,y:layerTwoOffset.top-layerOneOffset.top+y}}function globalToLoacl(jQuerylayer,x,y){x=x||0;y=y||0;var layerOffset;hideAction(jQuerylayer,function(){layerOffset=jQuerylayer.offset()});return{x:x+jQuerywin.scrollLeft()-layerOffset.left,y:y+jQuerywin.scrollTop()-layerOffset.top}}function hideAction(jq,func){var jQueryhide=jQuery();jQuery.each(jq,function(i,n){var jQueryn=jQuery(n);var jQueryhidden=jQueryn.parents().andSelf().filter(":hidden");var jQuerynone;for(var i=0;i<jQueryhidden.length;i++){if(!jQueryn.is(":hidden")){break}jQuerynone=jQueryhidden.eq(i);if(jQuerynone.css("display")=="none"){jQueryhide=jQueryhide.add(jQuerynone.show())}}});if(typeof(func)=="function"){func.call(this)}jQueryhide.hide()}function calculateOrigin(curAngle,point){var scale=myScroll.scale;var origin={};if(curAngle==0){origin.x=point.x/scale;origin.y=point.y/scale}else{if(curAngle==90||curAngle==-270){origin.x=point.y/scale;origin.y=imgHeight-point.x/scale}else{if(curAngle==180||curAngle==-180){origin.x=imgWidth-point.x/scale;origin.y=imgHeight-point.y/scale}else{if(curAngle==270||curAngle==-90){origin.x=imgWidth-point.y/scale;origin.y=point.x/scale}}}}return origin}function getScale(w1,h1,w2,h2){var sx=w1/w2;var sy=h1/h2;return sx>sy?sx:sy}function calculateScale(width,height){myScroll.options.zoomMin=getScale(clipWidth,clipHeight,width,height);myScroll.options.zoomMax=Math.max(1,myScroll.options.zoomMin);myScroll.options.zoomStart=Math.min(myScroll.options.zoomMax,getScale(containerWidth,containerHeight,width,height))}function compressImg(sourceImgObj,quality,angleOffset,outputFormat){quality=quality||0.8;angleOffset=angleOffset||0;var mimeType=outputFormat||"image/jpeg";var drawWidth=sourceImgObj.naturalWidth,drawHeight=sourceImgObj.naturalHeight;var maxSide=Math.max(drawWidth,drawHeight);
|
||
if(maxSide>1024){var minSide=Math.min(drawWidth,drawHeight);minSide=minSide/maxSide*1024;maxSide=1024;if(drawWidth>drawHeight){drawWidth=maxSide;drawHeight=minSide}else{drawWidth=minSide;drawHeight=maxSide}}var cvs=document.createElement("canvas");var ctx=cvs.getContext("2d");if(angleOffset){cvs.width=drawHeight;cvs.height=drawWidth;ctx.translate(drawHeight,0);ctx.rotate(angleOffset*Math.PI/180)}else{cvs.width=drawWidth;cvs.height=drawHeight}ctx.drawImage(sourceImgObj,0,0,drawWidth,drawHeight);var newImageData=cvs.toDataURL(mimeType,quality||0.8);return newImageData}function createImg(src){if(jQueryimg&&jQueryimg.length){jQueryimg.remove();delete jQueryimg[0]}jQueryimg=jQuery("<img>").css({"user-select":"none","pointer-events":"none"});jQueryimg.load(imgLoad);jQueryimg.attr("src",src)}function setTransform(jQueryobj,x,y,angle,originX,originY){originX=originX||0;originY=originY||0;var style={};style[prefix+"transform"]="translateZ(0) translate("+x+"px,"+y+"px) rotate("+angle+"deg)";style[prefix+"transform-origin"]=originX+"px "+originY+"px";jQueryobj.css(style)}function setTransition(jQueryobj,x,y,angle,dur,fn){jQueryobj.css(prefix+"transform");jQueryobj.css(prefix+"transition",prefix+"transform "+dur+"ms");jQueryobj.one(transitionEnd,function(){jQueryobj.css(prefix+"transition","");fn.call(this)});jQueryobj.css(prefix+"transform","translateZ(0) translate("+x+"px,"+y+"px) rotate("+angle+"deg)")}function init(){jQuerycontainer=jQuery(container).css({"user-select":"none","overflow":"hidden"});if(jQuerycontainer.css("position")=="static"){jQuerycontainer.css("position","relative")}jQueryclipView=jQuery("<div class='photo-clip-view'>").css({"position":"absolute","left":"50%","top":"50%","width":clipWidth,"height":clipHeight,"margin-left":-clipWidth/2,"margin-top":-clipHeight/2}).appendTo(jQuerycontainer);jQuerymoveLayer=jQuery("<div class='photo-clip-moveLayer'>").appendTo(jQueryclipView);jQueryrotateLayer=jQuery("<div class='photo-clip-rotateLayer'>").appendTo(jQuerymoveLayer);var jQuerymask=jQuery("<div class='photo-clip-mask'>").css({"position":"absolute","left":0,"top":0,"width":"100%","height":"100%","pointer-events":"none"}).appendTo(jQuerycontainer);var jQuerymask_left=jQuery("<div class='photo-clip-mask-left'>").css({"position":"absolute","left":0,"right":"50%","top":"50%","bottom":"50%","width":"auto","height":clipHeight,"margin-right":clipWidth/2,"margin-top":-clipHeight/2,"margin-bottom":-clipHeight/2,"background-color":"rgba(0,0,0,.5)"}).appendTo(jQuerymask);var jQuerymask_right=jQuery("<div class='photo-clip-mask-right'>").css({"position":"absolute","left":"50%","right":0,"top":"50%","bottom":"50%","margin-left":clipWidth/2,"margin-top":-clipHeight/2,"margin-bottom":-clipHeight/2,"background-color":"rgba(0,0,0,.5)"}).appendTo(jQuerymask);var jQuerymask_top=jQuery("<div class='photo-clip-mask-top'>").css({"position":"absolute","left":0,"right":0,"top":0,"bottom":"50%","margin-bottom":clipHeight/2,"background-color":"rgba(0,0,0,.5)"}).appendTo(jQuerymask);var jQuerymask_bottom=jQuery("<div class='photo-clip-mask-bottom'>").css({"position":"absolute","left":0,"right":0,"top":"50%","bottom":0,"margin-top":clipHeight/2,"background-color":"rgba(0,0,0,.5)"}).appendTo(jQuerymask);var jQueryclip_area=jQuery("<div class='photo-clip-area'>").css({"border":"1px dashed #ddd","position":"absolute","left":"50%","top":"50%","width":clipWidth,"height":clipHeight,"margin-left":-clipWidth/2-1,"margin-top":-clipHeight/2-1}).appendTo(jQuerymask);jQueryview=jQuery(view);if(jQueryview.length){jQueryview.css({"background-color":"#666","background-repeat":"no-repeat","background-position":"center","background-size":"contain"})}}}var prefix="",transitionEnd;(function(){var eventPrefix,vendors={Webkit:"webkit",Moz:"",O:"o"},testEl=document.documentElement,normalizeEvent=function(name){return eventPrefix?eventPrefix+name:name.toLowerCase()};for(var i in vendors){if(testEl.style[i+"TransitionProperty"]!==undefined){prefix="-"+i.toLowerCase()+"-";eventPrefix=vendors[i];break}}transitionEnd=normalizeEvent("TransitionEnd")})();return jQuery})); |