diff --git a/README.md b/README.md index 1357592..bf60570 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,7 @@ angular.module('myApp', ['angular-img-cropper']); | min-width (*optional*) | The minimum width that the crop area can be set to. | min-height (*optional*) | The minimum height that the crop area can be set to. | cors (*optional*) | Allows images loaded from foreign origins to be used in canvas as if they were being loaded from the current origin ([MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image)). *Default: no* +| enforce-file-type (*optional*) | Forces the image to be converted to the specified file type rather then the file type of original specified image. ## Example usage diff --git a/dist/angular-img-cropper.min.js b/dist/angular-img-cropper.min.js index 6845d9a..8ac9a13 100644 --- a/dist/angular-img-cropper.min.js +++ b/dist/angular-img-cropper.min.js @@ -1,2 +1,2 @@ -/*! angular-img-cropper 09-07-2015 */ -angular.module("angular-img-cropper",[]).directive("imageCropper",["$document","$window","imageCropperDataShare",function(t,i,e){return{scope:{image:"=",croppedImage:"=",cropWidth:"=",cropHeight:"=",keepAspect:"=",touchRadius:"=",cropAreaBounds:"=",minWidth:"=",minHeight:"="},restrict:"A",link:function(t,i,o){function s(e,o){if(!r||e!==o){var s=i[0],a=t.cropWidth,h=t.cropHeight,c=t.keepAspect,g=t.touchRadius,p=r&&r.srcImage;r=new v(s,s.width/2-a/2,s.height/2-h/2,a,h,c,g),$(s).data("crop.angular-img-cropper",r),p?r.setImage(p):n(t.image)}}function n(i){if(i){var e=new Image;void 0!==o.cors&&"no"!==o.cors&&(e.crossOrigin="Anonymous"),e.addEventListener("load",function(){r.setImage(e),t.$apply()},!1),e.src=i}}var r,a=a||function(t,i){function e(){this.constructor=t}for(var o in i)i.hasOwnProperty(o)&&(t[o]=i[o]);e.prototype=i.prototype,t.prototype=new e},h=function(){function t(t,i,e){this.over=!1,this.drag=!1,this.position=new l(t,i),this.offset=new l(0,0),this.radius=e}return t.prototype.setDrag=function(t){this.drag=t,this.setOver(t)},t.prototype.draw=function(){},t.prototype.setOver=function(t){this.over=t},t.prototype.touchInBounds=function(t,i){return t>this.position.x-this.radius&&this.position.x+this.radius>t&&i>this.position.y-this.radius&&this.position.y+this.radius>i},t.prototype.getPosition=function(){return this.position},t.prototype.setPosition=function(t,i){this.position.x=t,this.position.y=i},t}(),c=function(){function t(i){this.borrowed=0,t.instance=this;for(var e=null,o=0;i>o;o++)if(0===o)this.firstAvailable=new l,e=this.firstAvailable;else{var s=new l;e.setNext(s),e=s}}return t.prototype.borrow=function(t,i){if(null==this.firstAvailable)throw"Pool exhausted";this.borrowed++;var e=this.firstAvailable;return this.firstAvailable=e.getNext(),e.x=t,e.y=i,e},t.prototype.returnPoint=function(t){this.borrowed--,t.x=0,t.y=0,t.setNext(this.firstAvailable),this.firstAvailable=t},t}(),g=function(){function t(){}return t.init=function(t){this.canvas=t,this.ctx=this.canvas.getContext("2d")},t.DEG2RAD=.0174532925,t}(),p=function(t){function i(i,e,o){t.call(this,i,e,o),this.iconPoints=[],this.scaledIconPoints=[],this.getDragIconPoints(this.iconPoints,1),this.getDragIconPoints(this.scaledIconPoints,1.2)}return a(i,t),i.prototype.draw=function(t){this.over||this.drag?this.drawIcon(t,this.scaledIconPoints):this.drawIcon(t,this.iconPoints)},i.prototype.getDragIconPoints=function(t,i){var e=17*i,o=14*i,s=8*i,n=4*i;t.push(c.instance.borrow(-n/2,e-s)),t.push(c.instance.borrow(-o/2,e-s)),t.push(c.instance.borrow(0,e)),t.push(c.instance.borrow(o/2,e-s)),t.push(c.instance.borrow(n/2,e-s)),t.push(c.instance.borrow(n/2,n/2)),t.push(c.instance.borrow(e-s,n/2)),t.push(c.instance.borrow(e-s,o/2)),t.push(c.instance.borrow(e,0)),t.push(c.instance.borrow(e-s,-o/2)),t.push(c.instance.borrow(e-s,-n/2)),t.push(c.instance.borrow(n/2,-n/2)),t.push(c.instance.borrow(n/2,-e+s)),t.push(c.instance.borrow(o/2,-e+s)),t.push(c.instance.borrow(0,-e)),t.push(c.instance.borrow(-o/2,-e+s)),t.push(c.instance.borrow(-n/2,-e+s)),t.push(c.instance.borrow(-n/2,-n/2)),t.push(c.instance.borrow(-e+s,-n/2)),t.push(c.instance.borrow(-e+s,-o/2)),t.push(c.instance.borrow(-e,0)),t.push(c.instance.borrow(-e+s,o/2)),t.push(c.instance.borrow(-e+s,n/2)),t.push(c.instance.borrow(-n/2,n/2))},i.prototype.drawIcon=function(t,i){t.beginPath(),t.moveTo(i[0].x+this.position.x,i[0].y+this.position.y);for(var e=0;i.length>e;e++){var o=i[e];t.lineTo(o.x+this.position.x,o.y+this.position.y)}t.closePath(),t.fillStyle="rgba(255,228,0,1)",t.fill()},i.prototype.recalculatePosition=function(t){var i=t.getCentre();this.setPosition(i.x,i.y),c.instance.returnPoint(i)},i}(h),u=function(t){function i(i,e,o){t.call(this,i,e,o)}return a(i,t),i.prototype.drawCornerBorder=function(t){var i=10;(this.over||this.drag)&&(i=12);var e=1,o=1;this.horizontalNeighbour.position.xe?(s=this.canvasWidth,n=this.canvasWidth*e):(n=this.canvasHeight,s=this.canvasHeight/e),this.ratioW=s/this.srcImage.width,this.ratioH=n/this.srcImage.height,e>o?this.drawImageIOSFix(t,this.srcImage,0,0,this.srcImage.width,this.srcImage.height,this.buffer.width/2-s/2,0,s,n):this.drawImageIOSFix(t,this.srcImage,0,0,this.srcImage.width,this.srcImage.height,0,this.buffer.height/2-n/2,s,n),this.buffer.getContext("2d").drawImage(this.canvas,0,0,this.canvasWidth,this.canvasHeight),t.fillStyle="rgba(0, 0, 0, 0.7)",t.fillRect(0,0,this.canvasWidth,this.canvasHeight),t.drawImage(this.buffer,i.left,i.top,Math.max(i.getWidth(),1),Math.max(i.getHeight(),1),i.left,i.top,i.getWidth(),i.getHeight());for(var r,a=0;this.markers.length>a;a++)r=this.markers[a],r.draw(t);this.center.draw(t),t.lineWidth=2,t.strokeStyle="rgba(255,228,0,1)",t.strokeRect(i.left,i.top,i.getWidth(),i.getHeight())}else t.fillStyle="rgba(192,192,192,1)",t.fillRect(0,0,this.canvas.width,this.canvas.height)},i.prototype.dragCrop=function(i,e,o){var s=this.getBounds(),n=i-s.getWidth()/2,r=i+s.getWidth()/2,a=e-s.getHeight()/2,h=e+s.getHeight()/2;r>=this.maxXClamp&&(i=this.maxXClamp-s.getWidth()/2),this.minXClamp>=n&&(i=s.getWidth()/2+this.minXClamp),this.minYClamp>a&&(e=s.getHeight()/2+this.minYClamp),h>=this.maxYClamp&&(e=this.maxYClamp-s.getHeight()/2),this.tl.moveX(i-s.getWidth()/2),this.tl.moveY(e-s.getHeight()/2),this.tr.moveX(i+s.getWidth()/2),this.tr.moveY(e-s.getHeight()/2),this.bl.moveX(i-s.getWidth()/2),this.bl.moveY(e+s.getHeight()/2),this.br.moveX(i+s.getWidth()/2),this.br.moveY(e+s.getHeight()/2),o.setPosition(i,e),t.cropAreaBounds&&this.imageSet&&(t.cropAreaBounds=this.getCropBounds(),t.$apply())},i.prototype.enforceMinSize=function(i,e,o){var s=i-o.getHorizontalNeighbour().getPosition().x,n=e-o.getVerticalNeighbour().getPosition().y,r=t.minWidth-Math.abs(s),a=t.minHeight-Math.abs(n);return 0==s||0==n?(i=o.getPosition().x,e=o.getPosition().y,c.instance.borrow(i,e)):(t.keepAspect?r>0&&a/this.aspectRatio>0?r>a/this.aspectRatio?0>s?(i-=r,0>n?e-=r*this.aspectRatio:e+=r*this.aspectRatio):(i+=r,0>n?e-=r*this.aspectRatio:e+=r*this.aspectRatio):0>n?(e-=a,0>s?i-=a/this.aspectRatio:i+=a/this.aspectRatio):(e+=a,0>s?i-=a/this.aspectRatio:i+=a/this.aspectRatio):r>0?0>s?(i-=r,0>n?e-=r*this.aspectRatio:e+=r*this.aspectRatio):(i+=r,0>n?e-=r*this.aspectRatio:e+=r*this.aspectRatio):a>0&&(0>n?(e-=a,0>s?i-=a/this.aspectRatio:i+=a/this.aspectRatio):(e+=a,0>s?i-=a/this.aspectRatio:i+=a/this.aspectRatio)):(r>0&&(0>s?i-=r:i+=r),a>0&&(0>n?e-=a:e+=a)),(this.minXClamp>i||i>this.maxXClamp||this.minYClamp>e||e>this.maxYClamp)&&(i=o.getPosition().x,e=o.getPosition().y),c.instance.borrow(i,e))},i.prototype.dragCorner=function(i,e,o){var s,n=0,r=0,a=0,h=0,g=0,p=0,u=0,d=0,l=0;if(t.keepAspect){if(s=o.getHorizontalNeighbour().getVerticalNeighbour(),a=s.getPosition().x,h=s.getPosition().y,s.getPosition().x>=i){if(s.getPosition().y>=e){if(n=a-100/this.aspectRatio,r=h-100/this.aspectRatio*this.aspectRatio,l=this.getSide(c.instance.borrow(n,r),s.getPosition(),c.instance.borrow(i,e)),l>0){g=Math.abs(s.getPosition().y-e),p=g/this.aspectRatio,u=s.getPosition().y-g,d=s.getPosition().x-p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}else if(0>l){p=Math.abs(s.getPosition().x-i),g=p*this.aspectRatio,u=s.getPosition().y-g,d=s.getPosition().x-p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}}else if(n=a-100/this.aspectRatio,r=h+100/this.aspectRatio*this.aspectRatio,l=this.getSide(c.instance.borrow(n,r),s.getPosition(),c.instance.borrow(i,e)),l>0){p=Math.abs(s.getPosition().x-i),g=p*this.aspectRatio,u=s.getPosition().y+g,d=s.getPosition().x-p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}else if(0>l){g=Math.abs(s.getPosition().y-e),p=g/this.aspectRatio,u=s.getPosition().y+g,d=s.getPosition().x-p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}}else if(s.getPosition().y>=e){if(n=a+100/this.aspectRatio,r=h-100/this.aspectRatio*this.aspectRatio,l=this.getSide(c.instance.borrow(n,r),s.getPosition(),c.instance.borrow(i,e)),0>l){g=Math.abs(s.getPosition().y-e),p=g/this.aspectRatio,u=s.getPosition().y-g,d=s.getPosition().x+p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}else if(l>0){p=Math.abs(s.getPosition().x-i),g=p*this.aspectRatio,u=s.getPosition().y-g,d=s.getPosition().x+p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}}else if(n=a+100/this.aspectRatio,r=h+100/this.aspectRatio*this.aspectRatio,l=this.getSide(c.instance.borrow(n,r),s.getPosition(),c.instance.borrow(i,e)),0>l){p=Math.abs(s.getPosition().x-i),g=p*this.aspectRatio,u=s.getPosition().y+g,d=s.getPosition().x+p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}else if(l>0){g=Math.abs(s.getPosition().y-e),p=g/this.aspectRatio,u=s.getPosition().y+g,d=s.getPosition().x+p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}}else{var m=this.enforceMinSize(i,e,o);o.move(m.x,m.y),c.instance.returnPoint(m)}this.center.recalculatePosition(this.getBounds()),t.cropAreaBounds&&this.imageSet&&(t.cropAreaBounds=this.getCropBounds(),t.$apply())},i.prototype.getSide=function(t,i,e){var o=this.sign((i.x-t.x)*(e.y-t.y)-(i.y-t.y)*(e.x-t.x));return c.instance.returnPoint(t),c.instance.returnPoint(e),o},i.prototype.sign=function(t){return+t===t?0===t?t:t>0?1:-1:0/0},i.prototype.handleRelease=function(t){if(null!=t){for(var i=0,e=0;this.currentDragTouches.length>e;e++)t.id==this.currentDragTouches[e].id&&(this.currentDragTouches[e].dragHandle.setDrag(!1),t.dragHandle=null,i=e);this.currentDragTouches.splice(i,1),this.draw(this.ctx)}},i.prototype.handleMove=function(t){for(var i=!1,o=0;this.currentDragTouches.length>o;o++)if(t.id==this.currentDragTouches[o].id&&null!=this.currentDragTouches[o].dragHandle){var s=this.currentDragTouches[o],n=this.clampPosition(t.x-s.dragHandle.offset.x,t.y-s.dragHandle.offset.y);t.x=n.x,t.y=n.y,c.instance.returnPoint(n),s.dragHandle instanceof u?this.dragCorner(t.x,t.y,s.dragHandle):this.dragCrop(t.x,t.y,s.dragHandle),this.currentlyInteracting=!0,i=!0,e.setPressed(this.canvas);break}if(!i){for(var r=0;this.markers.length>r;r++){var a=this.markers[r];if(a.touchInBounds(t.x,t.y)){t.dragHandle=a,this.currentDragTouches.push(t),a.setDrag(!0),t.dragHandle.offset.x=t.x-t.dragHandle.getPosition().x,t.dragHandle.offset.y=t.y-t.dragHandle.getPosition().y,this.dragCorner(t.x-t.dragHandle.offset.x,t.y-t.dragHandle.offset.y,t.dragHandle);break}}null==t.dragHandle&&this.center.touchInBounds(t.x,t.y)&&(t.dragHandle=this.center,this.currentDragTouches.push(t),t.dragHandle.setDrag(!0),t.dragHandle.offset.x=t.x-t.dragHandle.getPosition().x,t.dragHandle.offset.y=t.y-t.dragHandle.getPosition().y,this.dragCrop(t.x-t.dragHandle.offset.x,t.y-t.dragHandle.offset.y,t.dragHandle))}},i.prototype.updateClampBounds=function(){var t=this.srcImage.height/this.srcImage.width,i=this.canvas.height/this.canvas.width,e=this.canvas.width,o=this.canvas.height;i>t?(e=this.canvas.width,o=this.canvas.width*t):(o=this.canvas.height,e=this.canvas.height/t),this.minXClamp=this.canvas.width/2-e/2,this.minYClamp=this.canvas.height/2-o/2,this.maxXClamp=this.canvas.width/2+e/2,this.maxYClamp=this.canvas.height/2+o/2},i.prototype.getCropBounds=function(){var t=this.canvas.height-2*this.minYClamp,i=this.getBounds();return i.top=Math.round((t-i.top+this.minYClamp)/this.ratioH),i.bottom=Math.round((t-i.bottom+this.minYClamp)/this.ratioH),i.left=Math.round((i.left-this.minXClamp)/this.ratioW),i.right=Math.round((i.right-this.minXClamp)/this.ratioW),i},i.prototype.clampPosition=function(t,i){return this.minXClamp>t&&(t=this.minXClamp),t>this.maxXClamp&&(t=this.maxXClamp),this.minYClamp>i&&(i=this.minYClamp),i>this.maxYClamp&&(i=this.maxYClamp),c.instance.borrow(t,i)},i.prototype.isImageSet=function(){return this.imageSet},i.prototype.setImage=function(i){if(!i)throw"Image is null";this.imageSet=!0,this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);var e=this.buffer.getContext("2d");e.clearRect(0,0,this.buffer.width,this.buffer.height);var s=i.src.split("."),n=s[1];("png"==n||"jpg"==n)&&(this.fileType=n),this.srcImage=i,this.updateClampBounds();var r=this.srcImage.height/this.srcImage.width,a=this.getBounds(),h=a.getHeight()/a.getWidth(),g=this.canvas.width,p=this.canvas.height;this.canvasWidth=g,this.canvasHeight=p;var u=this.canvas.width/2,l=this.canvas.height/2,m=c.instance.borrow(u-a.getWidth()/2,l+a.getHeight()/2),v=c.instance.borrow(u+a.getWidth()/2,l+a.getHeight()/2),f=c.instance.borrow(u-a.getWidth()/2,l-a.getHeight()/2),y=c.instance.borrow(u+a.getWidth()/2,l-a.getHeight()/2);if(this.tl.setPosition(m.x,m.y),this.tr.setPosition(v.x,v.y),this.bl.setPosition(f.x,f.y),this.br.setPosition(y.x,y.y),c.instance.returnPoint(m),c.instance.returnPoint(v),c.instance.returnPoint(f),c.instance.returnPoint(y),this.center.setPosition(u,l),h>r){var w=Math.min(g*r,p),b=w/h;m=c.instance.borrow(u-b/2,l+w/2),v=c.instance.borrow(u+b/2,l+w/2),f=c.instance.borrow(u-b/2,l-w/2),y=c.instance.borrow(u+b/2,l-w/2)}else if(r>h){var x=Math.min(p/r,g),P=x*h;m=c.instance.borrow(u-x/2,l+P/2),v=c.instance.borrow(u+x/2,l+P/2),f=c.instance.borrow(u-x/2,l-P/2),y=c.instance.borrow(u+x/2,l-P/2)}else{var x=Math.min(p,g),P=x*h;m=c.instance.borrow(u-x/2,l+P/2),v=c.instance.borrow(u+x/2,l+P/2),f=c.instance.borrow(u-x/2,l-P/2),y=c.instance.borrow(u+x/2,l-P/2)}if(this.tl.setPosition(m.x,m.y),this.tr.setPosition(v.x,v.y),this.bl.setPosition(f.x,f.y),this.br.setPosition(y.x,y.y),c.instance.returnPoint(m),c.instance.returnPoint(v),c.instance.returnPoint(f),c.instance.returnPoint(y),t.cropAreaBounds&&void 0!==t.cropAreaBounds.left&&void 0!==t.cropAreaBounds.top&&void 0!==t.cropAreaBounds.right&&void 0!==t.cropAreaBounds.bottom){var H=this.canvasHeight/this.canvasWidth;H>r?(g=this.canvasWidth,p=this.canvasWidth*r):(p=this.canvasHeight,g=this.canvasHeight/r),this.ratioW=g/this.srcImage.width,this.ratioH=p/this.srcImage.height;var I=new d;I.top=Math.round(p+this.minYClamp-this.ratioH*t.cropAreaBounds.top),I.bottom=Math.round(p+this.minYClamp-this.ratioH*t.cropAreaBounds.bottom),I.left=Math.round(this.ratioW*t.cropAreaBounds.left+this.minXClamp),I.right=Math.round(this.ratioW*t.cropAreaBounds.right+this.minXClamp),this.tl.setPosition(I.left,I.top),this.tr.setPosition(I.right,I.top),this.bl.setPosition(I.left,I.bottom),this.br.setPosition(I.right,I.bottom),this.center.setPosition(I.left+I.getWidth()/2,I.top+I.getHeight()/2)}this.vertSquashRatio=this.detectVerticalSquash(this.srcImage),this.draw(this.ctx);var C=this.getCroppedImage(t.cropWidth,t.cropHeight);void 0!==o.croppedImage&&(t.croppedImage=C.src),t.cropAreaBounds&&this.imageSet&&(t.cropAreaBounds=this.getCropBounds())},i.prototype.getCroppedImage=function(t,i){var e=this.getBounds();if(!this.srcImage)throw"Source image not set.";if(t&&i){var o=this.srcImage.height/this.srcImage.width,s=this.canvas.height/this.canvas.width,n=this.canvas.width,r=this.canvas.height;s>o?(n=this.canvas.width,r=this.canvas.width*o):o>s?(r=this.canvas.height,n=this.canvas.height/o):(r=this.canvas.height,n=this.canvas.width),this.ratioW=n/this.srcImage.width,this.ratioH=r/this.srcImage.height,this.cropCanvas.width=t,this.cropCanvas.height=i;var a=(this.buffer.height-r)/2/this.ratioH,h=(this.buffer.width-n)/2/this.ratioW;this.drawImageIOSFix(this.cropCanvas.getContext("2d"),this.srcImage,Math.max(Math.round(e.left/this.ratioW-h),0),Math.max(Math.round(e.top/this.ratioH-a),0),Math.max(Math.round(e.getWidth()/this.ratioW),1),Math.max(Math.round(e.getHeight()/this.ratioH),1),0,0,t,i),this.croppedImage.width=t,this.croppedImage.height=i}else this.cropCanvas.width=Math.max(e.getWidth(),1),this.cropCanvas.height=Math.max(e.getHeight(),1),this.cropCanvas.getContext("2d").drawImage(this.buffer,e.left,e.top,Math.max(e.getWidth(),1),Math.max(e.getHeight(),1),0,0,e.getWidth(),e.getHeight()),this.croppedImage.width=this.cropCanvas.width,this.croppedImage.height=this.cropCanvas.height;return this.croppedImage.src=this.cropCanvas.toDataURL("image/"+this.fileType),this.croppedImage},i.prototype.getBounds=function(){for(var t=Number.MAX_VALUE,i=Number.MAX_VALUE,e=-Number.MAX_VALUE,o=-Number.MAX_VALUE,s=0;this.markers.length>s;s++){var n=this.markers[s];t>n.getPosition().x&&(t=n.getPosition().x),n.getPosition().x>e&&(e=n.getPosition().x),i>n.getPosition().y&&(i=n.getPosition().y),n.getPosition().y>o&&(o=n.getPosition().y)}var r=new d;return r.left=t,r.right=e,r.top=i,r.bottom=o,r},i.prototype.setBounds=function(t){for(var i,e,o,s,n=this.getBounds(),r=0;this.markers.length>r;r++){var a=this.markers[r];a.getPosition().x==n.left?a.getPosition().y==n.top?i=a:o=a:a.getPosition().y==n.top?e=a:s=a}i.setPosition(t.left,t.top),e.setPosition(t.right,t.top),o.setPosition(t.left,t.bottom),s.setPosition(t.right,t.bottom),this.center.recalculatePosition(t),this.center.draw(this.ctx)},i.prototype.getMousePos=function(t,i){var e=t.getBoundingClientRect();return c.instance.borrow(i.clientX-e.left,i.clientY-e.top)},i.prototype.getTouchPos=function(t,i){var e=t.getBoundingClientRect();return c.instance.borrow(i.clientX-e.left,i.clientY-e.top)},i.prototype.onTouchMove=function(t){if(r.isImageSet()){if(t.preventDefault(),t.touches.length>=1)for(var i=0;t.touches.length>i;i++){var e=t.touches[i],o=this.getTouchPos(this.canvas,e),s=new m(o.x,o.y,e.identifier);c.instance.returnPoint(o),this.move(s,t)}this.draw(this.ctx)}},i.prototype.onMouseMove=function(t){if(r.isImageSet()){var i=this.getMousePos(this.canvas,t);this.move(new m(i.x,i.y,0),t);var e=this.getDragTouchForID(0);e?(e.x=i.x,e.y=i.y):e=new m(i.x,i.y,0),c.instance.returnPoint(i),this.drawCursors(e,t),this.draw(this.ctx)}},i.prototype.move=function(t){this.isMouseDown&&this.handleMove(t)},i.prototype.getDragTouchForID=function(t){for(var i=0;this.currentDragTouches.length>i;i++)if(t==this.currentDragTouches[i].id)return this.currentDragTouches[i]},i.prototype.drawCursors=function(t,i){var o=!1;null!=t&&(t.dragHandle==this.center&&(e.setStyle(this.canvas,"move"),o=!0),null!=t.dragHandle&&t.dragHandle instanceof u&&(this.drawCornerCursor(t.dragHandle,t.dragHandle.getPosition().x,t.dragHandle.getPosition().y,i),o=!0));var s=!1;if(!o){for(var n=0;this.markers.length>n;n++)s=s||this.drawCornerCursor(this.markers[n],t.x,t.y,i);s||e.setStyle(this.canvas,"initial")}s||o||!this.center.touchInBounds(t.x,t.y)?this.center.setOver(!1):(this.center.setOver(!0),e.setOver(this.canvas),e.setStyle(this.canvas,"move"))},i.prototype.drawCornerCursor=function(t,i,o){return t.touchInBounds(i,o)?(t.setOver(!0),t.getHorizontalNeighbour().getPosition().x>t.getPosition().x?t.getVerticalNeighbour().getPosition().y>t.getPosition().y?(e.setOver(this.canvas),e.setStyle(this.canvas,"nwse-resize")):(e.setOver(this.canvas),e.setStyle(this.canvas,"nesw-resize")):t.getVerticalNeighbour().getPosition().y>t.getPosition().y?(e.setOver(this.canvas),e.setStyle(this.canvas,"nesw-resize")):(e.setOver(this.canvas),e.setStyle(this.canvas,"nwse-resize")),!0):(t.setOver(!1),!1)},i.prototype.onTouchStart=function(){r.isImageSet()&&(this.isMouseDown=!0)},i.prototype.onTouchEnd=function(i){if(r.isImageSet()){for(var e=0;i.changedTouches.length>e;e++){var s=i.changedTouches[e],n=this.getDragTouchForID(s.identifier);null!=n&&((n.dragHandle instanceof u||n.dragHandle instanceof p)&&n.dragHandle.setOver(!1),this.handleRelease(n))}if(r.isImageSet()&&this.currentlyInteracting){var a=this.getCroppedImage(t.cropWidth,t.cropHeight);void 0!==o.croppedImage&&(t.croppedImage=a.src),t.$apply()}0==this.currentDragTouches.length&&(this.isMouseDown=!1,this.currentlyInteracting=!1)}},i.prototype.drawImageIOSFix=function(t,i,e,o,s,n,r,a,h,c){t.drawImage(i,e*this.vertSquashRatio,o*this.vertSquashRatio,s*this.vertSquashRatio,n*this.vertSquashRatio,r,a,h,c)},i.prototype.detectVerticalSquash=function(t){var i=(t.naturalWidth,t.naturalHeight),e=document.createElement("canvas");e.width=1,e.height=i;var o=e.getContext("2d");o.drawImage(t,0,0);for(var s=o.getImageData(0,0,1,i).data,n=0,r=i,a=i;a>n;){var h=s[4*(a-1)+3];0===h?r=a:n=a,a=r+n>>1}var c=a/i;return 0===c?1:c},i.prototype.onMouseDown=function(){r.isImageSet()&&(this.isMouseDown=!0)},i.prototype.onMouseUp=function(){if(r.isImageSet()){if(e.setReleased(this.canvas),this.isMouseDown=!1,this.handleRelease(new m(0,0,0)),1==this.currentlyInteracting){var i=this.getCroppedImage(t.cropWidth,t.cropHeight);void 0!==o.croppedImage&&(t.croppedImage=i.src),t.$apply()}this.currentlyInteracting=!1}},i}();t.$watch("cropWidth",s),t.$watch("cropHeight",s),t.$watch("keepAspect",s),t.$watch("touchRadius",s),t.$watch("image",n)}}}]),angular.module("angular-img-cropper").directive("imgCropperFileread",["$timeout",function(t){return{scope:{image:"="},link:function(i,e){e.bind("change",function(e){var o=new FileReader;o.onload=function(e){t(function(){i.image=e.target.result},0)},e.target.files[0]&&o.readAsDataURL(e.target.files[0])})}}}]),angular.module("angular-img-cropper").directive("imgCropperFilereadCall",function(){return{scope:{control:"="},link:function(t){t.internalControl=t.control||{},t.internalControl.load=function(t){var i=angular.element(document.querySelector(t)),e=document.createEvent("MouseEvent");e.initEvent("click",!0,!1),i[0].dispatchEvent(e)}}}}),angular.module("angular-img-cropper").factory("imageCropperDataShare",function(){var t,i,e={};return e.setPressed=function(i){t=i},e.setReleased=function(i){i===t&&(t=void 0)},e.setOver=function(t){i=t},e.setStyle=function(e,o){void 0!==t?t===e&&angular.element(document.documentElement).css("cursor",o):e===i&&angular.element(document.documentElement).css("cursor",o)},e}); \ No newline at end of file +/*! angular-img-cropper 05-06-2016 */ +angular.module("angular-img-cropper",[]).directive("imageCropper",["$document","$window","imageCropperDataShare",function(t,i,e){return{scope:{image:"=",croppedImage:"=",cropWidth:"=",cropHeight:"=",keepAspect:"=",touchRadius:"=",cropAreaBounds:"=",minWidth:"=",minHeight:"=",enforceFileType:"@"},restrict:"A",link:function(t,i,o){function s(e,o){if(!r||e!==o){var s=i[0],a=t.cropWidth,h=t.cropHeight,c=t.keepAspect,g=t.touchRadius,p=r&&r.srcImage;r=new v(s,s.width/2-a/2,s.height/2-h/2,a,h,c,g),$(s).data("crop.angular-img-cropper",r),p?r.setImage(p,t.image.fileType):n(t.image)}}function n(i){if(i){var e=new Image;void 0!==o.cors&&"no"!==o.cors&&(e.crossOrigin="Anonymous"),e.addEventListener("load",function(){r.setImage(e,i.fileType),t.$apply()},!1),e.src=i.imageData}}var r,a=a||function(t,i){function e(){this.constructor=t}for(var o in i)i.hasOwnProperty(o)&&(t[o]=i[o]);e.prototype=i.prototype,t.prototype=new e},h=function(){function t(t,i,e){this.over=!1,this.drag=!1,this.position=new l(t,i),this.offset=new l(0,0),this.radius=e}return t.prototype.setDrag=function(t){this.drag=t,this.setOver(t)},t.prototype.draw=function(){},t.prototype.setOver=function(t){this.over=t},t.prototype.touchInBounds=function(t,i){return t>this.position.x-this.radius&&this.position.x+this.radius>t&&i>this.position.y-this.radius&&this.position.y+this.radius>i},t.prototype.getPosition=function(){return this.position},t.prototype.setPosition=function(t,i){this.position.x=t,this.position.y=i},t}(),c=function(){function t(i){this.borrowed=0,t.instance=this;for(var e=null,o=0;i>o;o++)if(0===o)this.firstAvailable=new l,e=this.firstAvailable;else{var s=new l;e.setNext(s),e=s}}return t.prototype.borrow=function(t,i){if(null==this.firstAvailable)throw"Pool exhausted";this.borrowed++;var e=this.firstAvailable;return this.firstAvailable=e.getNext(),e.x=t,e.y=i,e},t.prototype.returnPoint=function(t){this.borrowed--,t.x=0,t.y=0,t.setNext(this.firstAvailable),this.firstAvailable=t},t}(),g=function(){function t(){}return t.init=function(t){this.canvas=t,this.ctx=this.canvas.getContext("2d")},t.DEG2RAD=.0174532925,t}(),p=function(t){function i(i,e,o){t.call(this,i,e,o),this.iconPoints=[],this.scaledIconPoints=[],this.getDragIconPoints(this.iconPoints,1),this.getDragIconPoints(this.scaledIconPoints,1.2)}return a(i,t),i.prototype.draw=function(t){this.over||this.drag?this.drawIcon(t,this.scaledIconPoints):this.drawIcon(t,this.iconPoints)},i.prototype.getDragIconPoints=function(t,i){var e=17*i,o=14*i,s=8*i,n=4*i;t.push(c.instance.borrow(-n/2,e-s)),t.push(c.instance.borrow(-o/2,e-s)),t.push(c.instance.borrow(0,e)),t.push(c.instance.borrow(o/2,e-s)),t.push(c.instance.borrow(n/2,e-s)),t.push(c.instance.borrow(n/2,n/2)),t.push(c.instance.borrow(e-s,n/2)),t.push(c.instance.borrow(e-s,o/2)),t.push(c.instance.borrow(e,0)),t.push(c.instance.borrow(e-s,-o/2)),t.push(c.instance.borrow(e-s,-n/2)),t.push(c.instance.borrow(n/2,-n/2)),t.push(c.instance.borrow(n/2,-e+s)),t.push(c.instance.borrow(o/2,-e+s)),t.push(c.instance.borrow(0,-e)),t.push(c.instance.borrow(-o/2,-e+s)),t.push(c.instance.borrow(-n/2,-e+s)),t.push(c.instance.borrow(-n/2,-n/2)),t.push(c.instance.borrow(-e+s,-n/2)),t.push(c.instance.borrow(-e+s,-o/2)),t.push(c.instance.borrow(-e,0)),t.push(c.instance.borrow(-e+s,o/2)),t.push(c.instance.borrow(-e+s,n/2)),t.push(c.instance.borrow(-n/2,n/2))},i.prototype.drawIcon=function(t,i){t.beginPath(),t.moveTo(i[0].x+this.position.x,i[0].y+this.position.y);for(var e=0;i.length>e;e++){var o=i[e];t.lineTo(o.x+this.position.x,o.y+this.position.y)}t.closePath(),t.fillStyle="rgba(255,228,0,1)",t.fill()},i.prototype.recalculatePosition=function(t){var i=t.getCentre();this.setPosition(i.x,i.y),c.instance.returnPoint(i)},i}(h),u=function(t){function i(i,e,o){t.call(this,i,e,o)}return a(i,t),i.prototype.drawCornerBorder=function(t){var i=10;(this.over||this.drag)&&(i=12);var e=1,o=1;this.horizontalNeighbour.position.xe?(s=this.canvasWidth,n=this.canvasWidth*e):(n=this.canvasHeight,s=this.canvasHeight/e),this.ratioW=s/this.srcImage.width,this.ratioH=n/this.srcImage.height,e>o?this.drawImageIOSFix(t,this.srcImage,0,0,this.srcImage.width,this.srcImage.height,this.buffer.width/2-s/2,0,s,n):this.drawImageIOSFix(t,this.srcImage,0,0,this.srcImage.width,this.srcImage.height,0,this.buffer.height/2-n/2,s,n),this.buffer.getContext("2d").drawImage(this.canvas,0,0,this.canvasWidth,this.canvasHeight),t.fillStyle="rgba(0, 0, 0, 0.7)",t.fillRect(0,0,this.canvasWidth,this.canvasHeight),t.drawImage(this.buffer,i.left,i.top,Math.max(i.getWidth(),1),Math.max(i.getHeight(),1),i.left,i.top,i.getWidth(),i.getHeight());for(var r,a=0;this.markers.length>a;a++)r=this.markers[a],r.draw(t);this.center.draw(t),t.lineWidth=2,t.strokeStyle="rgba(255,228,0,1)",t.strokeRect(i.left,i.top,i.getWidth(),i.getHeight())}else t.fillStyle="rgba(192,192,192,1)",t.fillRect(0,0,this.canvas.width,this.canvas.height)},i.prototype.dragCrop=function(i,e,o){var s=this.getBounds(),n=i-s.getWidth()/2,r=i+s.getWidth()/2,a=e-s.getHeight()/2,h=e+s.getHeight()/2;r>=this.maxXClamp&&(i=this.maxXClamp-s.getWidth()/2),this.minXClamp>=n&&(i=s.getWidth()/2+this.minXClamp),this.minYClamp>a&&(e=s.getHeight()/2+this.minYClamp),h>=this.maxYClamp&&(e=this.maxYClamp-s.getHeight()/2),this.tl.moveX(i-s.getWidth()/2),this.tl.moveY(e-s.getHeight()/2),this.tr.moveX(i+s.getWidth()/2),this.tr.moveY(e-s.getHeight()/2),this.bl.moveX(i-s.getWidth()/2),this.bl.moveY(e+s.getHeight()/2),this.br.moveX(i+s.getWidth()/2),this.br.moveY(e+s.getHeight()/2),o.setPosition(i,e),t.cropAreaBounds&&this.imageSet&&(t.cropAreaBounds=this.getCropBounds(),t.$apply())},i.prototype.enforceMinSize=function(i,e,o){var s=i-o.getHorizontalNeighbour().getPosition().x,n=e-o.getVerticalNeighbour().getPosition().y,r=t.minWidth-Math.abs(s),a=t.minHeight-Math.abs(n);return 0==s||0==n?(i=o.getPosition().x,e=o.getPosition().y,c.instance.borrow(i,e)):(t.keepAspect?r>0&&a/this.aspectRatio>0?r>a/this.aspectRatio?0>s?(i-=r,0>n?e-=r*this.aspectRatio:e+=r*this.aspectRatio):(i+=r,0>n?e-=r*this.aspectRatio:e+=r*this.aspectRatio):0>n?(e-=a,0>s?i-=a/this.aspectRatio:i+=a/this.aspectRatio):(e+=a,0>s?i-=a/this.aspectRatio:i+=a/this.aspectRatio):r>0?0>s?(i-=r,0>n?e-=r*this.aspectRatio:e+=r*this.aspectRatio):(i+=r,0>n?e-=r*this.aspectRatio:e+=r*this.aspectRatio):a>0&&(0>n?(e-=a,0>s?i-=a/this.aspectRatio:i+=a/this.aspectRatio):(e+=a,0>s?i-=a/this.aspectRatio:i+=a/this.aspectRatio)):(r>0&&(0>s?i-=r:i+=r),a>0&&(0>n?e-=a:e+=a)),(this.minXClamp>i||i>this.maxXClamp||this.minYClamp>e||e>this.maxYClamp)&&(i=o.getPosition().x,e=o.getPosition().y),c.instance.borrow(i,e))},i.prototype.dragCorner=function(i,e,o){var s,n=0,r=0,a=0,h=0,g=0,p=0,u=0,d=0,l=0;if(t.keepAspect){if(s=o.getHorizontalNeighbour().getVerticalNeighbour(),a=s.getPosition().x,h=s.getPosition().y,s.getPosition().x>=i){if(s.getPosition().y>=e){if(n=a-100/this.aspectRatio,r=h-100/this.aspectRatio*this.aspectRatio,l=this.getSide(c.instance.borrow(n,r),s.getPosition(),c.instance.borrow(i,e)),l>0){g=Math.abs(s.getPosition().y-e),p=g/this.aspectRatio,u=s.getPosition().y-g,d=s.getPosition().x-p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}else if(0>l){p=Math.abs(s.getPosition().x-i),g=p*this.aspectRatio,u=s.getPosition().y-g,d=s.getPosition().x-p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}}else if(n=a-100/this.aspectRatio,r=h+100/this.aspectRatio*this.aspectRatio,l=this.getSide(c.instance.borrow(n,r),s.getPosition(),c.instance.borrow(i,e)),l>0){p=Math.abs(s.getPosition().x-i),g=p*this.aspectRatio,u=s.getPosition().y+g,d=s.getPosition().x-p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}else if(0>l){g=Math.abs(s.getPosition().y-e),p=g/this.aspectRatio,u=s.getPosition().y+g,d=s.getPosition().x-p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}}else if(s.getPosition().y>=e){if(n=a+100/this.aspectRatio,r=h-100/this.aspectRatio*this.aspectRatio,l=this.getSide(c.instance.borrow(n,r),s.getPosition(),c.instance.borrow(i,e)),0>l){g=Math.abs(s.getPosition().y-e),p=g/this.aspectRatio,u=s.getPosition().y-g,d=s.getPosition().x+p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}else if(l>0){p=Math.abs(s.getPosition().x-i),g=p*this.aspectRatio,u=s.getPosition().y-g,d=s.getPosition().x+p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}}else if(n=a+100/this.aspectRatio,r=h+100/this.aspectRatio*this.aspectRatio,l=this.getSide(c.instance.borrow(n,r),s.getPosition(),c.instance.borrow(i,e)),0>l){p=Math.abs(s.getPosition().x-i),g=p*this.aspectRatio,u=s.getPosition().y+g,d=s.getPosition().x+p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}else if(l>0){g=Math.abs(s.getPosition().y-e),p=g/this.aspectRatio,u=s.getPosition().y+g,d=s.getPosition().x+p;var m=this.enforceMinSize(d,u,o);o.move(m.x,m.y),c.instance.returnPoint(m)}}else{var m=this.enforceMinSize(i,e,o);o.move(m.x,m.y),c.instance.returnPoint(m)}this.center.recalculatePosition(this.getBounds()),t.cropAreaBounds&&this.imageSet&&(t.cropAreaBounds=this.getCropBounds(),t.$apply())},i.prototype.getSide=function(t,i,e){var o=this.sign((i.x-t.x)*(e.y-t.y)-(i.y-t.y)*(e.x-t.x));return c.instance.returnPoint(t),c.instance.returnPoint(e),o},i.prototype.sign=function(t){return+t===t?0===t?t:t>0?1:-1:0/0},i.prototype.handleRelease=function(t){if(null!=t){for(var i=0,e=0;this.currentDragTouches.length>e;e++)t.id==this.currentDragTouches[e].id&&(this.currentDragTouches[e].dragHandle.setDrag(!1),t.dragHandle=null,i=e);this.currentDragTouches.splice(i,1),this.draw(this.ctx)}},i.prototype.handleMove=function(t){for(var i=!1,o=0;this.currentDragTouches.length>o;o++)if(t.id==this.currentDragTouches[o].id&&null!=this.currentDragTouches[o].dragHandle){var s=this.currentDragTouches[o],n=this.clampPosition(t.x-s.dragHandle.offset.x,t.y-s.dragHandle.offset.y);t.x=n.x,t.y=n.y,c.instance.returnPoint(n),s.dragHandle instanceof u?this.dragCorner(t.x,t.y,s.dragHandle):this.dragCrop(t.x,t.y,s.dragHandle),this.currentlyInteracting=!0,i=!0,e.setPressed(this.canvas);break}if(!i){for(var r=0;this.markers.length>r;r++){var a=this.markers[r];if(a.touchInBounds(t.x,t.y)){t.dragHandle=a,this.currentDragTouches.push(t),a.setDrag(!0),t.dragHandle.offset.x=t.x-t.dragHandle.getPosition().x,t.dragHandle.offset.y=t.y-t.dragHandle.getPosition().y,this.dragCorner(t.x-t.dragHandle.offset.x,t.y-t.dragHandle.offset.y,t.dragHandle);break}}null==t.dragHandle&&this.center.touchInBounds(t.x,t.y)&&(t.dragHandle=this.center,this.currentDragTouches.push(t),t.dragHandle.setDrag(!0),t.dragHandle.offset.x=t.x-t.dragHandle.getPosition().x,t.dragHandle.offset.y=t.y-t.dragHandle.getPosition().y,this.dragCrop(t.x-t.dragHandle.offset.x,t.y-t.dragHandle.offset.y,t.dragHandle))}},i.prototype.updateClampBounds=function(){var t=this.srcImage.height/this.srcImage.width,i=this.canvas.height/this.canvas.width,e=this.canvas.width,o=this.canvas.height;i>t?(e=this.canvas.width,o=this.canvas.width*t):(o=this.canvas.height,e=this.canvas.height/t),this.minXClamp=this.canvas.width/2-e/2,this.minYClamp=this.canvas.height/2-o/2,this.maxXClamp=this.canvas.width/2+e/2,this.maxYClamp=this.canvas.height/2+o/2},i.prototype.getCropBounds=function(){var t=this.canvas.height-2*this.minYClamp,i=this.getBounds();return i.top=Math.round((t-i.top+this.minYClamp)/this.ratioH),i.bottom=Math.round((t-i.bottom+this.minYClamp)/this.ratioH),i.left=Math.round((i.left-this.minXClamp)/this.ratioW),i.right=Math.round((i.right-this.minXClamp)/this.ratioW),i},i.prototype.clampPosition=function(t,i){return this.minXClamp>t&&(t=this.minXClamp),t>this.maxXClamp&&(t=this.maxXClamp),this.minYClamp>i&&(i=this.minYClamp),i>this.maxYClamp&&(i=this.maxYClamp),c.instance.borrow(t,i)},i.prototype.isImageSet=function(){return this.imageSet},i.prototype.setImage=function(i,e){if(!i)throw"Image is null";this.imageSet=!0,this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);var s=this.buffer.getContext("2d");s.clearRect(0,0,this.buffer.width,this.buffer.height),this.enforceFileType?this.fileType=this.enforceFileType:("image/png"==e||"image/jpeg"==e)&&(this.fileType=e),this.srcImage=i,this.updateClampBounds();var n=this.srcImage.height/this.srcImage.width,r=this.getBounds(),a=r.getHeight()/r.getWidth(),h=this.canvas.width,g=this.canvas.height;this.canvasWidth=h,this.canvasHeight=g;var p=this.canvas.width/2,u=this.canvas.height/2,l=c.instance.borrow(p-r.getWidth()/2,u+r.getHeight()/2),m=c.instance.borrow(p+r.getWidth()/2,u+r.getHeight()/2),v=c.instance.borrow(p-r.getWidth()/2,u-r.getHeight()/2),f=c.instance.borrow(p+r.getWidth()/2,u-r.getHeight()/2);if(this.tl.setPosition(l.x,l.y),this.tr.setPosition(m.x,m.y),this.bl.setPosition(v.x,v.y),this.br.setPosition(f.x,f.y),c.instance.returnPoint(l),c.instance.returnPoint(m),c.instance.returnPoint(v),c.instance.returnPoint(f),this.center.setPosition(p,u),a>n){var y=Math.min(h*n,g),w=y/a;l=c.instance.borrow(p-w/2,u+y/2),m=c.instance.borrow(p+w/2,u+y/2),v=c.instance.borrow(p-w/2,u-y/2),f=c.instance.borrow(p+w/2,u-y/2)}else if(n>a){var b=Math.min(g/n,h),x=b*a;l=c.instance.borrow(p-b/2,u+x/2),m=c.instance.borrow(p+b/2,u+x/2),v=c.instance.borrow(p-b/2,u-x/2),f=c.instance.borrow(p+b/2,u-x/2)}else{var b=Math.min(g,h),x=b*a;l=c.instance.borrow(p-b/2,u+x/2),m=c.instance.borrow(p+b/2,u+x/2),v=c.instance.borrow(p-b/2,u-x/2),f=c.instance.borrow(p+b/2,u-x/2)}if(this.tl.setPosition(l.x,l.y),this.tr.setPosition(m.x,m.y),this.bl.setPosition(v.x,v.y),this.br.setPosition(f.x,f.y),c.instance.returnPoint(l),c.instance.returnPoint(m),c.instance.returnPoint(v),c.instance.returnPoint(f),t.cropAreaBounds&&void 0!==t.cropAreaBounds.left&&void 0!==t.cropAreaBounds.top&&void 0!==t.cropAreaBounds.right&&void 0!==t.cropAreaBounds.bottom){var P=this.canvasHeight/this.canvasWidth;P>n?(h=this.canvasWidth,g=this.canvasWidth*n):(g=this.canvasHeight,h=this.canvasHeight/n),this.ratioW=h/this.srcImage.width,this.ratioH=g/this.srcImage.height;var H=new d;H.top=Math.round(g+this.minYClamp-this.ratioH*t.cropAreaBounds.top),H.bottom=Math.round(g+this.minYClamp-this.ratioH*t.cropAreaBounds.bottom),H.left=Math.round(this.ratioW*t.cropAreaBounds.left+this.minXClamp),H.right=Math.round(this.ratioW*t.cropAreaBounds.right+this.minXClamp),this.tl.setPosition(H.left,H.top),this.tr.setPosition(H.right,H.top),this.bl.setPosition(H.left,H.bottom),this.br.setPosition(H.right,H.bottom),this.center.setPosition(H.left+H.getWidth()/2,H.top+H.getHeight()/2)}this.vertSquashRatio=this.detectVerticalSquash(this.srcImage),this.draw(this.ctx);var I=this.getCroppedImage(t.cropWidth,t.cropHeight);void 0!==o.croppedImage&&(t.croppedImage=I.src),t.cropAreaBounds&&this.imageSet&&(t.cropAreaBounds=this.getCropBounds())},i.prototype.getCroppedImage=function(t,i){var e=this.getBounds();if(!this.srcImage)throw"Source image not set.";if(t&&i){var o=this.srcImage.height/this.srcImage.width,s=this.canvas.height/this.canvas.width,n=this.canvas.width,r=this.canvas.height;s>o?(n=this.canvas.width,r=this.canvas.width*o):o>s?(r=this.canvas.height,n=this.canvas.height/o):(r=this.canvas.height,n=this.canvas.width),this.ratioW=n/this.srcImage.width,this.ratioH=r/this.srcImage.height,this.cropCanvas.width=t,this.cropCanvas.height=i;var a=(this.buffer.height-r)/2/this.ratioH,h=(this.buffer.width-n)/2/this.ratioW;this.drawImageIOSFix(this.cropCanvas.getContext("2d"),this.srcImage,Math.max(Math.round(e.left/this.ratioW-h),0),Math.max(Math.round(e.top/this.ratioH-a),0),Math.max(Math.round(e.getWidth()/this.ratioW),1),Math.max(Math.round(e.getHeight()/this.ratioH),1),0,0,t,i),this.croppedImage.width=t,this.croppedImage.height=i}else this.cropCanvas.width=Math.max(e.getWidth(),1),this.cropCanvas.height=Math.max(e.getHeight(),1),this.cropCanvas.getContext("2d").drawImage(this.buffer,e.left,e.top,Math.max(e.getWidth(),1),Math.max(e.getHeight(),1),0,0,e.getWidth(),e.getHeight()),this.croppedImage.width=this.cropCanvas.width,this.croppedImage.height=this.cropCanvas.height;return this.croppedImage.src=this.cropCanvas.toDataURL(this.fileType),this.croppedImage},i.prototype.getBounds=function(){for(var t=Number.MAX_VALUE,i=Number.MAX_VALUE,e=-Number.MAX_VALUE,o=-Number.MAX_VALUE,s=0;this.markers.length>s;s++){var n=this.markers[s];t>n.getPosition().x&&(t=n.getPosition().x),n.getPosition().x>e&&(e=n.getPosition().x),i>n.getPosition().y&&(i=n.getPosition().y),n.getPosition().y>o&&(o=n.getPosition().y)}var r=new d;return r.left=t,r.right=e,r.top=i,r.bottom=o,r},i.prototype.setBounds=function(t){for(var i,e,o,s,n=this.getBounds(),r=0;this.markers.length>r;r++){var a=this.markers[r];a.getPosition().x==n.left?a.getPosition().y==n.top?i=a:o=a:a.getPosition().y==n.top?e=a:s=a}i.setPosition(t.left,t.top),e.setPosition(t.right,t.top),o.setPosition(t.left,t.bottom),s.setPosition(t.right,t.bottom),this.center.recalculatePosition(t),this.center.draw(this.ctx)},i.prototype.getMousePos=function(t,i){var e=t.getBoundingClientRect();return c.instance.borrow(i.clientX-e.left,i.clientY-e.top)},i.prototype.getTouchPos=function(t,i){var e=t.getBoundingClientRect();return c.instance.borrow(i.clientX-e.left,i.clientY-e.top)},i.prototype.onTouchMove=function(t){if(r.isImageSet()){if(t.preventDefault(),t.touches.length>=1)for(var i=0;t.touches.length>i;i++){var e=t.touches[i],o=this.getTouchPos(this.canvas,e),s=new m(o.x,o.y,e.identifier);c.instance.returnPoint(o),this.move(s,t)}this.draw(this.ctx)}},i.prototype.onMouseMove=function(t){if(r.isImageSet()){var i=this.getMousePos(this.canvas,t);this.move(new m(i.x,i.y,0),t);var e=this.getDragTouchForID(0);e?(e.x=i.x,e.y=i.y):e=new m(i.x,i.y,0),c.instance.returnPoint(i),this.drawCursors(e,t),this.draw(this.ctx)}},i.prototype.move=function(t){this.isMouseDown&&this.handleMove(t)},i.prototype.getDragTouchForID=function(t){for(var i=0;this.currentDragTouches.length>i;i++)if(t==this.currentDragTouches[i].id)return this.currentDragTouches[i]},i.prototype.drawCursors=function(t,i){var o=!1;null!=t&&(t.dragHandle==this.center&&(e.setStyle(this.canvas,"move"),o=!0),null!=t.dragHandle&&t.dragHandle instanceof u&&(this.drawCornerCursor(t.dragHandle,t.dragHandle.getPosition().x,t.dragHandle.getPosition().y,i),o=!0));var s=!1;if(!o){for(var n=0;this.markers.length>n;n++)s=s||this.drawCornerCursor(this.markers[n],t.x,t.y,i);s||e.setStyle(this.canvas,"initial")}s||o||!this.center.touchInBounds(t.x,t.y)?this.center.setOver(!1):(this.center.setOver(!0),e.setOver(this.canvas),e.setStyle(this.canvas,"move"))},i.prototype.drawCornerCursor=function(t,i,o){return t.touchInBounds(i,o)?(t.setOver(!0),t.getHorizontalNeighbour().getPosition().x>t.getPosition().x?t.getVerticalNeighbour().getPosition().y>t.getPosition().y?(e.setOver(this.canvas),e.setStyle(this.canvas,"nwse-resize")):(e.setOver(this.canvas),e.setStyle(this.canvas,"nesw-resize")):t.getVerticalNeighbour().getPosition().y>t.getPosition().y?(e.setOver(this.canvas),e.setStyle(this.canvas,"nesw-resize")):(e.setOver(this.canvas),e.setStyle(this.canvas,"nwse-resize")),!0):(t.setOver(!1),!1)},i.prototype.onTouchStart=function(){r.isImageSet()&&(this.isMouseDown=!0)},i.prototype.onTouchEnd=function(i){if(r.isImageSet()){for(var e=0;i.changedTouches.length>e;e++){var s=i.changedTouches[e],n=this.getDragTouchForID(s.identifier);null!=n&&((n.dragHandle instanceof u||n.dragHandle instanceof p)&&n.dragHandle.setOver(!1),this.handleRelease(n))}if(r.isImageSet()&&this.currentlyInteracting){var a=this.getCroppedImage(t.cropWidth,t.cropHeight);void 0!==o.croppedImage&&(t.croppedImage=a.src),t.$apply()}0==this.currentDragTouches.length&&(this.isMouseDown=!1,this.currentlyInteracting=!1)}},i.prototype.drawImageIOSFix=function(t,i,e,o,s,n,r,a,h,c){t.drawImage(i,e*this.vertSquashRatio,o*this.vertSquashRatio,s*this.vertSquashRatio,n*this.vertSquashRatio,r,a,h,c)},i.prototype.detectVerticalSquash=function(t){var i=(t.naturalWidth,t.naturalHeight),e=document.createElement("canvas");e.width=1,e.height=i;var o=e.getContext("2d");o.drawImage(t,0,0);for(var s=o.getImageData(0,0,1,i).data,n=0,r=i,a=i;a>n;){var h=s[4*(a-1)+3];0===h?r=a:n=a,a=r+n>>1}var c=a/i;return 0===c?1:c},i.prototype.onMouseDown=function(){r.isImageSet()&&(this.isMouseDown=!0)},i.prototype.onMouseUp=function(){if(r.isImageSet()){if(e.setReleased(this.canvas),this.isMouseDown=!1,this.handleRelease(new m(0,0,0)),1==this.currentlyInteracting){var i=this.getCroppedImage(t.cropWidth,t.cropHeight);void 0!==o.croppedImage&&(t.croppedImage=i.src),t.$apply()}this.currentlyInteracting=!1}},i}();t.$watch("cropWidth",s),t.$watch("cropHeight",s),t.$watch("keepAspect",s),t.$watch("touchRadius",s),t.$watch("image",n)}}}]),angular.module("angular-img-cropper").directive("imgCropperFileread",["$timeout",function(t){return{scope:{image:"="},link:function(i,e){e.bind("change",function(e){var o=new FileReader,s=this;o.onload=function(e){t(function(){var t=s;i.image={imageData:e.target.result,fileType:t.fileType}},0)},e.target.files[0]&&(s.fileType=e.target.files[0].type,o.readAsDataURL(e.target.files[0]))})}}}]),angular.module("angular-img-cropper").directive("imgCropperFilereadCall",function(){return{scope:{control:"="},link:function(t){t.internalControl=t.control||{},t.internalControl.load=function(t){var i=angular.element(document.querySelector(t)),e=document.createEvent("MouseEvent");e.initEvent("click",!0,!1),i[0].dispatchEvent(e)}}}}),angular.module("angular-img-cropper").factory("imageCropperDataShare",function(){var t,i,e={};return e.setPressed=function(i){t=i},e.setReleased=function(i){i===t&&(t=void 0)},e.setOver=function(t){i=t},e.setStyle=function(e,o){void 0!==t?t===e&&angular.element(document.documentElement).css("cursor",o):e===i&&angular.element(document.documentElement).css("cursor",o)},e}); \ No newline at end of file diff --git a/src/angular-img-cropper.js b/src/angular-img-cropper.js index 8dbb2e6..b9da944 100644 --- a/src/angular-img-cropper.js +++ b/src/angular-img-cropper.js @@ -9,7 +9,8 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' touchRadius: "=", cropAreaBounds: "=", minWidth: "=", - minHeight: "=" + minHeight: "=", + enforceFileType: "@" }, restrict: "A", link: function (scope, element, attrs) { @@ -350,7 +351,7 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' this.isMouseDown = false; this.ratioW = 1; this.ratioH = 1; - this.fileType = 'png'; + this.fileType = 'image/png'; this.imageSet = false; this.pointPool = new PointPool(200); CropService.init(canvas); @@ -380,6 +381,8 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' this.croppedImage = new Image(); this.currentlyInteracting = false; + this.enforceFileType = scope.enforceFileType ? 'image/' + scope.enforceFileType : undefined; + angular.element(window) .off('mousemove.angular-img-cropper mouseup.angular-img-cropper touchmove.angular-img-cropper touchend.angular-img-cropper') .on('mousemove.angular-img-cropper', this.onMouseMove.bind(this)) @@ -857,7 +860,7 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' ImageCropper.prototype.isImageSet = function () { return this.imageSet; }; - ImageCropper.prototype.setImage = function (img) { + ImageCropper.prototype.setImage = function (img, srcFileType) { if (!img) { throw "Image is null"; } @@ -865,10 +868,10 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); var bufferContext = this.buffer.getContext('2d'); bufferContext.clearRect(0, 0, this.buffer.width, this.buffer.height); - var splitName = img.src.split('.'); - var fileType = splitName[1]; - if (fileType == 'png' || fileType == 'jpg') { - this.fileType = fileType; + if (this.enforceFileType) { + this.fileType = this.enforceFileType; + } else if (srcFileType == 'image/png' || srcFileType == 'image/jpeg') { + this.fileType = srcFileType; } this.srcImage = img; this.updateClampBounds(); @@ -1007,7 +1010,7 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' this.croppedImage.width = this.cropCanvas.width; this.croppedImage.height = this.cropCanvas.height; } - this.croppedImage.src = this.cropCanvas.toDataURL("image/" + this.fileType); + this.croppedImage.src = this.cropCanvas.toDataURL(this.fileType); return this.croppedImage; }; ImageCropper.prototype.getBounds = function () { @@ -1292,8 +1295,8 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' $(canvas).data('crop.angular-img-cropper', crop); - if(oldImage) { - crop.setImage(oldImage); + if (oldImage) { + crop.setImage(oldImage, scope.image.fileType); } else { load(scope.image); } @@ -1311,10 +1314,10 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' } imageObj.addEventListener("load", function () { - crop.setImage(imageObj); - scope.$apply(); + crop.setImage(imageObj, newValue.fileType); + scope.$apply(); }, false); - imageObj.src = newValue; + imageObj.src = newValue.imageData; } scope.$watch('cropWidth', setup); @@ -1335,12 +1338,18 @@ angular.module('angular-img-cropper').directive("imgCropperFileread", ['$timeout link: function (scope, element) { element.bind("change", function (changeEvent) { var reader = new FileReader(); + var eventThis = this; reader.onload = function (loadEvent) { $timeout(function () { - scope.image = loadEvent.target.result; + var thisHook = eventThis; + scope.image = { + 'imageData': loadEvent.target.result, + 'fileType': thisHook.fileType + }; }, 0); }; if (changeEvent.target.files[0]) { + eventThis.fileType = changeEvent.target.files[0].type; reader.readAsDataURL(changeEvent.target.files[0]); } }); diff --git a/test/angular-img-cropper.js b/test/angular-img-cropper.js index 8dbb2e6..b9da944 100644 --- a/test/angular-img-cropper.js +++ b/test/angular-img-cropper.js @@ -9,7 +9,8 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' touchRadius: "=", cropAreaBounds: "=", minWidth: "=", - minHeight: "=" + minHeight: "=", + enforceFileType: "@" }, restrict: "A", link: function (scope, element, attrs) { @@ -350,7 +351,7 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' this.isMouseDown = false; this.ratioW = 1; this.ratioH = 1; - this.fileType = 'png'; + this.fileType = 'image/png'; this.imageSet = false; this.pointPool = new PointPool(200); CropService.init(canvas); @@ -380,6 +381,8 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' this.croppedImage = new Image(); this.currentlyInteracting = false; + this.enforceFileType = scope.enforceFileType ? 'image/' + scope.enforceFileType : undefined; + angular.element(window) .off('mousemove.angular-img-cropper mouseup.angular-img-cropper touchmove.angular-img-cropper touchend.angular-img-cropper') .on('mousemove.angular-img-cropper', this.onMouseMove.bind(this)) @@ -857,7 +860,7 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' ImageCropper.prototype.isImageSet = function () { return this.imageSet; }; - ImageCropper.prototype.setImage = function (img) { + ImageCropper.prototype.setImage = function (img, srcFileType) { if (!img) { throw "Image is null"; } @@ -865,10 +868,10 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); var bufferContext = this.buffer.getContext('2d'); bufferContext.clearRect(0, 0, this.buffer.width, this.buffer.height); - var splitName = img.src.split('.'); - var fileType = splitName[1]; - if (fileType == 'png' || fileType == 'jpg') { - this.fileType = fileType; + if (this.enforceFileType) { + this.fileType = this.enforceFileType; + } else if (srcFileType == 'image/png' || srcFileType == 'image/jpeg') { + this.fileType = srcFileType; } this.srcImage = img; this.updateClampBounds(); @@ -1007,7 +1010,7 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' this.croppedImage.width = this.cropCanvas.width; this.croppedImage.height = this.cropCanvas.height; } - this.croppedImage.src = this.cropCanvas.toDataURL("image/" + this.fileType); + this.croppedImage.src = this.cropCanvas.toDataURL(this.fileType); return this.croppedImage; }; ImageCropper.prototype.getBounds = function () { @@ -1292,8 +1295,8 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' $(canvas).data('crop.angular-img-cropper', crop); - if(oldImage) { - crop.setImage(oldImage); + if (oldImage) { + crop.setImage(oldImage, scope.image.fileType); } else { load(scope.image); } @@ -1311,10 +1314,10 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document' } imageObj.addEventListener("load", function () { - crop.setImage(imageObj); - scope.$apply(); + crop.setImage(imageObj, newValue.fileType); + scope.$apply(); }, false); - imageObj.src = newValue; + imageObj.src = newValue.imageData; } scope.$watch('cropWidth', setup); @@ -1335,12 +1338,18 @@ angular.module('angular-img-cropper').directive("imgCropperFileread", ['$timeout link: function (scope, element) { element.bind("change", function (changeEvent) { var reader = new FileReader(); + var eventThis = this; reader.onload = function (loadEvent) { $timeout(function () { - scope.image = loadEvent.target.result; + var thisHook = eventThis; + scope.image = { + 'imageData': loadEvent.target.result, + 'fileType': thisHook.fileType + }; }, 0); }; if (changeEvent.target.files[0]) { + eventThis.fileType = changeEvent.target.files[0].type; reader.readAsDataURL(changeEvent.target.files[0]); } });