diff --git a/compile/minified/ui-cropper.js b/compile/minified/ui-cropper.js index 96fbb12..c95e18a 100644 --- a/compile/minified/ui-cropper.js +++ b/compile/minified/ui-cropper.js @@ -1 +1 @@ -/*! uiCropper v1.0.8 License: MIT */angular.module("uiCropper",[]),angular.module("uiCropper").factory("cropAreaCircle",["cropArea",function(t){var e=function(){t.apply(this,arguments),this._boxResizeBaseSize=25,this._boxResizeNormalRatio=1,this._boxResizeHoverRatio=1.2,this._iconMoveNormalRatio=.9,this._iconMoveHoverRatio=1.2,this._boxResizeNormalSize=this._boxResizeBaseSize*this._boxResizeNormalRatio,this._boxResizeHoverSize=this._boxResizeBaseSize*this._boxResizeHoverRatio,this._posDragStartX=0,this._posDragStartY=0,this._posResizeStartX=0,this._posResizeStartY=0,this._posResizeStartSize=0,this._boxResizeIsHover=!1,this._areaIsHover=!1,this._boxResizeIsDragging=!1,this._areaIsDragging=!1};return(e.prototype=new t).getType=function(){return"circle"},e.prototype._calcCirclePerimeterCoords=function(e){var t=this._size.w/2,i=e*(Math.PI/180);return[this.getCenterPoint().x+t*Math.cos(i),this.getCenterPoint().y+t*Math.sin(i)]},e.prototype._calcResizeIconCenterCoords=function(){return this._calcCirclePerimeterCoords(-45)},e.prototype._isCoordWithinArea=function(e){return Math.sqrt((e[0]-this.getCenterPoint().x)*(e[0]-this.getCenterPoint().x)+(e[1]-this.getCenterPoint().y)*(e[1]-this.getCenterPoint().y))t[0]-i&&e[0]t[1]-i&&e[1]=t.left&&e[0]<=t.right&&e[1]>=t.top&&e[1]<=t.bottom},e.prototype._isCoordWithinResizeCtrl=function(e){for(var t=this._calcRectangleCorners(),i=-1,r=0,a=t.length;rs[0]-this._resizeCtrlHoverRadius&&e[0]s[1]-this._resizeCtrlHoverRadius&&e[1]=t.left&&e[0]<=t.right&&e[1]>=t.top&&e[1]<=t.bottom},e.prototype._isCoordWithinResizeCtrl=function(e){for(var t=this._calcSquareCorners(),i=-1,r=0,a=t.length;rs[0]-this._resizeCtrlHoverRadius&&e[0]s[1]-this._resizeCtrlHoverRadius&&e[1]a||i.h>r)&&(i.h=i.w=aa&&(i.x=a-i.w),i.y+i.h>r&&(i.y=r-i.h),i.x<0&&(i.x=0),i.y<0&&(i.y=0),this._minSize.w>i.w&&(i.w=this._minSize.w,i.x=this._size.x),this._minSize.h>i.h&&(i.h=this._minSize.h,i.y=this._size.y),this._size=i},e.prototype.setSizeByCorners=function(e,t){var i={x:e.x,y:e.y,w:t.x-e.x,h:t.y-e.y};this.setSize(i)},e.prototype.getSouthEastBound=function(){return this._southEastBound(this.getSize())},e.prototype.setMinSize=function(e){this._minSize=this._processSize(e),this.setSize(this._minSize)},e.prototype.getMinSize=function(){return this._minSize},e.prototype.getCenterPoint=function(){var e=this.getSize();return{x:e.x+e.w/2,y:e.y+e.h/2}},e.prototype.setCenterPoint=function(e){var t=this.getSize();this.setSize({x:e.x-t.w/2,y:e.y-t.h/2,w:t.w,h:t.h})},e.prototype.setCenterPointOnMove=function(e){var t=this.getSize();this.setSizeOnMove({x:e.x-t.w/2,y:e.y-t.h/2,w:t.w,h:t.h})},e.prototype.setInitSize=function(e){this._initSize=this._processSize(e),this.setSize(this._initSize)},e.prototype.getInitSize=function(){return this._initSize},e.prototype.setInitCoords=function(e){e.h=this.getSize().h,e.w=this.getSize().w,this._initCoords=this._processSize(e),this.setSize(this._initCoords)},e.prototype.getInitCoords=function(){return this._initCoords},e.prototype.getType=function(){return"circle"},e.prototype._allowMouseOutsideCanvas=function(e){var t=this._ctx.canvas.height,i=this._ctx.canvas.width,r={w:e.w,h:e.h};return e.x<0?r.x=0:e.x+e.w>i?r.x=i-e.w:r.x=e.x,e.y<0?r.y=0:e.y+e.h>t?r.y=t-e.h:r.y=e.y,r},e.prototype._preventBoundaryCollision=function(e){var t=this._ctx.canvas.height,i=this._ctx.canvas.width,r={x:e.x,y:e.y},a=this._southEastBound(e);r.x<0&&(r.x=0),r.y<0&&(r.y=0),a.x>i&&(a.x=i),a.y>t&&(a.y=t);var s=this._forceAspectRatio?e.w:a.x-r.x,n=this._forceAspectRatio?e.h:a.y-r.y;ti&&(n=(s=i-r.x)/this._aspect,this._minSize.w>s&&(s=this._minSize.w),this._minSize.h>n&&(n=this._minSize.h),r.x=i-s),r.y+n>t&&(r.y=t-n)),this._forceAspectRatio&&(s=n,r.x+s>i&&((s=i-r.x)i&&(a.x=i,r.x=Math.max(a.x-i,a.x-this._minSize.w),o={x:r.x,y:r.y,w:a.x-r.x,h:a.y-r.y})),o.ht&&(a.y=t,r.y=Math.max(a.y-t,a.y-this._minSize.h),o={x:r.x,y:r.y,w:a.x-r.x,h:a.y-r.y})),this._forceAspectRatio&&((a=this._southEastBound(o)).y>t&&(o.y=t-o.h),a.x>i&&(o.x=i-o.w)),o},e.prototype._dontDragOutside=function(){var e=this._ctx.canvas.height,t=this._ctx.canvas.width;this._width>t&&(this._width=t),this._height>e&&(this._height=e),this._xt-this._width/2&&(this._x=t-this._width/2),this._ye-this._height/2&&(this._y=e-this._height/2)},e.prototype._drawArea=function(){},e.prototype._processSize=function(e){"number"==typeof e&&(e={w:e,h:e});var t=e.w;return this._aspect&&(t=e.h*this._aspect),{x:void 0===e.x?this.getSize().x:e.x,y:void 0===e.y?this.getSize().y:e.y,w:t||this._minSize.w,h:e.h||this._minSize.h}},e.prototype._southEastBound=function(e){return{x:e.x+e.w,y:e.y+e.h}},e.prototype.draw=function(){this._cropCanvas.drawCropArea(this._image,this.getCenterPoint(),this._size,this._drawArea)},e.prototype.processMouseMove=function(){},e.prototype.processMouseDown=function(){},e.prototype.processMouseUp=function(){},e}]),angular.module("uiCropper").factory("cropCanvas",[function(){var a=[[-.5,-2],[-3,-4.5],[-.5,-7],[-7,-7],[-7,-.5],[-4.5,-3],[-2,-.5]],s=[[.5,-2],[3,-4.5],[.5,-7],[7,-7],[7,-.5],[4.5,-3],[2,-.5]],n=[[-.5,2],[-3,4.5],[-.5,7],[-7,7],[-7,.5],[-4.5,3],[-2,.5]],c=[[.5,2],[3,4.5],[.5,7],[7,7],[7,.5],[4.5,3],[2,.5]],i=[[-1.5,-2.5],[-1.5,-6],[-5,-6],[0,-11],[5,-6],[1.5,-6],[1.5,-2.5]],u=[[-2.5,-1.5],[-6,-1.5],[-6,-5],[-11,0],[-6,5],[-6,1.5],[-2.5,1.5]],l=[[-1.5,2.5],[-1.5,6],[-5,6],[0,11],[5,6],[1.5,6],[1.5,2.5]],g=[[2.5,-1.5],[6,-1.5],[6,-5],[11,0],[6,5],[6,1.5],[2.5,1.5]],p="#fff",f="#bababa",d="#444",v="#fff",m="#bababa",w="#444",y="#fff",_=1;return function(h){var o=function(e,t,i){return[i*e[0]+t[0],i*e[1]+t[1]]},r=function(e,t,i,r){h.save(),h.fillStyle=t,h.beginPath();var a,s=o(e[0],i,r);for(var n in h.moveTo(s[0],s[1]),e)0y[0]?(r[0]=y[0],r[1]=r[0]/i,a.top=(y[1]-r[1])/2):(r[1]>y[1]?(r[1]=y[1],r[0]=r[1]*i):a.top=(y[1]-r[1])/2,a.left=(y[0]-r[0])/2),{dims:r,margins:a}}var R=function(){var e=[0,0];if(null!==v){if(x(),m.setImage(v),"fit"===_){var t=I(v.width,v.height);e=t.dims;var i=t.margins;p.css({"margin-left":i.left+"px","margin-top":i.top+"px"})}else{var r=[v.width,v.height],a=v.width/v.height;(e=r)[0]>y[0]?(e[0]=y[0],e[1]=e[0]/a):e[0]y[1]?(e[1]=y[1],e[0]=e[1]*a):e[1]")[0]).getContext("2d"),r.width=e.w,r.height=e.h,null!==v){var a=(t.x-m.getSize().w/2)*(v.width/d.canvas.width),s=(t.y-m.getSize().h/2)*(v.height/d.canvas.height),n=m.getSize().w*(v.width/d.canvas.width),o=m.getSize().h*(v.height/d.canvas.height);if(S)i.drawImage(v,a,s,n,o,0,0,e.w,e.h);else{var h,c,u=n/o;1y[0]?(a[0]=y[0],a[1]=a[0]/h):a[0]y[1]?(a[1]=y[1],a[0]=a[1]*h):a[1]w[0]&&!isNaN(t[1])&&0w[1]&&(y=t)}},this.setMinCanvasDimensions=function(e){if(!angular.isUndefined(e)){var t=[];t="number"==typeof e||"string"==typeof e?[parseInt(parseInt(e),10),parseInt(parseInt(e),10)]:[parseInt(e.w,10),parseInt(e.h,10)],!isNaN(t[0])&&0<=t[0]&&!isNaN(t[1])&&0<=t[1]&&(w=t)}},this.setScalemode=function(e){_=e},this.getScalemode=function(){return _},this.getResultImageSize=function(){if("selection"===r)return m.getSize();if("max"!==r)return r;var e=1;v&&d&&d.canvas&&(e=v.width/d.canvas.width);var t={w:e*m.getSize().w,h:e*m.getSize().h};return s&&(t.w",controller:["$scope",function(e){e.events=new t}],link:function(i,r){var n,e=i.events,o=new c(r.find("canvas"),{disableKeyboardAccess:i.disableKeyboardAccess,allowPropagation:i.allowPropagation},e);i.canvasScalemode?o.setScalemode(i.canvasScalemode):o.setScalemode("fixed-height"),r.addClass(o.getScalemode());var t=function(t,e,i){if(""!==t.image&&(!t.liveView.block||e)){var r,a=o.getResultImage();angular.isArray(a)?(r=a[0].dataURI,t.resultArrayImage=a):r=a.dataURI;var s=window.URL||window.webkitURL;n!==r&&(n=r,t.resultImage=r,t.liveView.callback&&t.liveView.callback(r),i&&i(r),o.getResultImageDataBlob().then(function(e){t.resultBlob=e,t.urlBlob=e?s.createObjectURL(e):null}),t.resultImage&&(o.getDominantColor(t.resultImage).then(function(e){t.dominantColor=e}),o.getPalette(t.resultImage).then(function(e){t.paletteColor=e})),t.areaCoords=o.getAreaCoords(),t.onChange({$dataURI:t.resultImage}))}};i.liveView&&"boolean"==typeof i.liveView.block?i.liveView.render=function(e){t(i,!0,e)}:i.liveView={block:!1};var a=function(e){var t=o.getAreaCoords(),i=o.getArea().getImage().width/o.getArea().getCanvasSize().w,r=o.getArea().getImage().height/o.getArea().getCanvasSize().h;e.cropject={canvasSize:o.getArea().getCanvasSize(),areaCoords:t,cropWidth:t.w,cropHeight:t.h,cropTop:t.y,cropLeft:t.x,cropImageWidth:Math.round(t.w*i),cropImageHeight:Math.round(t.h*r),cropImageTop:Math.round(t.y*r),cropImageLeft:Math.round(t.x*i)}},s=function(t){return function(){h(function(){i.$apply(function(e){t(e)})})}};i.chargement||(i.chargement=function(){switch(window.navigator.userLanguage||window.navigator.language){case"nl":case"nl_NL":return"Aan het laden";case"fr":case"fr-FR":return"Chargement";case"es":case"es-ES":return"Cargando";case"ca":case"ca-ES":return"Càrrega";case"de":case"de-DE":return"Laden";case"pt":case"pt-BR":return"Carregando";default:return"Loading"}}()),e.on("load-start",s(function(e){e.onLoadBegin({})})).on("load-done",s(function(e){var t=r.children();angular.forEach(t,function(e){angular.element(e).hasClass("loading")&&angular.element(e).remove()}),a(e),e.onLoadDone({})})).on("load-error",s(function(e){e.onLoadError({})})).on("area-move area-resize",s(function(e){!0===e.changeOnFly&&t(e),a(e)})).on("image-updated",s(function(e){o.setAreaMinRelativeSize(e.areaMinRelativeSize)})).on("area-move-end area-resize-end image-updated",s(function(e){t(e),a(e)})),i.$watch("image",function(e){e&&r.append('
'+i.chargement+"...
"),null!==i.timeout&&h.cancel(i.timeout),i.timeout=h(function(){i.timeout=null,o.setInitMax(i.initMaxArea),o.setNewImageSource(i.image)},100)}),i.$watch("areaType",function(){o.setAreaType(i.areaType),t(i)}),i.$watch("areaMinSize",function(){o.setAreaMinSize(i.areaMinSize),t(i)}),i.$watch("areaMinRelativeSize",function(){""!==i.image&&(o.setAreaMinRelativeSize(i.areaMinRelativeSize),t(i))}),i.$watch("areaInitSize",function(){o.setAreaInitSize(i.areaInitSize),t(i)}),i.$watch("areaInitCoords",function(){o.setAreaInitCoords(i.areaInitCoords),o.areaInitIsRelativeToImage=i.areaInitIsRelativeToImage,t(i)}),i.$watch("maxCanvasDimensions",function(){o.setMaxCanvasDimensions(i.maxCanvasDimensions)}),i.$watch("minCanvasDimensions",function(){o.setMinCanvasDimensions(i.minCanvasDimensions)}),i.$watch("resultImageFormat",function(){o.setResultImageFormat(i.resultImageFormat),t(i)}),i.$watch("resultImageQuality",function(){o.setResultImageQuality(i.resultImageQuality),t(i)}),i.$watch("resultImageSize",function(){o.setResultImageSize(i.resultImageSize),t(i)}),i.$watch("paletteColorLength",function(){o.setPaletteColorLength(i.paletteColorLength)}),i.$watch("aspectRatio",function(){"string"==typeof i.aspectRatio&&""!==i.aspectRatio&&(i.aspectRatio=parseFloat(i.aspectRatio)),i.aspectRatio&&o.setAspect(i.aspectRatio)}),i.$watch("allowCropResizeOnCorners",function(){i.allowCropResizeOnCorners&&o.setAllowCropResizeOnCorners(i.allowCropResizeOnCorners)}),i.$watch(function(){return"fit"===o.getScalemode()?[r[0].clientWidth,r[0].clientHeight]:"fixed-height"===o.getScalemode()?[r[0].clientWidth,r[0].clientHeight]:"full-width"===o.getScalemode()?r[0].clientWidth:void 0},function(e){"fit"===o.getScalemode()&&(o.setMaxDimensions(e[0],e[1]),t(i)),"fixed-height"===o.getScalemode()&&0>>16,61!==o[1]&&(a[n++]=c>>>8),61!==o[0]&&(a[n++]=c),h=0));return a}(n)],{type:t}):new Blob([decodeURIComponent(n)],{type:t})),void 0!==e&&e(i)}},i.toDataURLHD?i.toBlobHD=function(){c="toDataURLHD";var e=this.toBlob();return c="toDataURL",e}:i.toBlobHD=i.toBlob)}("undefined"!=typeof self&&self||"undefined"!=typeof window&&window||this.content||this),function(){var f=function(e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),document.body.appendChild(this.canvas),this.width=this.canvas.width=e.width,this.height=this.canvas.height=e.height,this.context.drawImage(e,0,0,this.width,this.height)};f.prototype.clear=function(){this.context.clearRect(0,0,this.width,this.height)},f.prototype.update=function(e){this.context.putImageData(e,0,0)},f.prototype.getPixelCount=function(){return this.width*this.height},f.prototype.getImageData=function(){return this.context.getImageData(0,0,this.width,this.height)},f.prototype.removeCanvas=function(){this.canvas.parentNode.removeChild(this.canvas)};var e=function(){};if((window.ColorThief=e).prototype.getColor=function(e,t){return this.getPalette(e,5,t)[0]},e.prototype.getPalette=function(e,t,i){void 0===t&&(t=10),(void 0===i||i<1)&&(i=10);for(var r,a,s,n,o=new f(e),h=o.getImageData().data,c=o.getPixelCount(),u=[],l=0;ll/2){for(r=c.copy(),a=c.copy(),s=(t=u-c[n])<=(i=c[o]-u)?Math.min(c[o]-1,~~(u+i/2)):Math.max(c[n],~~(u-1-t/2));!g[s];)s++;for(h=p[s];!h&&g[s-1];)h=p[--s];return r[o]=s,a[n]=r[o]+1,[r,a]}}}return D.prototype={volume:function(e){var t=this;return t._volume&&!e||(t._volume=(t.r2-t.r1+1)*(t.g2-t.g1+1)*(t.b2-t.b1+1)),t._volume},count:function(e){var t=this,i=t.histo;if(!t._count_set||e){var r,a,s,n=0;for(r=t.r1;r<=t.r2;r++)for(a=t.g1;a<=t.g2;a++)for(s=t.b1;s<=t.b2;s++){n+=i[R(r,a,s)]||0}t._count=n,t._count_set=!0}return t._count},copy:function(){var e=this;return new D(e.r1,e.r2,e.g1,e.g2,e.b1,e.b2,e.histo)},avg:function(e){var t=this,i=t.histo;if(!t._avg||e){var r,a,s,n,o=0,h=1<<8-x,c=0,u=0,l=0;for(a=t.r1;a<=t.r2;a++)for(s=t.g1;s<=t.g2;s++)for(n=t.b1;n<=t.b2;n++)o+=r=i[R(a,s,n)]||0,c+=r*(a+.5)*h,u+=r*(s+.5)*h,l+=r*(n+.5)*h;t._avg=o?[~~(c/o),~~(u/o),~~(l/o)]:[~~(h*(t.r1+t.r2+1)/2),~~(h*(t.g1+t.g2+1)/2),~~(h*(t.b1+t.b2+1)/2)]}return t._avg},contains:function(e){var t=this,i=e[0]>>I;return gval=e[1]>>I,bval=e[2]>>I,i>=t.r1&&i<=t.r2&&gval>=t.g1&&gval<=t.g2&&bval>=t.b1&&bval<=t.b2}},M.prototype={push:function(e){this.vboxes.push({vbox:e,color:e.avg()})},palette:function(){return this.vboxes.map(function(e){return e.color})},size:function(){return this.vboxes.size()},map:function(e){for(var t=this.vboxes,i=0;i>I,s=e[1]>>I,n=e[2]>>I,r=R(a,s,n),o[r]=(o[r]||0)+1}),o);h.forEach(function(){});var c,u,l,g,p,f,d,v,m,w,y=(c=h,m=d=p=1e6,w=v=f=0,e.forEach(function(e){u=e[0]>>I,l=e[1]>>I,g=e[2]>>I,u>1;var c=h/i;return 0===c?1:c}(e,0,s):1,p=Math.ceil(c*n/a),f=Math.ceil(c*o/s/g),d=0,v=0;dt[0]-i&&e[0]t[1]-i&&e[1]=t.left&&e[0]<=t.right&&e[1]>=t.top&&e[1]<=t.bottom},e.prototype._isCoordWithinResizeCtrl=function(e){for(var t=this._calcRectangleCorners(),i=-1,r=0,s=t.length;ra[0]-this._resizeCtrlHoverRadius&&e[0]a[1]-this._resizeCtrlHoverRadius&&e[1]=t.left&&e[0]<=t.right&&e[1]>=t.top&&e[1]<=t.bottom},e.prototype._isCoordWithinResizeCtrl=function(e){for(var t=this._calcSquareCorners(),i=-1,r=0,s=t.length;ra[0]-this._resizeCtrlHoverRadius&&e[0]a[1]-this._resizeCtrlHoverRadius&&e[1]s||i.h>r)&&(ss&&(i.x=s-i.w),i.y+i.h>r&&(i.y=r-i.h),i.x<0&&(i.x=0),i.y<0&&(i.y=0),this._minSize.w>i.w&&(i.w=this._minSize.w,i.x=this._size.x),this._minSize.h>i.h&&(i.h=this._minSize.h,i.y=this._size.y),this._size=i},e.prototype.setSizeByCorners=function(e,t){var i={x:e.x,y:e.y,w:t.x-e.x,h:t.y-e.y};this.setSize(i)},e.prototype.getSouthEastBound=function(){return this._southEastBound(this.getSize())},e.prototype.setMinSize=function(e){this._minSize=this._processSize(e),this.setSize(this._minSize)},e.prototype.getMinSize=function(){return this._minSize},e.prototype.getCenterPoint=function(){var e=this.getSize();return{x:e.x+e.w/2,y:e.y+e.h/2}},e.prototype.setCenterPoint=function(e){var t=this.getSize();this.setSize({x:e.x-t.w/2,y:e.y-t.h/2,w:t.w,h:t.h})},e.prototype.setCenterPointOnMove=function(e){var t=this.getSize();this.setSizeOnMove({x:e.x-t.w/2,y:e.y-t.h/2,w:t.w,h:t.h})},e.prototype.setInitSize=function(e){this._initSize=this._processSize(e),this.setSize(this._initSize)},e.prototype.getInitSize=function(){return this._initSize},e.prototype.setInitCoords=function(e){e.h=this.getSize().h,e.w=this.getSize().w,this._initCoords=this._processSize(e),this.setSize(this._initCoords)},e.prototype.setDisableCrop=function(e){this._disableCrop=e,this._cropCanvas=new i(this._ctx,this._disableCrop)},e.prototype.getInitCoords=function(){return this._initCoords},e.prototype.getType=function(){return"circle"},e.prototype._allowMouseOutsideCanvas=function(e){var t=this._ctx.canvas.height,i=this._ctx.canvas.width,r={w:e.w,h:e.h};return e.x<0?r.x=0:e.x+e.w>i?r.x=i-e.w:r.x=e.x,e.y<0?r.y=0:e.y+e.h>t?r.y=t-e.h:r.y=e.y,r},e.prototype._preventBoundaryCollision=function(e){var t=this._ctx.canvas.height,i=this._ctx.canvas.width,r={x:e.x,y:e.y},s=this._southEastBound(e);r.x<0&&(r.x=0),r.y<0&&(r.y=0),s.x>i&&(s.x=i),s.y>t&&(s.y=t);var a=this._forceAspectRatio?e.w:s.x-r.x,n=this._forceAspectRatio?e.h:s.y-r.y;ti&&(n=(a=i-r.x)/this._aspect,this._minSize.w>a&&(a=this._minSize.w),this._minSize.h>n&&(n=this._minSize.h),r.x=i-a),r.y+n>t&&(r.y=t-n)),this._forceAspectRatio&&(a=n,r.x+a>i&&((a=i-r.x)i&&(s.x=i,r.x=Math.max(s.x-i,s.x-this._minSize.w),o={x:r.x,y:r.y,w:s.x-r.x,h:s.y-r.y})),o.ht&&(s.y=t,r.y=Math.max(s.y-t,s.y-this._minSize.h),o={x:r.x,y:r.y,w:s.x-r.x,h:s.y-r.y})),this._forceAspectRatio&&((s=this._southEastBound(o)).y>t&&(o.y=t-o.h),s.x>i&&(o.x=i-o.w)),o},e.prototype._dontDragOutside=function(){var e=this._ctx.canvas.height,t=this._ctx.canvas.width;this._width>t&&(this._width=t),this._height>e&&(this._height=e),this._xt-this._width/2&&(this._x=t-this._width/2),this._ye-this._height/2&&(this._y=e-this._height/2)},e.prototype._drawArea=function(){},e.prototype._processSize=function(e){"number"==typeof e&&(e={w:e,h:e});var t=e.w,i=e.h;return this._aspect&&(1<=this.aspect?t=e.h*this._aspect:i=e.w/this._aspect),{x:void 0===e.x?this.getSize().x:e.x,y:void 0===e.y?this.getSize().y:e.y,w:t||this._minSize.w,h:i||this._minSize.h}},e.prototype._southEastBound=function(e){return{x:e.x+e.w,y:e.y+e.h}},e.prototype.draw=function(){this._cropCanvas.drawCropArea(this._image,this.getCenterPoint(),this._size,this._drawArea)},e.prototype.processMouseMove=function(){},e.prototype.processMouseDown=function(){},e.prototype.processMouseUp=function(){},e}]),angular.module("uiCropper").factory("cropCanvas",[function(){var s=[[-.5,-2],[-3,-4.5],[-.5,-7],[-7,-7],[-7,-.5],[-4.5,-3],[-2,-.5]],a=[[.5,-2],[3,-4.5],[.5,-7],[7,-7],[7,-.5],[4.5,-3],[2,-.5]],n=[[-.5,2],[-3,4.5],[-.5,7],[-7,7],[-7,.5],[-4.5,3],[-2,.5]],u=[[.5,2],[3,4.5],[.5,7],[7,7],[7,.5],[4.5,3],[2,.5]],i=[[-1.5,-2.5],[-1.5,-6],[-5,-6],[0,-11],[5,-6],[1.5,-6],[1.5,-2.5]],l=[[-2.5,-1.5],[-6,-1.5],[-6,-5],[-11,0],[-6,5],[-6,1.5],[-2.5,1.5]],g=[[-1.5,2.5],[-1.5,6],[-5,6],[0,11],[5,6],[1.5,6],[1.5,2.5]],p=[[2.5,-1.5],[6,-1.5],[6,-5],[11,0],[6,5],[6,1.5],[2.5,1.5]],f="#fff",d="#bababa",v="#444",m="#fff",w="#bababa",y="#444",_="#fff",z=1;return function(h,c){function o(e,t,i){return[i*e[0]+t[0],i*e[1]+t[1]]}function r(e,t,i,r){if(!c){h.save(),h.fillStyle=t,h.beginPath();var s,a=o(e[0],i,r);for(var n in h.moveTo(a[0],a[1]),e)0y[0]?(r[0]=y[0],r[1]=r[0]/i,s.top=(y[1]-r[1])/2):(r[1]>y[1]?(r[1]=y[1],r[0]=r[1]*i):s.top=(y[1]-r[1])/2,s.left=(y[0]-r[0])/2),{dims:r,margins:s}}function b(){var e=[0,0];if(null!==v){if(x(),m.setImage(v),"fit"===_){var t=I(v.width,v.height);e=t.dims;var i=t.margins;p.css({"margin-left":i.left+"px","margin-top":i.top+"px"})}else{var r=[v.width,v.height],s=v.width/v.height;(e=r)[0]>y[0]?(e[0]=y[0],e[1]=e[0]/s):e[0]y[1]?(e[1]=y[1],e[0]=e[1]*s):e[1]")[0]).getContext("2d"),r.width=e.w,r.height=e.h,null!==v){var s=(t.x-m.getSize().w/2)*(v.width/d.canvas.width),a=(t.y-m.getSize().h/2)*(v.height/d.canvas.height),n=m.getSize().w*(v.width/d.canvas.width),o=m.getSize().h*(v.height/d.canvas.height);if(S)i.drawImage(v,s,a,n,o,0,0,e.w,e.h);else{var h,c,u=n/o;1y[0]?(s[0]=y[0],s[1]=s[0]/h):s[0]y[1]?(s[1]=y[1],s[0]=s[1]*h):s[1]w[0]&&!isNaN(t[1])&&0w[1]&&(y=t)}},this.setMinCanvasDimensions=function(e){if(!angular.isUndefined(e)){var t=[];t="number"==typeof e||"string"==typeof e?[parseInt(parseInt(e),10),parseInt(parseInt(e),10)]:[parseInt(e.w,10),parseInt(e.h,10)],!isNaN(t[0])&&0<=t[0]&&!isNaN(t[1])&&0<=t[1]&&(w=t)}},this.setScalemode=function(e){_=e},this.getScalemode=function(){return _},this.getResultImageSize=function(){if("selection"===r)return m.getSize();if("max"!==r)return r;var e=1;v&&d&&d.canvas&&(e=v.width/d.canvas.width);var t={w:e*m.getSize().w,h:e*m.getSize().h};return a&&(t.w",controller:["$scope",function(e){e.events=new t}],link:function(i,r){var n,e=i.events,o=new c(r.find("canvas"),{disableKeyboardAccess:i.disableKeyboardAccess,allowPropagation:i.allowPropagation},e);function t(t,e,i){if(""!==t.image&&(!t.liveView.block||e)){var r,s=o.getResultImage();angular.isArray(s)?(r=s[0].dataURI,t.resultArrayImage=s):r=s.dataURI;var a=window.URL||window.webkitURL;n!==r&&(n=r,t.resultImage=r,t.liveView.callback&&t.liveView.callback(r),i&&i(r),o.getResultImageDataBlob().then(function(e){t.resultBlob=e,t.urlBlob=e?a.createObjectURL(e):null}),t.resultImage&&(o.getDominantColor(t.resultImage).then(function(e){t.dominantColor=e}),o.getPalette(t.resultImage).then(function(e){t.paletteColor=e})),function(e){e.areaCoords=o.getAreaCoords()}(t),t.onChange({$dataURI:t.resultImage}))}}function s(e){var t=o.getAreaCoords(),i=o.getArea().getImage().width/o.getArea().getCanvasSize().w,r=o.getArea().getImage().height/o.getArea().getCanvasSize().h;e.cropject={canvasSize:o.getArea().getCanvasSize(),areaCoords:t,cropWidth:t.w,cropHeight:t.h,cropTop:t.y,cropLeft:t.x,cropImageWidth:Math.round(t.w*i),cropImageHeight:Math.round(t.h*r),cropImageTop:Math.round(t.y*r),cropImageLeft:Math.round(t.x*i)}}function a(t){return function(){h(function(){i.$apply(function(e){t(e)})})}}i.canvasScalemode?o.setScalemode(i.canvasScalemode):o.setScalemode("fixed-height"),r.addClass(o.getScalemode()),i.liveView&&"boolean"==typeof i.liveView.block?i.liveView.render=function(e){t(i,!0,e)}:i.liveView={block:!1},i.chargement||(i.chargement=function(){switch(window.navigator.userLanguage||window.navigator.language){case"nl":case"nl_NL":return"Aan het laden";case"fr":case"fr-FR":return"Chargement";case"es":case"es-ES":return"Cargando";case"ca":case"ca-ES":return"Càrrega";case"de":case"de-DE":return"Laden";case"pt":case"pt-BR":return"Carregando";default:return"Loading"}}()),e.on("load-start",a(function(e){e.onLoadBegin({})})).on("load-done",a(function(e){var t=r.children();angular.forEach(t,function(e){angular.element(e).hasClass("loading")&&angular.element(e).remove()}),s(e),e.onLoadDone({})})).on("load-error",a(function(e){e.onLoadError({})})).on("area-move area-resize",a(function(e){!0===e.changeOnFly&&t(e),s(e)})).on("image-updated",a(function(e){o.setAreaMinRelativeSize(e.areaMinRelativeSize)})).on("area-move-end area-resize-end image-updated",a(function(e){t(e),s(e)})),i.$watch("image",function(e){o.getArea()&&(o.getArea()._size={x:0,y:0,w:0,h:0}),e&&r.append('
'+i.chargement+"...
"),null!==i.timeout&&h.cancel(i.timeout),i.timeout=h(function(){i.timeout=null,o.setInitMax(i.initMaxArea),o.setNewImageSource(i.image)},100)}),i.$watch("areaType",function(){o.setAreaType(i.areaType),t(i)}),i.$watch("areaMinSize",function(){o.setAreaMinSize(i.areaMinSize),t(i)}),i.$watch("areaMinRelativeSize",function(){""!==i.image&&(o.setAreaMinRelativeSize(i.areaMinRelativeSize),t(i))}),i.$watch("areaInitSize",function(){o.setAreaInitSize(i.areaInitSize),t(i)}),i.$watch("areaInitCoords",function(){o.setAreaInitCoords(i.areaInitCoords),o.areaInitIsRelativeToImage=i.areaInitIsRelativeToImage,t(i)}),i.$watch("maxCanvasDimensions",function(){o.setMaxCanvasDimensions(i.maxCanvasDimensions)}),i.$watch("minCanvasDimensions",function(){o.setMinCanvasDimensions(i.minCanvasDimensions)}),i.$watch("resultImageFormat",function(){o.setResultImageFormat(i.resultImageFormat),t(i)}),i.$watch("resultImageQuality",function(){o.setResultImageQuality(i.resultImageQuality),t(i)}),i.$watch("resultImageSize",function(){o.setResultImageSize(i.resultImageSize),t(i)}),i.$watch("paletteColorLength",function(){o.setPaletteColorLength(i.paletteColorLength)}),i.$watch("aspectRatio",function(){"string"==typeof i.aspectRatio&&""!==i.aspectRatio&&(i.aspectRatio=parseFloat(i.aspectRatio)),i.aspectRatio&&o.setAspect(i.aspectRatio)}),i.$watch("allowCropResizeOnCorners",function(){i.allowCropResizeOnCorners&&o.setAllowCropResizeOnCorners(i.allowCropResizeOnCorners)}),i.$watch("disableCrop",function(){o.setDisableCrop(i.disableCrop)}),i.$watch(function(){return"fit"===o.getScalemode()?[r[0].clientWidth,r[0].clientHeight]:"fixed-height"===o.getScalemode()?[r[0].clientWidth,r[0].clientHeight]:"full-width"===o.getScalemode()?r[0].clientWidth:void 0},function(e){"fit"===o.getScalemode()&&(o.setMaxDimensions(e[0],e[1]),t(i)),"fixed-height"===o.getScalemode()&&0>>16,61!==o[1]&&(s[n++]=c>>>8),61!==o[0]&&(s[n++]=c),h=0));return s}(n)],{type:t}):new Blob([decodeURIComponent(n)],{type:t})),void 0!==e&&e(i)}},i.toDataURLHD?i.toBlobHD=function(){c="toDataURLHD";var e=this.toBlob();return c="toDataURL",e}:i.toBlobHD=i.toBlob)}("undefined"!=typeof self&&self||"undefined"!=typeof window&&window||this.content||this),function(){function f(e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),document.body.appendChild(this.canvas),this.width=this.canvas.width=e.width,this.height=this.canvas.height=e.height,this.context.drawImage(e,0,0,this.width,this.height)}f.prototype.clear=function(){this.context.clearRect(0,0,this.width,this.height)},f.prototype.update=function(e){this.context.putImageData(e,0,0)},f.prototype.getPixelCount=function(){return this.width*this.height},f.prototype.getImageData=function(){return this.context.getImageData(0,0,this.width,this.height)},f.prototype.removeCanvas=function(){this.canvas.parentNode.removeChild(this.canvas)};function e(){}if((window.ColorThief=e).prototype.getColor=function(e,t){return this.getPalette(e,5,t)[0]},e.prototype.getPalette=function(e,t,i){void 0===t&&(t=10),(void 0===i||i<1)&&(i=10);for(var r,s,a,n,o=new f(e),h=o.getImageData().data,c=o.getPixelCount(),u=[],l=0;l>l;return gval=e[1]>>l,bval=e[2]>>l,i>=t.r1&&i<=t.r2&&gval>=t.g1&&gval<=t.g2&&bval>=t.b1&&bval<=t.b2}},c.prototype={push:function(e){this.vboxes.push({vbox:e,color:e.avg()})},palette:function(){return this.vboxes.map(function(e){return e.color})},size:function(){return this.vboxes.size()},map:function(e){for(var t=this.vboxes,i=0;i>l,r=e[1]>>l,s=e[2]>>l,t=m(i,r,s),a[t]=(a[t]||0)+1}),a}(e);h.forEach(function(){});var i=function(e,t){var i,r,s,a=1e6,n=0,o=1e6,h=0,c=1e6,u=0;return e.forEach(function(e){i=e[0]>>l,r=e[1]>>l,s=e[2]>>l,il/2){for(r=c.copy(),s=c.copy(),a=(t=u-c[n])<=(i=c[o]-u)?Math.min(c[o]-1,~~(u+i/2)):Math.max(c[n],~~(u-1-t/2));!g[a];)a++;for(h=p[a];!h&&g[a-1];)h=p[--a];return r[o]=a,s[n]=r[o]+1,[r,s]}}}"function"==typeof define&&define.amd?define([],function(){return e}):"object"==typeof exports?module.exports=e:this.ColorThief=e}.call(this),function(){function f(e,t,i,r){var s=e.naturalWidth,a=e.naturalHeight;if(s+a!==!1){var n=i.width,o=i.height,h=t.getContext("2d");h.save(),function(e,t,i,r,s){switch(s){case 5:case 6:case 7:case 8:e.width=r,e.height=i;break;default:e.width=i,e.height=r}switch(s){case 2:t.translate(i,0),t.scale(-1,1);break;case 3:t.translate(i,r),t.rotate(Math.PI);break;case 4:t.translate(0,r),t.scale(1,-1);break;case 5:t.rotate(.5*Math.PI),t.scale(1,-1);break;case 6:t.rotate(.5*Math.PI),t.translate(0,-r);break;case 7:t.rotate(.5*Math.PI),t.translate(i,-r),t.scale(-1,1);break;case 8:t.rotate(-.5*Math.PI),t.translate(-i,0)}}(t,h,n,o,i.orientation),function(e){var t=e.naturalWidth;if(1048576>1}var c=h/i;return 0==c?1:c}(e,0,a):1,p=Math.ceil(c*n/s),f=Math.ceil(c*o/a/g),d=0,v=0;dFull test suite with uiCropper
- +
Full test suite with uiCropper on-load-error="onLoadError()" live-view="blockingObject" area-coords="myAreaCoords" - canvas-scalemode="true"> + canvas-scalemode="true" + disable-crop="disableCropArea">
@@ -113,6 +114,16 @@

Result with blob in url

+ +
+ Enable / disable just the crop area +
+ + +
+
diff --git a/package.json b/package.json index 337ecd2..2e5ec11 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.8", + "version": "1.0.9", "author": { "name": "Alex Kaul", "email": "alexkaul@googlemail.com" @@ -75,4 +75,4 @@ "type": "opencollective", "url": "https://opencollective.com/ui-cropper" } -} \ No newline at end of file +} diff --git a/source/js/classes/crop-area.js b/source/js/classes/crop-area.js index ce21b83..062efcb 100644 --- a/source/js/classes/crop-area.js +++ b/source/js/classes/crop-area.js @@ -18,8 +18,9 @@ angular.module('uiCropper').factory('cropArea', ['cropCanvas', function (CropCan this._forceAspectRatio = false; this._aspect = null; + this._disableCrop = false; - this._cropCanvas = new CropCanvas(ctx); + this._cropCanvas = new CropCanvas(ctx, this._disableCrop); this._image = new Image(); this._size = { @@ -181,6 +182,11 @@ angular.module('uiCropper').factory('cropArea', ['cropCanvas', function (CropCan this.setSize(this._initCoords); }; + CropArea.prototype.setDisableCrop = function(value){ + this._disableCrop = value; + this._cropCanvas = new CropCanvas(this._ctx, this._disableCrop); + }; + CropArea.prototype.getInitCoords = function () { return this._initCoords; }; diff --git a/source/js/classes/crop-canvas.js b/source/js/classes/crop-canvas.js index 51797b6..a422395 100644 --- a/source/js/classes/crop-canvas.js +++ b/source/js/classes/crop-canvas.js @@ -90,7 +90,7 @@ angular.module('uiCropper').factory('cropCanvas', [function() { strokeWidth: 1 }; - return function(ctx) { + return function(ctx, disable) { /* Base functions */ @@ -101,6 +101,10 @@ angular.module('uiCropper').factory('cropCanvas', [function() { // Draw Filled Polygon var drawFilledPolygon = function(shape, fillStyle, centerCoords, scale) { + if(disable) { + return; + } + ctx.save(); ctx.fillStyle = fillStyle; ctx.beginPath(); @@ -124,6 +128,10 @@ angular.module('uiCropper').factory('cropCanvas', [function() { /* Icons */ this.drawIconMove = function(centerCoords, scale) { + if(disable) { + return; + } + drawFilledPolygon(shapeArrowN, colors.moveIconFill, centerCoords, scale); drawFilledPolygon(shapeArrowW, colors.moveIconFill, centerCoords, scale); drawFilledPolygon(shapeArrowS, colors.moveIconFill, centerCoords, scale); @@ -131,6 +139,10 @@ angular.module('uiCropper').factory('cropCanvas', [function() { }; this.drawIconResizeCircle = function(centerCoords, circleRadius, scale) { + if(disable) { + return; + } + var scaledCircleRadius = circleRadius * scale; ctx.save(); ctx.strokeStyle = colors.resizeCircleStroke; @@ -145,6 +157,10 @@ angular.module('uiCropper').factory('cropCanvas', [function() { }; this.drawIconResizeBoxBase = function(centerCoords, boxSize, scale) { + if(disable) { + return; + } + var scaledBoxSize = boxSize * scale; ctx.save(); ctx.strokeStyle = colors.resizeBoxStroke; @@ -155,11 +171,19 @@ angular.module('uiCropper').factory('cropCanvas', [function() { ctx.restore(); }; this.drawIconResizeBoxNESW = function(centerCoords, boxSize, scale) { + if(disable) { + return; + } + this.drawIconResizeBoxBase(centerCoords, boxSize, scale); drawFilledPolygon(shapeArrowNE, colors.resizeBoxArrowFill, centerCoords, scale); drawFilledPolygon(shapeArrowSW, colors.resizeBoxArrowFill, centerCoords, scale); }; this.drawIconResizeBoxNWSE = function(centerCoords, boxSize, scale) { + if(disable) { + return; + } + this.drawIconResizeBoxBase(centerCoords, boxSize, scale); drawFilledPolygon(shapeArrowNW, colors.resizeBoxArrowFill, centerCoords, scale); drawFilledPolygon(shapeArrowSE, colors.resizeBoxArrowFill, centerCoords, scale); @@ -168,6 +192,10 @@ angular.module('uiCropper').factory('cropCanvas', [function() { /* Crop Area */ this.drawCropArea = function(image, centerCoords, size, fnDrawClipPath) { + if(disable) { + return; + } + var xRatio = Math.abs(image.width / ctx.canvas.width), yRatio = Math.abs(image.height / ctx.canvas.height), xLeft = Math.abs(centerCoords.x - size.w / 2), @@ -194,6 +222,5 @@ angular.module('uiCropper').factory('cropCanvas', [function() { ctx.restore(); }; - }; }]); diff --git a/source/js/classes/crop-host.js b/source/js/classes/crop-host.js index 752a6c9..5292baf 100644 --- a/source/js/classes/crop-host.js +++ b/source/js/classes/crop-host.js @@ -67,15 +67,6 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir forceAspectRatio = false; /* PRIVATE FUNCTIONS */ - - this.setInitMax = function (bool) { - initMax = bool; - }; - - this.setAllowCropResizeOnCorners = function (bool) { - theArea.setAllowCropResizeOnCorners(bool); - }; - // Draw Scene function drawScene() { // clear canvas @@ -88,16 +79,32 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir ctx.save(); // and make it darker - ctx.fillStyle = 'rgba(0, 0, 0, 0.65)'; - ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); - - ctx.restore(); + if(!theArea._disableCrop){ + ctx.fillStyle = 'rgba(0, 0, 0, 0.65)'; + ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); + ctx.restore(); + } // draw Area theArea.draw(); } } + this.setInitMax = function (bool) { + initMax = bool; + }; + + this.setAllowCropResizeOnCorners = function (bool) { + theArea.setAllowCropResizeOnCorners(bool); + }; + + this.setDisableCrop = function(value){ + theArea.setDisableCrop(value); + drawScene(); + }; + + + var focusOnCanvas = function () { elCanvas[0].focus(); }; @@ -247,6 +254,10 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir }; var onMouseMove = function (e) { + if(theArea._disableCrop) { + return; + } + if (image !== null) { var offset = getElementOffset(ctx.canvas), pageX, pageY; @@ -265,6 +276,9 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir var onMouseDown = function (e) { e.preventDefault(); + if(theArea._disableCrop) { + return; + } if (!opts.allowPropagation) { e.stopPropagation(); @@ -287,6 +301,10 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir }; var onMouseUp = function (e) { + if(theArea._disableCrop) { + return; + } + if (image !== null) { var offset = getElementOffset(ctx.canvas), pageX, pageY; @@ -309,6 +327,10 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir }; var resizeCropAreaByDirection = function (direction) { + if(theArea._disableCrop) { + return; + } + var scale; switch (direction) { case 'up': @@ -327,6 +349,10 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir }; var moveCropArea = function (direction) { + if(theArea._disableCrop) { + return; + } + var center = theArea.getCenterPoint(); var step = 5; var point = { @@ -356,6 +382,10 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir }; var onKeyDown = function (e) { + if(theArea._disableCrop) { + return; + } + if (image !== null && opts.disableKeyboardAccess !== true) { var key = e.which; switch (key) { diff --git a/source/js/ui-cropper.js b/source/js/ui-cropper.js index 6791e01..21cda9e 100644 --- a/source/js/ui-cropper.js +++ b/source/js/ui-cropper.js @@ -45,6 +45,7 @@ angular.module('uiCropper').directive('uiCropper', ['$timeout', 'cropHost', 'cro dominantColor: '=?', paletteColor: '=?', paletteColorLength: '=?', + disableCrop: '=?', onChange: '&', onLoadBegin: '&', @@ -240,6 +241,12 @@ angular.module('uiCropper').directive('uiCropper', ['$timeout', 'cropHost', 'cro // Sync CropHost with Directive's options scope.$watch('image', function (newVal) { + // reset the original size and position to 0 + // it's mandatory because if not reset the size of the crop area won't maximise when the image was replaced + var area = cropHost.getArea(); + if (area) { + cropHost.getArea()._size = { x: 0, y: 0, w: 0, h: 0 }; + } if (newVal) { displayLoading(); } @@ -311,6 +318,10 @@ angular.module('uiCropper').directive('uiCropper', ['$timeout', 'cropHost', 'cro } }); + scope.$watch('disableCrop', function () { + cropHost.setDisableCrop(scope.disableCrop); + }); + // Update CropHost dimensions when the directive element is resized scope.$watch( function () {