From a73419f834cb0f53a7205c0d8a5ed9a9aaf5be82 Mon Sep 17 00:00:00 2001 From: Allan Bishop Date: Sun, 24 May 2015 12:32:07 +1000 Subject: [PATCH] Updated demo link and fixed a couple of syntax warnings. --- README.md | 2 +- dist/angular-img-cropper.min.js | 4 ++-- src/angular-img-cropper.js | 16 ++++++++-------- test/angular-img-cropper.js | 16 ++++++++-------- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 19432fa..1609a32 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ An image cropping tool for AngularJS. Features a rectangular crop area. The crop ## Live demo -[Live demo on JSBin](http://jsbin.com/fukeqe/2/) +[Live demo on JSBin](http://jsbin.com/fukeqe/4/) ## Requirements diff --git a/dist/angular-img-cropper.min.js b/dist/angular-img-cropper.min.js index 6af2375..0fa3099 100644 --- a/dist/angular-img-cropper.min.js +++ b/dist/angular-img-cropper.min.js @@ -1,2 +1,2 @@ -/*! angular-img-cropper 22-05-2015 */ -angular.module("angular-img-cropper",[]).directive("imageCropper",["$document","$window","imageCropperDataShare",function(a,b,c){return{scope:{image:"=",croppedImage:"=",cropWidth:"=",cropHeight:"=",keepAspect:"=",touchRadius:"=",cropAreaBounds:"="},restrict:"A",link:function(a,b){var d,e=e||function(a,b){function c(){this.constructor=a}for(var d in b)b.hasOwnProperty(d)&&(a[d]=b[d]);c.prototype=b.prototype,a.prototype=new c},f=function(){function a(a,b,c){this.over=!1,this.drag=!1,this.position=new l(a,b),this.offset=new l(0,0),this.radius=c}return a.prototype.setDrag=function(a){this.drag=a,this.setOver(a)},a.prototype.draw=function(){},a.prototype.setOver=function(a){this.over=a},a.prototype.touchInBounds=function(a,b){return a>this.position.x-this.radius&&athis.position.y-this.radius&&bd;d++)if(0===d)this.firstAvailable=new l,c=this.firstAvailable;else{var e=new l;c.setNext(e),c=e}}return a.prototype.borrow=function(a,b){if(null==this.firstAvailable)throw"Pool exhausted";this.borrowed++;var c=this.firstAvailable;return this.firstAvailable=c.getNext(),c.x=a,c.y=b,c},a.prototype.returnPoint=function(a){this.borrowed--,a.x=0,a.y=0,a.setNext(this.firstAvailable),this.firstAvailable=a},a}(),h=function(){function a(){}return a.init=function(a){this.canvas=a,this.ctx=this.canvas.getContext("2d")},a.DEG2RAD=.0174532925,a}(),i=function(a){function b(b,c,d){a.call(this,b,c,d),this.iconPoints=new Array,this.scaledIconPoints=new Array,this.getDragIconPoints(this.iconPoints,1),this.getDragIconPoints(this.scaledIconPoints,1.2)}return e(b,a),b.prototype.draw=function(a){this.over||this.drag?this.drawIcon(a,this.scaledIconPoints):this.drawIcon(a,this.iconPoints)},b.prototype.getDragIconPoints=function(a,b){var c=17*b,d=14*b,e=8*b,f=4*b;a.push(g.instance.borrow(-f/2,c-e)),a.push(g.instance.borrow(-d/2,c-e)),a.push(g.instance.borrow(0,c)),a.push(g.instance.borrow(d/2,c-e)),a.push(g.instance.borrow(f/2,c-e)),a.push(g.instance.borrow(f/2,f/2)),a.push(g.instance.borrow(c-e,f/2)),a.push(g.instance.borrow(c-e,d/2)),a.push(g.instance.borrow(c,0)),a.push(g.instance.borrow(c-e,-d/2)),a.push(g.instance.borrow(c-e,-f/2)),a.push(g.instance.borrow(f/2,-f/2)),a.push(g.instance.borrow(f/2,-c+e)),a.push(g.instance.borrow(d/2,-c+e)),a.push(g.instance.borrow(0,-c)),a.push(g.instance.borrow(-d/2,-c+e)),a.push(g.instance.borrow(-f/2,-c+e)),a.push(g.instance.borrow(-f/2,-f/2)),a.push(g.instance.borrow(-c+e,-f/2)),a.push(g.instance.borrow(-c+e,-d/2)),a.push(g.instance.borrow(-c,0)),a.push(g.instance.borrow(-c+e,d/2)),a.push(g.instance.borrow(-c+e,f/2)),a.push(g.instance.borrow(-f/2,f/2))},b.prototype.drawIcon=function(a,b){a.beginPath(),a.moveTo(b[0].x+this.position.x,b[0].y+this.position.y);for(var c=0;cc?(e=this.canvasWidth,f=this.canvasWidth*c):(f=this.canvasHeight,e=this.canvasHeight/c),this.ratioW=e/this.srcImage.width,this.ratioH=f/this.srcImage.height,c>d?this.drawImageIOSFix(a,this.srcImage,0,0,this.srcImage.width,this.srcImage.height,this.buffer.width/2-e/2,0,e,f):this.drawImageIOSFix(a,this.srcImage,0,0,this.srcImage.width,this.srcImage.height,0,this.buffer.height/2-f/2,e,f),this.buffer.getContext("2d").drawImage(this.canvas,0,0,this.canvasWidth,this.canvasHeight),a.fillStyle="rgba(0, 0, 0, 0.7)",a.fillRect(0,0,this.canvasWidth,this.canvasHeight),a.drawImage(this.buffer,b.left,b.top,Math.max(b.getWidth(),1),Math.max(b.getHeight(),1),b.left,b.top,b.getWidth(),b.getHeight());for(var g,h=0;h=this.maxXClamp&&(a=this.maxXClamp-d.getWidth()/2),e<=this.minXClamp&&(a=d.getWidth()/2+this.minXClamp),g=this.maxYClamp&&(b=this.maxYClamp-d.getHeight()/2),this.tl.moveX(a-d.getWidth()/2),this.tl.moveY(b-d.getHeight()/2),this.tr.moveX(a+d.getWidth()/2),this.tr.moveY(b-d.getHeight()/2),this.bl.moveX(a-d.getWidth()/2),this.bl.moveY(b+d.getHeight()/2),this.br.moveX(a+d.getWidth()/2),this.br.moveY(b+d.getHeight()/2),c.setPosition(a,b)},b.prototype.dragCorner=function(b,c,d){var e,f=0,h=0,i=0,j=0,k=0,l=0,m=0,n=0,o=0;a.keepAspect?(e=d.getHorizontalNeighbour().getVerticalNeighbour(),i=e.getPosition().x,j=e.getPosition().y,b<=e.getPosition().x?c<=e.getPosition().y?(f=i-100/this.aspectRatio,h=j-100/this.aspectRatio*this.aspectRatio,o=this.getSide(g.instance.borrow(f,h),e.getPosition(),g.instance.borrow(b,c)),o>0?(k=Math.abs(e.getPosition().y-c),l=k/this.aspectRatio,m=e.getPosition().y-k,n=e.getPosition().x-l,d.move(n,m)):0>o&&(l=Math.abs(e.getPosition().x-b),k=l*this.aspectRatio,m=e.getPosition().y-k,n=e.getPosition().x-l,d.move(n,m))):(f=i-100/this.aspectRatio,h=j+100/this.aspectRatio*this.aspectRatio,o=this.getSide(g.instance.borrow(f,h),e.getPosition(),g.instance.borrow(b,c)),o>0?(l=Math.abs(e.getPosition().x-b),k=l*this.aspectRatio,m=e.getPosition().y+k,n=e.getPosition().x-l,d.move(n,m)):0>o&&(k=Math.abs(e.getPosition().y-c),l=k/this.aspectRatio,m=e.getPosition().y+k,n=e.getPosition().x-l,d.move(n,m))):c<=e.getPosition().y?(f=i+100/this.aspectRatio,h=j-100/this.aspectRatio*this.aspectRatio,o=this.getSide(g.instance.borrow(f,h),e.getPosition(),g.instance.borrow(b,c)),0>o?(k=Math.abs(e.getPosition().y-c),l=k/this.aspectRatio,m=e.getPosition().y-k,n=e.getPosition().x+l,d.move(n,m)):o>0&&(l=Math.abs(e.getPosition().x-b),k=l*this.aspectRatio,m=e.getPosition().y-k,n=e.getPosition().x+l,d.move(n,m))):(f=i+100/this.aspectRatio,h=j+100/this.aspectRatio*this.aspectRatio,o=this.getSide(g.instance.borrow(f,h),e.getPosition(),g.instance.borrow(b,c)),0>o?(l=Math.abs(e.getPosition().x-b),k=l*this.aspectRatio,m=e.getPosition().y+k,n=e.getPosition().x+l,d.move(n,m)):o>0&&(k=Math.abs(e.getPosition().y-c),l=k/this.aspectRatio,m=e.getPosition().y+k,n=e.getPosition().x+l,d.move(n,m)))):d.move(b,c),this.center.recalculatePosition(this.getBounds())},b.prototype.getSide=function(a,b,c){var d=this.sign((b.x-a.x)*(c.y-a.y)-(b.y-a.y)*(c.x-a.x));return g.instance.returnPoint(a),g.instance.returnPoint(c),d},b.prototype.sign=function(a){return+a===a?0===a?a:a>0?1:-1:0/0},b.prototype.handleRelease=function(a){if(null!=a){for(var b=0,c=0;ca?(c=this.canvas.width,d=this.canvas.width*a):(d=this.canvas.height,c=this.canvas.height/a),this.minXClamp=this.canvas.width/2-c/2,this.minYClamp=this.canvas.height/2-d/2,this.maxXClamp=this.canvas.width/2+c/2,this.maxYClamp=this.canvas.height/2+d/2},b.prototype.getCropBounds=function(){var a=this.canvas.height-2*this.minYClamp,b=this.getBounds();return b.top=Math.round((a-b.top+this.minYClamp)/this.ratioH),b.bottom=Math.round((a-b.bottom+this.minYClamp)/this.ratioH),b.left=Math.round((b.left-this.minXClamp)/this.ratioW),b.right=Math.round((b.right-this.minXClamp)/this.ratioW),b},b.prototype.clampPosition=function(a,b){return athis.maxXClamp&&(a=this.maxXClamp),bthis.maxYClamp&&(b=this.maxYClamp),g.instance.borrow(a,b)},b.prototype.isImageSet=function(){return this.imageSet},b.prototype.setImage=function(b){if(!b)throw"Image is null";this.imageSet=!0,this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);var c=this.buffer.getContext("2d");c.clearRect(0,0,this.buffer.width,this.buffer.height);var d=b.src.split("."),e=d[1];("png"==e||"jpg"==e)&&(this.fileType=e),this.srcImage=b,this.updateClampBounds();var f=this.srcImage.height/this.srcImage.width,h=this.getBounds(),i=h.getHeight()/h.getWidth(),j=this.canvas.width,k=this.canvas.height;this.canvasWidth=j,this.canvasHeight=k;var l=this.canvas.width/2,m=this.canvas.height/2,n=g.instance.borrow(l-h.getWidth()/2,m+h.getHeight()/2),o=g.instance.borrow(l+h.getWidth()/2,m+h.getHeight()/2),p=g.instance.borrow(l-h.getWidth()/2,m-h.getHeight()/2),q=g.instance.borrow(l+h.getWidth()/2,m-h.getHeight()/2);if(this.tl.setPosition(n.x,n.y),this.tr.setPosition(o.x,o.y),this.bl.setPosition(p.x,p.y),this.br.setPosition(q.x,q.y),g.instance.returnPoint(n),g.instance.returnPoint(o),g.instance.returnPoint(p),g.instance.returnPoint(q),this.center.setPosition(l,m),i>f){var r=Math.min(j*f,k);if(h.getHeight()>r){var s=r/i;n=g.instance.borrow(l-s/2,m+r/2),o=g.instance.borrow(l+s/2,m+r/2),p=g.instance.borrow(l-s/2,m-r/2),q=g.instance.borrow(l+s/2,m-r/2),this.tl.setPosition(n.x,n.y),this.tr.setPosition(o.x,o.y),this.bl.setPosition(p.x,p.y),this.br.setPosition(q.x,q.y),g.instance.returnPoint(n),g.instance.returnPoint(o),g.instance.returnPoint(p),g.instance.returnPoint(q)}}else if(f>i){var t=Math.min(k/f,j);if(h.getWidth()>t){var u=t*i;n=g.instance.borrow(l-t/2,m+u/2),o=g.instance.borrow(l+t/2,m+u/2),p=g.instance.borrow(l-t/2,m-u/2),q=g.instance.borrow(l+t/2,m-u/2),this.tl.setPosition(n.x,n.y),this.tr.setPosition(o.x,o.y),this.bl.setPosition(p.x,p.y),this.br.setPosition(q.x,q.y),g.instance.returnPoint(n),g.instance.returnPoint(o),g.instance.returnPoint(p),g.instance.returnPoint(q)}}this.vertSquashRatio=this.detectVerticalSquash(b),this.draw(this.ctx);var v=this.getCroppedImage(a.cropWidth,a.cropHeight);a.croppedImage=v.src,a.cropAreaBounds&&this.imageSet&&(a.cropAreaBounds=this.getCropBounds(),a.$apply())},b.prototype.getCroppedImage=function(a,b){var c=this.getBounds();if(!this.srcImage)throw"Source image not set.";if(a&&b){var d=this.srcImage.height/this.srcImage.width,e=this.canvas.height/this.canvas.width,f=this.canvas.width,g=this.canvas.height;e>d?(f=this.canvas.width,g=this.canvas.width*d):d>e?(g=this.canvas.height,f=this.canvas.height/d):(g=this.canvas.height,f=this.canvas.width),this.ratioW=f/this.srcImage.width,this.ratioH=g/this.srcImage.height,this.cropCanvas.width=a,this.cropCanvas.height=b;var h=(this.buffer.height-g)/2/this.ratioH,i=(this.buffer.width-f)/2/this.ratioW;this.drawImageIOSFix(this.cropCanvas.getContext("2d"),this.srcImage,Math.max(Math.round(c.left/this.ratioW-i),0),Math.max(Math.round(c.top/this.ratioH-h),0),Math.max(Math.round(c.getWidth()/this.ratioW),1),Math.max(Math.round(c.getHeight()/this.ratioH),1),0,0,a,b),this.croppedImage.width=a,this.croppedImage.height=b}else this.cropCanvas.width=Math.max(c.getWidth(),1),this.cropCanvas.height=Math.max(c.getHeight(),1),this.cropCanvas.getContext("2d").drawImage(this.buffer,c.left,c.top,Math.max(c.getWidth(),1),Math.max(c.getHeight(),1),0,0,c.getWidth(),c.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},b.prototype.getBounds=function(){for(var a=Number.MAX_VALUE,b=Number.MAX_VALUE,c=-Number.MAX_VALUE,d=-Number.MAX_VALUE,e=0;ec&&(c=f.getPosition().x),f.getPosition().yd&&(d=f.getPosition().y)}var g=new k;return g.left=a,g.right=c,g.top=b,g.bottom=d,g},b.prototype.getMousePos=function(a,b){var c=a.getBoundingClientRect();return g.instance.borrow(b.clientX-c.left,b.clientY-c.top)},b.prototype.getTouchPos=function(a,b){var c=a.getBoundingClientRect();return g.instance.borrow(b.clientX-c.left,b.clientY-c.top)},b.prototype.onTouchMove=function(a){if(a.preventDefault(),a.touches.length>=1)for(var b=0;ba.getPosition().x?a.getVerticalNeighbour().getPosition().y>a.getPosition().y?(c.setOver(this.canvas),c.setStyle(this.canvas,"nwse-resize")):(c.setOver(this.canvas),c.setStyle(this.canvas,"nesw-resize")):a.getVerticalNeighbour().getPosition().y>a.getPosition().y?(c.setOver(this.canvas),c.setStyle(this.canvas,"nesw-resize")):(c.setOver(this.canvas),c.setStyle(this.canvas,"nwse-resize")),!0):(a.setOver(!1),!1)},b.prototype.onTouchStart=function(){this.isMouseDown=!0},b.prototype.onTouchEnd=function(b){for(var c=0;cf;){var i=e[4*(h-1)+3];0===i?g=h:f=h,h=g+f>>1}var j=h/b;return 0===j?1:j},b.prototype.onMouseDown=function(){this.isMouseDown=!0},b.prototype.onMouseUp=function(){if(d.isImageSet()){if(c.setReleased(this.canvas),this.isMouseDown=!1,this.handleRelease(new m(0,0,0)),1==this.currentlyInteracting){var b=this.getCroppedImage(a.cropWidth,a.cropHeight);a.croppedImage=b.src,a.$apply()}this.currentlyInteracting=!1}},b}();angular.element(document).ready(function(){var c=angular.element(b[0]),e=c[0],f=a.cropWidth,g=a.cropHeight,h=a.keepAspect,i=a.touchRadius;d=new n(e,e.width/2-f/2,e.height/2-g/2,f,g,h,i)}),a.$watch("image",function(b){if(null!=b){var c=new Image;c.addEventListener("load",function(){d.setImage(c);var b=d.getCroppedImage(a.cropWidth,a.cropHeight);a.croppedImage=b.src,a.$apply()},!1),c.src=b}})}}}]),angular.module("angular-img-cropper").directive("imgCropperFileread",["$timeout",function(a){return{scope:{image:"="},link:function(b,c){c.bind("change",function(c){var d=new FileReader;d.onload=function(c){a(function(){b.image=c.target.result},0)},c.target.files[0]&&d.readAsDataURL(c.target.files[0])})}}}]),angular.module("angular-img-cropper").factory("imageCropperDataShare",function(){var a,b,c={};return c.setPressed=function(b){a=b},c.setReleased=function(b){b==a&&(a=void 0)},c.setOver=function(a){b=a},c.setStyle=function(c,d){void 0!=a?a==c&&angular.element(document.documentElement).css("cursor",d):c==b&&angular.element(document.documentElement).css("cursor",d)},c}); \ No newline at end of file +/*! angular-img-cropper 24-05-2015 */ +angular.module("angular-img-cropper",[]).directive("imageCropper",["$document","$window","imageCropperDataShare",function(a,b,c){return{scope:{image:"=",croppedImage:"=",cropWidth:"=",cropHeight:"=",keepAspect:"=",touchRadius:"=",cropAreaBounds:"="},restrict:"A",link:function(a,b){var d,e=e||function(a,b){function c(){this.constructor=a}for(var d in b)b.hasOwnProperty(d)&&(a[d]=b[d]);c.prototype=b.prototype,a.prototype=new c},f=function(){function a(a,b,c){this.over=!1,this.drag=!1,this.position=new l(a,b),this.offset=new l(0,0),this.radius=c}return a.prototype.setDrag=function(a){this.drag=a,this.setOver(a)},a.prototype.draw=function(){},a.prototype.setOver=function(a){this.over=a},a.prototype.touchInBounds=function(a,b){return a>this.position.x-this.radius&&athis.position.y-this.radius&&bd;d++)if(0===d)this.firstAvailable=new l,c=this.firstAvailable;else{var e=new l;c.setNext(e),c=e}}return a.prototype.borrow=function(a,b){if(null==this.firstAvailable)throw"Pool exhausted";this.borrowed++;var c=this.firstAvailable;return this.firstAvailable=c.getNext(),c.x=a,c.y=b,c},a.prototype.returnPoint=function(a){this.borrowed--,a.x=0,a.y=0,a.setNext(this.firstAvailable),this.firstAvailable=a},a}(),h=function(){function a(){}return a.init=function(a){this.canvas=a,this.ctx=this.canvas.getContext("2d")},a.DEG2RAD=.0174532925,a}(),i=function(a){function b(b,c,d){a.call(this,b,c,d),this.iconPoints=new Array,this.scaledIconPoints=new Array,this.getDragIconPoints(this.iconPoints,1),this.getDragIconPoints(this.scaledIconPoints,1.2)}return e(b,a),b.prototype.draw=function(a){this.over||this.drag?this.drawIcon(a,this.scaledIconPoints):this.drawIcon(a,this.iconPoints)},b.prototype.getDragIconPoints=function(a,b){var c=17*b,d=14*b,e=8*b,f=4*b;a.push(g.instance.borrow(-f/2,c-e)),a.push(g.instance.borrow(-d/2,c-e)),a.push(g.instance.borrow(0,c)),a.push(g.instance.borrow(d/2,c-e)),a.push(g.instance.borrow(f/2,c-e)),a.push(g.instance.borrow(f/2,f/2)),a.push(g.instance.borrow(c-e,f/2)),a.push(g.instance.borrow(c-e,d/2)),a.push(g.instance.borrow(c,0)),a.push(g.instance.borrow(c-e,-d/2)),a.push(g.instance.borrow(c-e,-f/2)),a.push(g.instance.borrow(f/2,-f/2)),a.push(g.instance.borrow(f/2,-c+e)),a.push(g.instance.borrow(d/2,-c+e)),a.push(g.instance.borrow(0,-c)),a.push(g.instance.borrow(-d/2,-c+e)),a.push(g.instance.borrow(-f/2,-c+e)),a.push(g.instance.borrow(-f/2,-f/2)),a.push(g.instance.borrow(-c+e,-f/2)),a.push(g.instance.borrow(-c+e,-d/2)),a.push(g.instance.borrow(-c,0)),a.push(g.instance.borrow(-c+e,d/2)),a.push(g.instance.borrow(-c+e,f/2)),a.push(g.instance.borrow(-f/2,f/2))},b.prototype.drawIcon=function(a,b){a.beginPath(),a.moveTo(b[0].x+this.position.x,b[0].y+this.position.y);for(var c=0;cc?(e=this.canvasWidth,f=this.canvasWidth*c):(f=this.canvasHeight,e=this.canvasHeight/c),this.ratioW=e/this.srcImage.width,this.ratioH=f/this.srcImage.height,c>d?this.drawImageIOSFix(a,this.srcImage,0,0,this.srcImage.width,this.srcImage.height,this.buffer.width/2-e/2,0,e,f):this.drawImageIOSFix(a,this.srcImage,0,0,this.srcImage.width,this.srcImage.height,0,this.buffer.height/2-f/2,e,f),this.buffer.getContext("2d").drawImage(this.canvas,0,0,this.canvasWidth,this.canvasHeight),a.fillStyle="rgba(0, 0, 0, 0.7)",a.fillRect(0,0,this.canvasWidth,this.canvasHeight),a.drawImage(this.buffer,b.left,b.top,Math.max(b.getWidth(),1),Math.max(b.getHeight(),1),b.left,b.top,b.getWidth(),b.getHeight());for(var g,h=0;h=this.maxXClamp&&(a=this.maxXClamp-d.getWidth()/2),e<=this.minXClamp&&(a=d.getWidth()/2+this.minXClamp),g=this.maxYClamp&&(b=this.maxYClamp-d.getHeight()/2),this.tl.moveX(a-d.getWidth()/2),this.tl.moveY(b-d.getHeight()/2),this.tr.moveX(a+d.getWidth()/2),this.tr.moveY(b-d.getHeight()/2),this.bl.moveX(a-d.getWidth()/2),this.bl.moveY(b+d.getHeight()/2),this.br.moveX(a+d.getWidth()/2),this.br.moveY(b+d.getHeight()/2),c.setPosition(a,b)},b.prototype.dragCorner=function(b,c,d){var e,f=0,h=0,i=0,j=0,k=0,l=0,m=0,n=0,o=0;a.keepAspect?(e=d.getHorizontalNeighbour().getVerticalNeighbour(),i=e.getPosition().x,j=e.getPosition().y,b<=e.getPosition().x?c<=e.getPosition().y?(f=i-100/this.aspectRatio,h=j-100/this.aspectRatio*this.aspectRatio,o=this.getSide(g.instance.borrow(f,h),e.getPosition(),g.instance.borrow(b,c)),o>0?(k=Math.abs(e.getPosition().y-c),l=k/this.aspectRatio,m=e.getPosition().y-k,n=e.getPosition().x-l,d.move(n,m)):0>o&&(l=Math.abs(e.getPosition().x-b),k=l*this.aspectRatio,m=e.getPosition().y-k,n=e.getPosition().x-l,d.move(n,m))):(f=i-100/this.aspectRatio,h=j+100/this.aspectRatio*this.aspectRatio,o=this.getSide(g.instance.borrow(f,h),e.getPosition(),g.instance.borrow(b,c)),o>0?(l=Math.abs(e.getPosition().x-b),k=l*this.aspectRatio,m=e.getPosition().y+k,n=e.getPosition().x-l,d.move(n,m)):0>o&&(k=Math.abs(e.getPosition().y-c),l=k/this.aspectRatio,m=e.getPosition().y+k,n=e.getPosition().x-l,d.move(n,m))):c<=e.getPosition().y?(f=i+100/this.aspectRatio,h=j-100/this.aspectRatio*this.aspectRatio,o=this.getSide(g.instance.borrow(f,h),e.getPosition(),g.instance.borrow(b,c)),0>o?(k=Math.abs(e.getPosition().y-c),l=k/this.aspectRatio,m=e.getPosition().y-k,n=e.getPosition().x+l,d.move(n,m)):o>0&&(l=Math.abs(e.getPosition().x-b),k=l*this.aspectRatio,m=e.getPosition().y-k,n=e.getPosition().x+l,d.move(n,m))):(f=i+100/this.aspectRatio,h=j+100/this.aspectRatio*this.aspectRatio,o=this.getSide(g.instance.borrow(f,h),e.getPosition(),g.instance.borrow(b,c)),0>o?(l=Math.abs(e.getPosition().x-b),k=l*this.aspectRatio,m=e.getPosition().y+k,n=e.getPosition().x+l,d.move(n,m)):o>0&&(k=Math.abs(e.getPosition().y-c),l=k/this.aspectRatio,m=e.getPosition().y+k,n=e.getPosition().x+l,d.move(n,m)))):d.move(b,c),this.center.recalculatePosition(this.getBounds())},b.prototype.getSide=function(a,b,c){var d=this.sign((b.x-a.x)*(c.y-a.y)-(b.y-a.y)*(c.x-a.x));return g.instance.returnPoint(a),g.instance.returnPoint(c),d},b.prototype.sign=function(a){return+a===a?0===a?a:a>0?1:-1:0/0},b.prototype.handleRelease=function(a){if(null!=a){for(var b=0,c=0;ca?(c=this.canvas.width,d=this.canvas.width*a):(d=this.canvas.height,c=this.canvas.height/a),this.minXClamp=this.canvas.width/2-c/2,this.minYClamp=this.canvas.height/2-d/2,this.maxXClamp=this.canvas.width/2+c/2,this.maxYClamp=this.canvas.height/2+d/2},b.prototype.getCropBounds=function(){var a=this.canvas.height-2*this.minYClamp,b=this.getBounds();return b.top=Math.round((a-b.top+this.minYClamp)/this.ratioH),b.bottom=Math.round((a-b.bottom+this.minYClamp)/this.ratioH),b.left=Math.round((b.left-this.minXClamp)/this.ratioW),b.right=Math.round((b.right-this.minXClamp)/this.ratioW),b},b.prototype.clampPosition=function(a,b){return athis.maxXClamp&&(a=this.maxXClamp),bthis.maxYClamp&&(b=this.maxYClamp),g.instance.borrow(a,b)},b.prototype.isImageSet=function(){return this.imageSet},b.prototype.setImage=function(b){if(!b)throw"Image is null";this.imageSet=!0,this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);var c=this.buffer.getContext("2d");c.clearRect(0,0,this.buffer.width,this.buffer.height);var d=b.src.split("."),e=d[1];("png"==e||"jpg"==e)&&(this.fileType=e),this.srcImage=b,this.updateClampBounds();var f=this.srcImage.height/this.srcImage.width,h=this.getBounds(),i=h.getHeight()/h.getWidth(),j=this.canvas.width,k=this.canvas.height;this.canvasWidth=j,this.canvasHeight=k;var l=this.canvas.width/2,m=this.canvas.height/2,n=g.instance.borrow(l-h.getWidth()/2,m+h.getHeight()/2),o=g.instance.borrow(l+h.getWidth()/2,m+h.getHeight()/2),p=g.instance.borrow(l-h.getWidth()/2,m-h.getHeight()/2),q=g.instance.borrow(l+h.getWidth()/2,m-h.getHeight()/2);if(this.tl.setPosition(n.x,n.y),this.tr.setPosition(o.x,o.y),this.bl.setPosition(p.x,p.y),this.br.setPosition(q.x,q.y),g.instance.returnPoint(n),g.instance.returnPoint(o),g.instance.returnPoint(p),g.instance.returnPoint(q),this.center.setPosition(l,m),i>f){var r=Math.min(j*f,k);if(h.getHeight()>r){var s=r/i;n=g.instance.borrow(l-s/2,m+r/2),o=g.instance.borrow(l+s/2,m+r/2),p=g.instance.borrow(l-s/2,m-r/2),q=g.instance.borrow(l+s/2,m-r/2),this.tl.setPosition(n.x,n.y),this.tr.setPosition(o.x,o.y),this.bl.setPosition(p.x,p.y),this.br.setPosition(q.x,q.y),g.instance.returnPoint(n),g.instance.returnPoint(o),g.instance.returnPoint(p),g.instance.returnPoint(q)}}else if(f>i){var t=Math.min(k/f,j);if(h.getWidth()>t){var u=t*i;n=g.instance.borrow(l-t/2,m+u/2),o=g.instance.borrow(l+t/2,m+u/2),p=g.instance.borrow(l-t/2,m-u/2),q=g.instance.borrow(l+t/2,m-u/2),this.tl.setPosition(n.x,n.y),this.tr.setPosition(o.x,o.y),this.bl.setPosition(p.x,p.y),this.br.setPosition(q.x,q.y),g.instance.returnPoint(n),g.instance.returnPoint(o),g.instance.returnPoint(p),g.instance.returnPoint(q)}}this.vertSquashRatio=this.detectVerticalSquash(b),this.draw(this.ctx);var v=this.getCroppedImage(a.cropWidth,a.cropHeight);a.croppedImage=v.src,a.cropAreaBounds&&this.imageSet&&(a.cropAreaBounds=this.getCropBounds(),a.$apply())},b.prototype.getCroppedImage=function(a,b){var c=this.getBounds();if(!this.srcImage)throw"Source image not set.";if(a&&b){var d=this.srcImage.height/this.srcImage.width,e=this.canvas.height/this.canvas.width,f=this.canvas.width,g=this.canvas.height;e>d?(f=this.canvas.width,g=this.canvas.width*d):d>e?(g=this.canvas.height,f=this.canvas.height/d):(g=this.canvas.height,f=this.canvas.width),this.ratioW=f/this.srcImage.width,this.ratioH=g/this.srcImage.height,this.cropCanvas.width=a,this.cropCanvas.height=b;var h=(this.buffer.height-g)/2/this.ratioH,i=(this.buffer.width-f)/2/this.ratioW;this.drawImageIOSFix(this.cropCanvas.getContext("2d"),this.srcImage,Math.max(Math.round(c.left/this.ratioW-i),0),Math.max(Math.round(c.top/this.ratioH-h),0),Math.max(Math.round(c.getWidth()/this.ratioW),1),Math.max(Math.round(c.getHeight()/this.ratioH),1),0,0,a,b),this.croppedImage.width=a,this.croppedImage.height=b}else this.cropCanvas.width=Math.max(c.getWidth(),1),this.cropCanvas.height=Math.max(c.getHeight(),1),this.cropCanvas.getContext("2d").drawImage(this.buffer,c.left,c.top,Math.max(c.getWidth(),1),Math.max(c.getHeight(),1),0,0,c.getWidth(),c.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},b.prototype.getBounds=function(){for(var a=Number.MAX_VALUE,b=Number.MAX_VALUE,c=-Number.MAX_VALUE,d=-Number.MAX_VALUE,e=0;ec&&(c=f.getPosition().x),f.getPosition().yd&&(d=f.getPosition().y)}var g=new k;return g.left=a,g.right=c,g.top=b,g.bottom=d,g},b.prototype.getMousePos=function(a,b){var c=a.getBoundingClientRect();return g.instance.borrow(b.clientX-c.left,b.clientY-c.top)},b.prototype.getTouchPos=function(a,b){var c=a.getBoundingClientRect();return g.instance.borrow(b.clientX-c.left,b.clientY-c.top)},b.prototype.onTouchMove=function(a){if(a.preventDefault(),a.touches.length>=1)for(var b=0;ba.getPosition().x?a.getVerticalNeighbour().getPosition().y>a.getPosition().y?(c.setOver(this.canvas),c.setStyle(this.canvas,"nwse-resize")):(c.setOver(this.canvas),c.setStyle(this.canvas,"nesw-resize")):a.getVerticalNeighbour().getPosition().y>a.getPosition().y?(c.setOver(this.canvas),c.setStyle(this.canvas,"nesw-resize")):(c.setOver(this.canvas),c.setStyle(this.canvas,"nwse-resize")),!0):(a.setOver(!1),!1)},b.prototype.onTouchStart=function(){this.isMouseDown=!0},b.prototype.onTouchEnd=function(b){for(var c=0;cf;){var i=e[4*(h-1)+3];0===i?g=h:f=h,h=g+f>>1}var j=h/b;return 0===j?1:j},b.prototype.onMouseDown=function(){this.isMouseDown=!0},b.prototype.onMouseUp=function(){if(d.isImageSet()){if(c.setReleased(this.canvas),this.isMouseDown=!1,this.handleRelease(new m(0,0,0)),1==this.currentlyInteracting){var b=this.getCroppedImage(a.cropWidth,a.cropHeight);a.croppedImage=b.src,a.$apply()}this.currentlyInteracting=!1}},b}();angular.element(document).ready(function(){var c=angular.element(b[0]),e=c[0],f=a.cropWidth,g=a.cropHeight,h=a.keepAspect,i=a.touchRadius;d=new n(e,e.width/2-f/2,e.height/2-g/2,f,g,h,i)}),a.$watch("image",function(b){if(null!=b){var c=new Image;c.addEventListener("load",function(){d.setImage(c);var b=d.getCroppedImage(a.cropWidth,a.cropHeight);a.croppedImage=b.src,a.$apply()},!1),c.src=b}})}}}]),angular.module("angular-img-cropper").directive("imgCropperFileread",["$timeout",function(a){return{scope:{image:"="},link:function(b,c){c.bind("change",function(c){var d=new FileReader;d.onload=function(c){a(function(){b.image=c.target.result},0)},c.target.files[0]&&d.readAsDataURL(c.target.files[0])})}}}]),angular.module("angular-img-cropper").factory("imageCropperDataShare",function(){var a,b,c={};return c.setPressed=function(b){a=b},c.setReleased=function(b){b===a&&(a=void 0)},c.setOver=function(a){b=a},c.setStyle=function(c,d){void 0!==a?a===c&&angular.element(document.documentElement).css("cursor",d):c===b&&angular.element(document.documentElement).css("cursor",d)},c}); \ No newline at end of file diff --git a/src/angular-img-cropper.js b/src/angular-img-cropper.js index 2e14beb..b6ba81a 100644 --- a/src/angular-img-cropper.js +++ b/src/angular-img-cropper.js @@ -1087,30 +1087,30 @@ angular.module('angular-img-cropper').factory("imageCropperDataShare", function var over; share.setPressed = function (canvas) { pressed = canvas; - } + }; share.setReleased = function (canvas) { - if (canvas == pressed) { + if (canvas === pressed) { pressed = undefined; } - } + }; share.setOver = function (canvas) { over = canvas; - } + }; share.setStyle = function (canvas, style) { - if (pressed != undefined) { - if (pressed == canvas) { + if (pressed !== undefined) { + if (pressed === canvas) { angular.element(document.documentElement).css('cursor', style); } } else { - if (canvas == over) { + if (canvas === over) { angular.element(document.documentElement).css('cursor', style); } } - } + }; return share; diff --git a/test/angular-img-cropper.js b/test/angular-img-cropper.js index 2e14beb..b6ba81a 100644 --- a/test/angular-img-cropper.js +++ b/test/angular-img-cropper.js @@ -1087,30 +1087,30 @@ angular.module('angular-img-cropper').factory("imageCropperDataShare", function var over; share.setPressed = function (canvas) { pressed = canvas; - } + }; share.setReleased = function (canvas) { - if (canvas == pressed) { + if (canvas === pressed) { pressed = undefined; } - } + }; share.setOver = function (canvas) { over = canvas; - } + }; share.setStyle = function (canvas, style) { - if (pressed != undefined) { - if (pressed == canvas) { + if (pressed !== undefined) { + if (pressed === canvas) { angular.element(document.documentElement).css('cursor', style); } } else { - if (canvas == over) { + if (canvas === over) { angular.element(document.documentElement).css('cursor', style); } } - } + }; return share;