jquery.guillotine/js/jquery.guillotine.min.js

Allow users to crop images within an area (fully responsive). Supports dragging (touch support), zoom and rotation.

"format cjs";!function(t){"object"==typeof module&&"object"==typeof module.exports?module.exports=t():"function"==typeof define&&define.amd?define(t):t()}(function(){"use strict";var t,i,e,h,s,n,o,r,a,l,d,u,p,g=function(t,i){return function(){return t.apply(i,arguments)}},c=[].indexOf||function(t){for(var i=0,e=this.length;e>i;i++)if(i in this&&this[i]===t)return i;return-1};if(!window.jQuery)throw"Global jQuery not defined";return t=window.jQuery,a="guillotine",t.fn[a]?t:(l="guillotine",s={start:"touchstart."+l+" mousedown."+l,move:"touchmove."+l+" mousemove."+l,stop:"touchend."+l+" mouseup."+l},h={width:400,height:300,zoomStep:.1,init:null,eventOnChange:null,onChange:null},d=/touch/i,r=function(t){return d.test(t.type)},u=function(t){return r(t)?1===t.originalEvent.changedTouches.length:1===t.which},n=function(t){return r(t)&&(t=t.originalEvent.touches[0]),{x:t.pageX,y:t.pageY}},e=function(){var t,i,h,s,n,o,r,a,l,d;for(t=!1,s=["webkit","Moz","O","ms","Khtml"],r={transform:"transform"},l=0,d=s.length;d>l;l++)h=s[l],r[h+"Transform"]="-"+h.toLowerCase()+"-transform";i=document.createElement("img"),document.body.insertBefore(i,null);for(o in r)if(n=r[o],void 0!==i.style[o]&&(i.style[o]="rotate(90deg)",a=window.getComputedStyle(i).getPropertyValue(n),null!=a&&a.length&&"none"!==a)){t=!0;break}return document.body.removeChild(i),(e=t?function(){return!0}:function(){return!1})()},o=function(i){return t(i).css({"-webkit-perspective":1e3,perspective:1e3,"-webkit-backface-visibility":"hidden","backface-visibility":"hidden"})},i=function(){function i(i,e){this._drag=g(this._drag,this),this._unbind=g(this._unbind,this),this._start=g(this._start,this),this.op=t.extend(!0,{},h,e,t(i).data(a)),this.enabled=!0,this.zoomInFactor=1+this.op.zoomStep,this.zoomOutFactor=1/this.zoomInFactor,this.glltRatio=this.op.height/this.op.width,this.width=this.height=this.left=this.top=this.angle=0,this.data={scale:1,angle:0,x:0,y:0,w:this.op.width,h:this.op.height},this._wrap(i),null!=this.op.init?this._init():(this.width>=1&&this.height>=1&&this._fit(),this._center()),o(this.$el),this.$el.on(s.start,this._start)}return i.prototype._wrap=function(i){var e,h,s,n,o,r;return h=t(i),h.css({width:"100%",height:"100%"}),"IMG"===i.tagName?i.naturalWidth?(r=i.naturalWidth,n=i.naturalHeight):(h.addClass("guillotine-sample"),r=h.width(),n=h.height(),h.removeClass("guillotine-sample")):(r=h.width(),n=h.height()),this.naturalWidth=r,this.naturalHeight=n,this.initialWidth=this.width=r/this.op.width,this.initialHeight=this.height=n/this.op.height,e=t("<div>").addClass("guillotine-canvas"),e.css({position:"absolute",width:100*this.width+"%",height:100*this.height+"%",top:0,left:0}),e=h.wrap(e).parent(),o=this.op.height/this.op.width*100+"%",s=t("<div>").addClass("guillotine-window"),s.css({width:"100%",height:"auto",position:"relative",overflow:"hidden","padding-top":o}),s=e.wrap(s).parent(),this.$el=h,this.el=h[0],this.$canvas=e,this.canvas=e[0],this.$gllt=s,this.gllt=s[0],this.$document=t(i.ownerDocument),this.$body=t("body",this.$document)},i.prototype._unwrap=function(){return this.$el.removeAttr("style"),this.$el.insertBefore(this.gllt),this.$gllt.remove()},i.prototype._init=function(){var t,i,e;return i=this.op.init,(e=parseFloat(i.scale))&&this._zoom(e),(t=parseInt(i.angle))&&this._rotate(t),this._offset(parseInt(i.x)/this.op.width||0,parseInt(i.y)/this.op.height||0)},i.prototype._start=function(t){return this.enabled&&u(t)?(t.preventDefault(),t.stopImmediatePropagation(),this.p=n(t),this._bind()):void 0},i.prototype._bind=function(){return this.$body.addClass("guillotine-dragging"),this.$document.on(s.move,this._drag),this.$document.on(s.stop,this._unbind)},i.prototype._unbind=function(t){return this.$body.removeClass("guillotine-dragging"),this.$document.off(s.move,this._drag),this.$document.off(s.stop,this._unbind),null!=t?this._trigger("drag"):void 0},i.prototype._trigger=function(t){return null!=this.op.eventOnChange&&this.$el.trigger(this.op.eventOnChange,[this.data,t]),"function"==typeof this.op.onChange?this.op.onChange.call(this.el,this.data,t):void 0},i.prototype._drag=function(t){var i,e,h,s,o;return t.preventDefault(),t.stopImmediatePropagation(),s=n(t),i=s.x-this.p.x,e=s.y-this.p.y,this.p=s,h=0===i?null:this.left-i/this.gllt.clientWidth,o=0===e?null:this.top-e/this.gllt.clientHeight,this._offset(h,o)},i.prototype._offset=function(t,i){return(t||0===t)&&(0>t&&(t=0),t>this.width-1&&(t=this.width<1?-((1-this.width)/2):this.width-1),this.canvas.style.left=(100*-t).toFixed(2)+"%",this.left=t,this.data.x=Math.round(t*this.op.width)),i||0===i?(0>i&&(i=0),i>this.height-1&&(i=this.height<1?-((1-this.height)/2):this.height-1),this.canvas.style.top=(100*-i).toFixed(2)+"%",this.top=i,this.data.y=Math.round(i*this.op.height)):void 0},i.prototype._zoom=function(t){var i,e,h,s;if(!(0>=t||1===t))return s=this.width,i=this.height,this.width*=t,this.height*=t,this.canvas.style.width=(100*this.width).toFixed(2)+"%",this.canvas.style.height=(100*this.height).toFixed(2)+"%",this.data.scale*=t,e=(this.left+.5)*t-.5,h=(this.top+.5)*t-.5,this._offset(e,h)},i.prototype._setScale=function(t){var i,e;return this.width=this.initialWidth*t,this.height=this.initialHeight*t,this.canvas.style.width=(100*this.width).toFixed(2)+"%",this.canvas.style.height=(100*this.height).toFixed(2)+"%",i=(this.left+.5)*(t/this.data.scale)-.5,e=(this.top+.5)*(t/this.data.scale)-.5,this.data.scale=t,this._offset(i,e)},i.prototype._setHeight=function(t){this.height*=this.op.height/t,this.top*=this.op.height/t,this.op.height=this.data.h=t,this.initialHeight=this.naturalHeight/this.op.height;var i=this.op.height/this.op.width*100+"%";return this.$gllt.css("padding-top",i),this.$canvas.css({height:100*this.height+"%"}),this._offset(this.left,this.top)},i.prototype._setWidth=function(t){this.width*=this.op.width/t,this.left*=this.op.width/t,this.op.width=this.data.w=t,this.initialWidth=this.naturalWidth/this.op.width;var i=this.op.height/this.op.width*100+"%";return this.$gllt.css("padding-top",i),this.$canvas.css({width:100*this.width+"%"}),this._offset(this.left,this.top)},i.prototype._fit=function(){var t,i;return t=this.width,i=this.height/this.width,i>1?(this.width=1,this.height=i):(this.width=1/i,this.height=1),this.canvas.style.width=(100*this.width).toFixed(2)+"%",this.canvas.style.height=(100*this.height).toFixed(2)+"%",this.data.scale*=this.width/t},i.prototype._center=function(){return this._offset((this.width-1)/2,(this.height-1)/2)},i.prototype._rotate=function(t){var i,h,s,n,o,r,a;if(e()&&0!==t&&t%90===0)return this.angle=(this.angle+t)%360,this.angle<0&&(this.angle=360+this.angle),t%180!==0&&(h=this.op.height/this.op.width,o=[this.height*h,this.width/h],this.width=o[0],this.height=o[1],this.width>=1&&this.height>=1?(this.canvas.style.width=100*this.width+"%",this.canvas.style.height=100*this.height+"%"):this._fit()),r=[1,1],n=r[0],s=r[1],this.angle%180!==0&&(i=this.height/this.width*h,a=[i,1/i],n=a[0],s=a[1]),this.el.style.width=100*n+"%",this.el.style.height=100*s+"%",this.el.style.left=(1-n)/2*100+"%",this.el.style.top=(1-s)/2*100+"%",this.$el.css({transform:"rotate("+this.angle+"deg)"}),this._center(),this.data.angle=this.angle},i.prototype._reset=function(){this.initialWidth>=1&&this.initialHeight>=1?this._fit():this._setScale(1),this._center()},i.prototype.rotateLeft=function(){return this._rotate(-90),this._trigger("rotateLeft")},i.prototype.rotateRight=function(){return this._rotate(90),this._trigger("rotateRight")},i.prototype.center=function(){return this._center(),this._trigger("center")},i.prototype.fit=function(){return this._fit(),this._center(),this._trigger("fit")},i.prototype.zoomIn=function(){return this._zoom(this.zoomInFactor),this._trigger("zoomIn")},i.prototype.zoomOut=function(){return this._zoom(this.zoomOutFactor),this._trigger("zoomOut")},i.prototype.setScale=function(t){return this._setScale(parseFloat(t)),this._trigger("setScale")},i.prototype.setHeight=function(t){return this._setHeight(parseFloat(t)),this._trigger("setHeight")},i.prototype.setWidth=function(t){return this._setWidth(parseFloat(t)),this._trigger("setWidth")},i.prototype.reset=function(){return this._reset(),this._trigger("reset")},i.prototype.getData=function(){return this.data},i.prototype.enable=function(){return this.$gllt.removeClass("disabled"),this.enabled=!0},i.prototype.disable=function(){return this.$gllt.addClass("disabled"),this.enabled=!1},i.prototype.remove=function(){return this._unbind(),this._unwrap(),this.disable(),this.$el.off(s.start,this._start),this.$el.removeData(a+"Instance")},i}(),p=["rotateLeft","rotateRight","center","fit","zoomIn","zoomOut","setScale","setHeight","setWidth","reset","instance","getData","enable","disable","remove"],t.fn[a]=function(e){var h=[].slice.call(arguments,1);return"string"!=typeof e?this.each(function(){var h;return t.data(this,a+"Instance")?void 0:(h=new i(this,e),t.data(this,a+"Instance",h))}):c.call(p,e)>=0?"instance"===e?t.data(this[0],a+"Instance"):"getData"===e?t.data(this[0],a+"Instance")[e]():this.each(function(){var i;return i=t.data(this,a+"Instance"),i?i[e].apply(i,h):void 0}):void 0},t)});