From d244d0164a7de62a34aad054ebb984b856a510ab Mon Sep 17 00:00:00 2001 From: alexk111 Date: Thu, 20 Nov 2014 09:15:34 +0800 Subject: [PATCH] BugFix > Don't use CrossOrigin for local images --- bower.json | 2 +- compile/minified/ng-img-crop.js | 2 +- compile/unminified/ng-img-crop.js | 8 +++++--- package.json | 2 +- source/js/classes/crop-host.js | 4 +++- 5 files changed, 11 insertions(+), 7 deletions(-) diff --git a/bower.json b/bower.json index 72456a32..d075dbaf 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "ng-img-crop", - "version": "0.3.0", + "version": "0.3.1", "authors": [ "Alex Kaul " ], diff --git a/compile/minified/ng-img-crop.js b/compile/minified/ng-img-crop.js index efcf9f06..79e36f9f 100644 --- a/compile/minified/ng-img-crop.js +++ b/compile/minified/ng-img-crop.js @@ -1 +1 @@ -/*! ngImgCrop v0.3.0 License: MIT */!function(){"use strict";var e=angular.module("ngImgCrop",[]);e.factory("cropAreaCircle",["cropArea",function(e){var t=function(){e.apply(this,arguments),this._boxResizeBaseSize=20,this._boxResizeNormalRatio=.9,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 t.prototype=new e,t.prototype._calcCirclePerimeterCoords=function(e){var t=this._size/2,i=e*(Math.PI/180),s=this._x+t*Math.cos(i),r=this._y+t*Math.sin(i);return[s,r]},t.prototype._calcResizeIconCenterCoords=function(){return this._calcCirclePerimeterCoords(-45)},t.prototype._isCoordWithinArea=function(e){return Math.sqrt((e[0]-this._x)*(e[0]-this._x)+(e[1]-this._y)*(e[1]-this._y))t[0]-i&&e[0]t[1]-i&&e[1]a?this._posResizeStartSize+2*a:this._posResizeStartSize+2*o,this._size=Math.max(this._minSize,r),this._boxResizeIsHover=!0,s=!0,this._events.trigger("area-resize")}else this._isCoordWithinBoxResize([e,t])?(i="nesw-resize",this._areaIsHover=!1,this._boxResizeIsHover=!0,s=!0):this._isCoordWithinArea([e,t])&&(i="move",this._areaIsHover=!0,s=!0);return this._dontDragOutside(),angular.element(this._ctx.canvas).css({cursor:i}),s},t.prototype.processMouseDown=function(e,t){this._isCoordWithinBoxResize([e,t])?(this._areaIsDragging=!1,this._areaIsHover=!1,this._boxResizeIsDragging=!0,this._boxResizeIsHover=!0,this._posResizeStartX=e,this._posResizeStartY=t,this._posResizeStartSize=this._size,this._events.trigger("area-resize-start")):this._isCoordWithinArea([e,t])&&(this._areaIsDragging=!0,this._areaIsHover=!0,this._boxResizeIsDragging=!1,this._boxResizeIsHover=!1,this._posDragStartX=e-this._x,this._posDragStartY=t-this._y,this._events.trigger("area-move-start"))},t.prototype.processMouseUp=function(){this._areaIsDragging&&(this._areaIsDragging=!1,this._events.trigger("area-move-end")),this._boxResizeIsDragging&&(this._boxResizeIsDragging=!1,this._events.trigger("area-resize-end")),this._areaIsHover=!1,this._boxResizeIsHover=!1,this._posDragStartX=0,this._posDragStartY=0},t}]),e.factory("cropAreaSquare",["cropArea",function(e){var t=function(){e.apply(this,arguments),this._resizeCtrlBaseRadius=10,this._resizeCtrlNormalRatio=.75,this._resizeCtrlHoverRatio=1,this._iconMoveNormalRatio=.9,this._iconMoveHoverRatio=1.2,this._resizeCtrlNormalRadius=this._resizeCtrlBaseRadius*this._resizeCtrlNormalRatio,this._resizeCtrlHoverRadius=this._resizeCtrlBaseRadius*this._resizeCtrlHoverRatio,this._posDragStartX=0,this._posDragStartY=0,this._posResizeStartX=0,this._posResizeStartY=0,this._posResizeStartSize=0,this._resizeCtrlIsHover=-1,this._areaIsHover=!1,this._resizeCtrlIsDragging=-1,this._areaIsDragging=!1};return t.prototype=new e,t.prototype._calcSquareCorners=function(){var e=this._size/2;return[[this._x-e,this._y-e],[this._x+e,this._y-e],[this._x-e,this._y+e],[this._x+e,this._y+e]]},t.prototype._calcSquareDimensions=function(){var e=this._size/2;return{left:this._x-e,top:this._y-e,right:this._x+e,bottom:this._y+e}},t.prototype._isCoordWithinArea=function(e){var t=this._calcSquareDimensions();return e[0]>=t.left&&e[0]<=t.right&&e[1]>=t.top&&e[1]<=t.bottom},t.prototype._isCoordWithinResizeCtrl=function(e){for(var t=this._calcSquareCorners(),i=-1,s=0,r=t.length;r>s;s++){var o=t[s];if(e[0]>o[0]-this._resizeCtrlHoverRadius&&e[0]o[1]-this._resizeCtrlHoverRadius&&e[1]i;i++){var r=t[i];this._cropCanvas.drawIconResizeCircle(r,this._resizeCtrlBaseRadius,this._resizeCtrlIsHover===i?this._resizeCtrlHoverRatio:this._resizeCtrlNormalRatio)}},t.prototype.processMouseMove=function(e,t){var i="default",s=!1;if(this._resizeCtrlIsHover=-1,this._areaIsHover=!1,this._areaIsDragging)this._x=e-this._posDragStartX,this._y=t-this._posDragStartY,this._areaIsHover=!0,i="move",s=!0,this._events.trigger("area-move");else if(this._resizeCtrlIsDragging>-1){var r,o;switch(this._resizeCtrlIsDragging){case 0:r=-1,o=-1,i="nwse-resize";break;case 1:r=1,o=-1,i="nesw-resize";break;case 2:r=-1,o=1,i="nesw-resize";break;case 3:r=1,o=1,i="nwse-resize"}var a,n=(e-this._posResizeStartX)*r,h=(t-this._posResizeStartY)*o;a=n>h?this._posResizeStartSize+h:this._posResizeStartSize+n;var c=this._size;this._size=Math.max(this._minSize,a);var g=(this._size-c)/2;this._x+=g*r,this._y+=g*o,this._resizeCtrlIsHover=this._resizeCtrlIsDragging,s=!0,this._events.trigger("area-resize")}else{var _=this._isCoordWithinResizeCtrl([e,t]);if(_>-1){switch(_){case 0:i="nwse-resize";break;case 1:i="nesw-resize";break;case 2:i="nesw-resize";break;case 3:i="nwse-resize"}this._areaIsHover=!1,this._resizeCtrlIsHover=_,s=!0}else this._isCoordWithinArea([e,t])&&(i="move",this._areaIsHover=!0,s=!0)}return this._dontDragOutside(),angular.element(this._ctx.canvas).css({cursor:i}),s},t.prototype.processMouseDown=function(e,t){var i=this._isCoordWithinResizeCtrl([e,t]);i>-1?(this._areaIsDragging=!1,this._areaIsHover=!1,this._resizeCtrlIsDragging=i,this._resizeCtrlIsHover=i,this._posResizeStartX=e,this._posResizeStartY=t,this._posResizeStartSize=this._size,this._events.trigger("area-resize-start")):this._isCoordWithinArea([e,t])&&(this._areaIsDragging=!0,this._areaIsHover=!0,this._resizeCtrlIsDragging=-1,this._resizeCtrlIsHover=-1,this._posDragStartX=e-this._x,this._posDragStartY=t-this._y,this._events.trigger("area-move-start"))},t.prototype.processMouseUp=function(){this._areaIsDragging&&(this._areaIsDragging=!1,this._events.trigger("area-move-end")),this._resizeCtrlIsDragging>-1&&(this._resizeCtrlIsDragging=-1,this._events.trigger("area-resize-end")),this._areaIsHover=!1,this._resizeCtrlIsHover=-1,this._posDragStartX=0,this._posDragStartY=0},t}]),e.factory("cropArea",["cropCanvas",function(e){var t=function(t,i){this._ctx=t,this._events=i,this._minSize=80,this._cropCanvas=new e(t),this._image=new Image,this._x=0,this._y=0,this._size=200};return t.prototype.getImage=function(){return this._image},t.prototype.setImage=function(e){this._image=e},t.prototype.getX=function(){return this._x},t.prototype.setX=function(e){this._x=e,this._dontDragOutside()},t.prototype.getY=function(){return this._y},t.prototype.setY=function(e){this._y=e,this._dontDragOutside()},t.prototype.getSize=function(){return this._size},t.prototype.setSize=function(e){this._size=Math.max(this._minSize,e),this._dontDragOutside()},t.prototype.getMinSize=function(){return this._minSize},t.prototype.setMinSize=function(e){this._minSize=e,this._size=Math.max(this._minSize,this._size),this._dontDragOutside()},t.prototype._dontDragOutside=function(){var e=this._ctx.canvas.height,t=this._ctx.canvas.width;this._size>t&&(this._size=t),this._size>e&&(this._size=e),this._xt-this._size/2&&(this._x=t-this._size/2),this._ye-this._size/2&&(this._y=e-this._size/2)},t.prototype._drawArea=function(){},t.prototype.draw=function(){this._cropCanvas.drawCropArea(this._image,[this._x,this._y],this._size,this._drawArea)},t.prototype.processMouseMove=function(){},t.prototype.processMouseDown=function(){},t.prototype.processMouseUp=function(){},t}]),e.factory("cropCanvas",[function(){var e=[[-.5,-2],[-3,-4.5],[-.5,-7],[-7,-7],[-7,-.5],[-4.5,-3],[-2,-.5]],t=[[.5,-2],[3,-4.5],[.5,-7],[7,-7],[7,-.5],[4.5,-3],[2,-.5]],i=[[-.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]],r=[[-1.5,-2.5],[-1.5,-6],[-5,-6],[0,-11],[5,-6],[1.5,-6],[1.5,-2.5]],o=[[-2.5,-1.5],[-6,-1.5],[-6,-5],[-11,0],[-6,5],[-6,1.5],[-2.5,1.5]],a=[[-1.5,2.5],[-1.5,6],[-5,6],[0,11],[5,6],[1.5,6],[1.5,2.5]],n=[[2.5,-1.5],[6,-1.5],[6,-5],[11,0],[6,5],[6,1.5],[2.5,1.5]],h={areaOutline:"#fff",resizeBoxStroke:"#fff",resizeBoxFill:"#444",resizeBoxArrowFill:"#fff",resizeCircleStroke:"#fff",resizeCircleFill:"#444",moveIconFill:"#fff"};return function(c){var g=function(e,t,i){return[i*e[0]+t[0],i*e[1]+t[1]]},_=function(e,t,i,s){c.save(),c.fillStyle=t,c.beginPath();var r,o=g(e[0],i,s);c.moveTo(o[0],o[1]);for(var a in e)a>0&&(r=g(e[a],i,s),c.lineTo(r[0],r[1]));c.lineTo(o[0],o[1]),c.fill(),c.closePath(),c.restore()};this.drawIconMove=function(e,t){_(r,h.moveIconFill,e,t),_(o,h.moveIconFill,e,t),_(a,h.moveIconFill,e,t),_(n,h.moveIconFill,e,t)},this.drawIconResizeCircle=function(e,t,i){var s=t*i;c.save(),c.strokeStyle=h.resizeCircleStroke,c.lineWidth=2,c.fillStyle=h.resizeCircleFill,c.beginPath(),c.arc(e[0],e[1],s,0,2*Math.PI),c.fill(),c.stroke(),c.closePath(),c.restore()},this.drawIconResizeBoxBase=function(e,t,i){var s=t*i;c.save(),c.strokeStyle=h.resizeBoxStroke,c.lineWidth=2,c.fillStyle=h.resizeBoxFill,c.fillRect(e[0]-s/2,e[1]-s/2,s,s),c.strokeRect(e[0]-s/2,e[1]-s/2,s,s),c.restore()},this.drawIconResizeBoxNESW=function(e,s,r){this.drawIconResizeBoxBase(e,s,r),_(t,h.resizeBoxArrowFill,e,r),_(i,h.resizeBoxArrowFill,e,r)},this.drawIconResizeBoxNWSE=function(t,i,r){this.drawIconResizeBoxBase(t,i,r),_(e,h.resizeBoxArrowFill,t,r),_(s,h.resizeBoxArrowFill,t,r)},this.drawCropArea=function(e,t,i,s){var r=e.width/c.canvas.width,o=e.height/c.canvas.height,a=t[0]-i/2,n=t[1]-i/2;c.save(),c.strokeStyle=h.areaOutline,c.lineWidth=2,c.beginPath(),s(c,t,i),c.stroke(),c.clip(),i>0&&c.drawImage(e,a*r,n*o,i*r,i*o,a,n,i,i),c.beginPath(),s(c,t,i),c.stroke(),c.clip(),c.restore()}}}]),e.factory("cropHost",["$document","cropAreaCircle","cropAreaSquare",function(e,t,i){var s=function(e){var t=e.getBoundingClientRect(),i=document.body,s=document.documentElement,r=window.pageYOffset||s.scrollTop||i.scrollTop,o=window.pageXOffset||s.scrollLeft||i.scrollLeft,a=s.clientTop||i.clientTop||0,n=s.clientLeft||i.clientLeft||0,h=t.top+r-a,c=t.left+o-n;return{top:Math.round(h),left:Math.round(c)}};return function(r,o,a){function n(){h.clearRect(0,0,h.canvas.width,h.canvas.height),null!==c&&(h.drawImage(c,0,0,h.canvas.width,h.canvas.height),h.save(),h.fillStyle="rgba(0, 0, 0, 0.65)",h.fillRect(0,0,h.canvas.width,h.canvas.height),h.restore(),g.draw())}var h=null,c=null,g=null,_=[100,100],u=[300,300],l=200,p="image/png",z=null,v=function(){if(null!==c){g.setImage(c);var e=[c.width,c.height],t=c.width/c.height,i=e;i[0]>u[0]?(i[0]=u[0],i[1]=i[0]/t):i[0]<_[0]&&(i[0]=_[0],i[1]=i[0]/t),i[1]>u[1]?(i[1]=u[1],i[0]=i[1]*t):i[1]<_[1]&&(i[1]=_[1],i[0]=i[1]*t),r.prop("width",i[0]).prop("height",i[1]).css({"margin-left":-i[0]/2+"px","margin-top":-i[1]/2+"px"}),g.setX(h.canvas.width/2),g.setY(h.canvas.height/2),g.setSize(Math.min(200,h.canvas.width/2,h.canvas.height/2))}else r.prop("width",0).prop("height",0).css({"margin-top":0});n()},f=function(e){return angular.isDefined(e.changedTouches)?e.changedTouches:e.originalEvent.changedTouches},d=function(e){if(null!==c){var t,i,r=s(h.canvas);"touchmove"===e.type?(t=f(e)[0].pageX,i=f(e)[0].pageY):(t=e.pageX,i=e.pageY),g.processMouseMove(t-r.left,i-r.top),n()}},m=function(e){if(e.preventDefault(),e.stopPropagation(),null!==c){var t,i,r=s(h.canvas);"touchstart"===e.type?(t=f(e)[0].pageX,i=f(e)[0].pageY):(t=e.pageX,i=e.pageY),g.processMouseDown(t-r.left,i-r.top),n()}},I=function(e){if(null!==c){var t,i,r=s(h.canvas);"touchend"===e.type?(t=f(e)[0].pageX,i=f(e)[0].pageY):(t=e.pageX,i=e.pageY),g.processMouseUp(t-r.left,i-r.top),n()}};this.getResultImageDataURI=function(){var e,t;return t=angular.element("")[0],e=t.getContext("2d"),t.width=l,t.height=l,null!==c&&e.drawImage(c,(g.getX()-g.getSize()/2)*(c.width/h.canvas.width),(g.getY()-g.getSize()/2)*(c.height/h.canvas.height),g.getSize()*(c.width/h.canvas.width),g.getSize()*(c.height/h.canvas.height),0,0,l,l),null!==z?t.toDataURL(p,z):t.toDataURL(p)},this.setNewImageSource=function(e){if(c=null,v(),a.trigger("image-updated"),e){var t=new Image;t.crossOrigin="anonymous",t.onload=function(){a.trigger("load-done"),c=t,v(),a.trigger("image-updated")},t.onerror=function(){a.trigger("load-error")},a.trigger("load-start"),t.src=e}},this.setMaxDimensions=function(e,t){if(u=[e,t],null!==c){var i=h.canvas.width,s=h.canvas.height,o=[c.width,c.height],a=c.width/c.height,l=o;l[0]>u[0]?(l[0]=u[0],l[1]=l[0]/a):l[0]<_[0]&&(l[0]=_[0],l[1]=l[0]/a),l[1]>u[1]?(l[1]=u[1],l[0]=l[1]*a):l[1]<_[1]&&(l[1]=_[1],l[0]=l[1]*a),r.prop("width",l[0]).prop("height",l[1]).css({"margin-left":-l[0]/2+"px","margin-top":-l[1]/2+"px"});var p=h.canvas.width/i,z=h.canvas.height/s,v=Math.min(p,z);g.setX(g.getX()*p),g.setY(g.getY()*z),g.setSize(g.getSize()*v)}else r.prop("width",0).prop("height",0).css({"margin-top":0});n()},this.setAreaMinSize=function(e){e=parseInt(e,10),isNaN(e)||(g.setMinSize(e),n())},this.setResultImageSize=function(e){e=parseInt(e,10),isNaN(e)||(l=e)},this.setResultImageFormat=function(e){p=e},this.setResultImageQuality=function(e){e=parseFloat(e),!isNaN(e)&&e>=0&&1>=e&&(z=e)},this.setAreaType=function(e){var s=g.getSize(),r=g.getMinSize(),o=g.getX(),_=g.getY(),u=t;"square"===e&&(u=i),g=new u(h,a),g.setMinSize(r),g.setSize(s),g.setX(o),g.setY(_),null!==c&&g.setImage(c),n()},h=r[0].getContext("2d"),g=new t(h,a),e.on("mousemove",d),r.on("mousedown",m),e.on("mouseup",I),e.on("touchmove",d),r.on("touchstart",m),e.on("touchend",I),this.destroy=function(){e.off("mousemove",d),r.off("mousedown",m),e.off("mouseup",d),e.off("touchmove",d),r.off("touchstart",m),e.off("touchend",d),r.remove()}}}]),e.factory("cropPubSub",[function(){return function(){var e={};this.on=function(t,i){return t.split(" ").forEach(function(t){e[t]||(e[t]=[]),e[t].push(i)}),this},this.trigger=function(t,i){return angular.forEach(e[t],function(e){e.call(null,i)}),this}}}]),e.directive("imgCrop",["$timeout","cropHost","cropPubSub",function(e,t,i){return{restrict:"E",scope:{image:"=",resultImage:"=",changeOnFly:"=",areaType:"@",areaMinSize:"=",resultImageSize:"=",resultImageFormat:"@",resultImageQuality:"=",onChange:"&",onLoadBegin:"&",onLoadDone:"&",onLoadError:"&"},template:"",controller:["$scope",function(e){e.events=new i}],link:function(i,s){var r,o=i.events,a=new t(s.find("canvas"),{},o),n=function(e){var t=a.getResultImageDataURI();r!==t&&(r=t,angular.isDefined(e.resultImage)&&(e.resultImage=t),e.onChange({$dataURI:e.resultImage}))},h=function(t){return function(){e(function(){i.$apply(function(e){t(e)})})}};o.on("load-start",h(function(e){e.onLoadBegin({})})).on("load-done",h(function(e){e.onLoadDone({})})).on("load-error",h(function(e){e.onLoadError({})})).on("area-move area-resize",h(function(e){e.changeOnFly&&n(e)})).on("area-move-end area-resize-end image-updated",h(function(e){n(e)})),i.$watch("image",function(){a.setNewImageSource(i.image)}),i.$watch("areaType",function(){a.setAreaType(i.areaType),n(i)}),i.$watch("areaMinSize",function(){a.setAreaMinSize(i.areaMinSize),n(i)}),i.$watch("resultImageSize",function(){a.setResultImageSize(i.resultImageSize),n(i)}),i.$watch("resultImageFormat",function(){a.setResultImageFormat(i.resultImageFormat),n(i)}),i.$watch("resultImageQuality",function(){a.setResultImageQuality(i.resultImageQuality),n(i)}),i.$watch(function(){return[s[0].clientWidth,s[0].clientHeight]},function(e){a.setMaxDimensions(e[0],e[1]),n(i)},!0),i.$on("$destroy",function(){a.destroy()})}}}])}(); \ No newline at end of file +/*! ngImgCrop v0.3.1 License: MIT */!function(){"use strict";var e=angular.module("ngImgCrop",[]);e.factory("cropAreaCircle",["cropArea",function(e){var t=function(){e.apply(this,arguments),this._boxResizeBaseSize=20,this._boxResizeNormalRatio=.9,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 t.prototype=new e,t.prototype._calcCirclePerimeterCoords=function(e){var t=this._size/2,i=e*(Math.PI/180),s=this._x+t*Math.cos(i),r=this._y+t*Math.sin(i);return[s,r]},t.prototype._calcResizeIconCenterCoords=function(){return this._calcCirclePerimeterCoords(-45)},t.prototype._isCoordWithinArea=function(e){return Math.sqrt((e[0]-this._x)*(e[0]-this._x)+(e[1]-this._y)*(e[1]-this._y))t[0]-i&&e[0]t[1]-i&&e[1]a?this._posResizeStartSize+2*a:this._posResizeStartSize+2*o,this._size=Math.max(this._minSize,r),this._boxResizeIsHover=!0,s=!0,this._events.trigger("area-resize")}else this._isCoordWithinBoxResize([e,t])?(i="nesw-resize",this._areaIsHover=!1,this._boxResizeIsHover=!0,s=!0):this._isCoordWithinArea([e,t])&&(i="move",this._areaIsHover=!0,s=!0);return this._dontDragOutside(),angular.element(this._ctx.canvas).css({cursor:i}),s},t.prototype.processMouseDown=function(e,t){this._isCoordWithinBoxResize([e,t])?(this._areaIsDragging=!1,this._areaIsHover=!1,this._boxResizeIsDragging=!0,this._boxResizeIsHover=!0,this._posResizeStartX=e,this._posResizeStartY=t,this._posResizeStartSize=this._size,this._events.trigger("area-resize-start")):this._isCoordWithinArea([e,t])&&(this._areaIsDragging=!0,this._areaIsHover=!0,this._boxResizeIsDragging=!1,this._boxResizeIsHover=!1,this._posDragStartX=e-this._x,this._posDragStartY=t-this._y,this._events.trigger("area-move-start"))},t.prototype.processMouseUp=function(){this._areaIsDragging&&(this._areaIsDragging=!1,this._events.trigger("area-move-end")),this._boxResizeIsDragging&&(this._boxResizeIsDragging=!1,this._events.trigger("area-resize-end")),this._areaIsHover=!1,this._boxResizeIsHover=!1,this._posDragStartX=0,this._posDragStartY=0},t}]),e.factory("cropAreaSquare",["cropArea",function(e){var t=function(){e.apply(this,arguments),this._resizeCtrlBaseRadius=10,this._resizeCtrlNormalRatio=.75,this._resizeCtrlHoverRatio=1,this._iconMoveNormalRatio=.9,this._iconMoveHoverRatio=1.2,this._resizeCtrlNormalRadius=this._resizeCtrlBaseRadius*this._resizeCtrlNormalRatio,this._resizeCtrlHoverRadius=this._resizeCtrlBaseRadius*this._resizeCtrlHoverRatio,this._posDragStartX=0,this._posDragStartY=0,this._posResizeStartX=0,this._posResizeStartY=0,this._posResizeStartSize=0,this._resizeCtrlIsHover=-1,this._areaIsHover=!1,this._resizeCtrlIsDragging=-1,this._areaIsDragging=!1};return t.prototype=new e,t.prototype._calcSquareCorners=function(){var e=this._size/2;return[[this._x-e,this._y-e],[this._x+e,this._y-e],[this._x-e,this._y+e],[this._x+e,this._y+e]]},t.prototype._calcSquareDimensions=function(){var e=this._size/2;return{left:this._x-e,top:this._y-e,right:this._x+e,bottom:this._y+e}},t.prototype._isCoordWithinArea=function(e){var t=this._calcSquareDimensions();return e[0]>=t.left&&e[0]<=t.right&&e[1]>=t.top&&e[1]<=t.bottom},t.prototype._isCoordWithinResizeCtrl=function(e){for(var t=this._calcSquareCorners(),i=-1,s=0,r=t.length;r>s;s++){var o=t[s];if(e[0]>o[0]-this._resizeCtrlHoverRadius&&e[0]o[1]-this._resizeCtrlHoverRadius&&e[1]i;i++){var r=t[i];this._cropCanvas.drawIconResizeCircle(r,this._resizeCtrlBaseRadius,this._resizeCtrlIsHover===i?this._resizeCtrlHoverRatio:this._resizeCtrlNormalRatio)}},t.prototype.processMouseMove=function(e,t){var i="default",s=!1;if(this._resizeCtrlIsHover=-1,this._areaIsHover=!1,this._areaIsDragging)this._x=e-this._posDragStartX,this._y=t-this._posDragStartY,this._areaIsHover=!0,i="move",s=!0,this._events.trigger("area-move");else if(this._resizeCtrlIsDragging>-1){var r,o;switch(this._resizeCtrlIsDragging){case 0:r=-1,o=-1,i="nwse-resize";break;case 1:r=1,o=-1,i="nesw-resize";break;case 2:r=-1,o=1,i="nesw-resize";break;case 3:r=1,o=1,i="nwse-resize"}var a,n=(e-this._posResizeStartX)*r,h=(t-this._posResizeStartY)*o;a=n>h?this._posResizeStartSize+h:this._posResizeStartSize+n;var c=this._size;this._size=Math.max(this._minSize,a);var g=(this._size-c)/2;this._x+=g*r,this._y+=g*o,this._resizeCtrlIsHover=this._resizeCtrlIsDragging,s=!0,this._events.trigger("area-resize")}else{var _=this._isCoordWithinResizeCtrl([e,t]);if(_>-1){switch(_){case 0:i="nwse-resize";break;case 1:i="nesw-resize";break;case 2:i="nesw-resize";break;case 3:i="nwse-resize"}this._areaIsHover=!1,this._resizeCtrlIsHover=_,s=!0}else this._isCoordWithinArea([e,t])&&(i="move",this._areaIsHover=!0,s=!0)}return this._dontDragOutside(),angular.element(this._ctx.canvas).css({cursor:i}),s},t.prototype.processMouseDown=function(e,t){var i=this._isCoordWithinResizeCtrl([e,t]);i>-1?(this._areaIsDragging=!1,this._areaIsHover=!1,this._resizeCtrlIsDragging=i,this._resizeCtrlIsHover=i,this._posResizeStartX=e,this._posResizeStartY=t,this._posResizeStartSize=this._size,this._events.trigger("area-resize-start")):this._isCoordWithinArea([e,t])&&(this._areaIsDragging=!0,this._areaIsHover=!0,this._resizeCtrlIsDragging=-1,this._resizeCtrlIsHover=-1,this._posDragStartX=e-this._x,this._posDragStartY=t-this._y,this._events.trigger("area-move-start"))},t.prototype.processMouseUp=function(){this._areaIsDragging&&(this._areaIsDragging=!1,this._events.trigger("area-move-end")),this._resizeCtrlIsDragging>-1&&(this._resizeCtrlIsDragging=-1,this._events.trigger("area-resize-end")),this._areaIsHover=!1,this._resizeCtrlIsHover=-1,this._posDragStartX=0,this._posDragStartY=0},t}]),e.factory("cropArea",["cropCanvas",function(e){var t=function(t,i){this._ctx=t,this._events=i,this._minSize=80,this._cropCanvas=new e(t),this._image=new Image,this._x=0,this._y=0,this._size=200};return t.prototype.getImage=function(){return this._image},t.prototype.setImage=function(e){this._image=e},t.prototype.getX=function(){return this._x},t.prototype.setX=function(e){this._x=e,this._dontDragOutside()},t.prototype.getY=function(){return this._y},t.prototype.setY=function(e){this._y=e,this._dontDragOutside()},t.prototype.getSize=function(){return this._size},t.prototype.setSize=function(e){this._size=Math.max(this._minSize,e),this._dontDragOutside()},t.prototype.getMinSize=function(){return this._minSize},t.prototype.setMinSize=function(e){this._minSize=e,this._size=Math.max(this._minSize,this._size),this._dontDragOutside()},t.prototype._dontDragOutside=function(){var e=this._ctx.canvas.height,t=this._ctx.canvas.width;this._size>t&&(this._size=t),this._size>e&&(this._size=e),this._xt-this._size/2&&(this._x=t-this._size/2),this._ye-this._size/2&&(this._y=e-this._size/2)},t.prototype._drawArea=function(){},t.prototype.draw=function(){this._cropCanvas.drawCropArea(this._image,[this._x,this._y],this._size,this._drawArea)},t.prototype.processMouseMove=function(){},t.prototype.processMouseDown=function(){},t.prototype.processMouseUp=function(){},t}]),e.factory("cropCanvas",[function(){var e=[[-.5,-2],[-3,-4.5],[-.5,-7],[-7,-7],[-7,-.5],[-4.5,-3],[-2,-.5]],t=[[.5,-2],[3,-4.5],[.5,-7],[7,-7],[7,-.5],[4.5,-3],[2,-.5]],i=[[-.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]],r=[[-1.5,-2.5],[-1.5,-6],[-5,-6],[0,-11],[5,-6],[1.5,-6],[1.5,-2.5]],o=[[-2.5,-1.5],[-6,-1.5],[-6,-5],[-11,0],[-6,5],[-6,1.5],[-2.5,1.5]],a=[[-1.5,2.5],[-1.5,6],[-5,6],[0,11],[5,6],[1.5,6],[1.5,2.5]],n=[[2.5,-1.5],[6,-1.5],[6,-5],[11,0],[6,5],[6,1.5],[2.5,1.5]],h={areaOutline:"#fff",resizeBoxStroke:"#fff",resizeBoxFill:"#444",resizeBoxArrowFill:"#fff",resizeCircleStroke:"#fff",resizeCircleFill:"#444",moveIconFill:"#fff"};return function(c){var g=function(e,t,i){return[i*e[0]+t[0],i*e[1]+t[1]]},_=function(e,t,i,s){c.save(),c.fillStyle=t,c.beginPath();var r,o=g(e[0],i,s);c.moveTo(o[0],o[1]);for(var a in e)a>0&&(r=g(e[a],i,s),c.lineTo(r[0],r[1]));c.lineTo(o[0],o[1]),c.fill(),c.closePath(),c.restore()};this.drawIconMove=function(e,t){_(r,h.moveIconFill,e,t),_(o,h.moveIconFill,e,t),_(a,h.moveIconFill,e,t),_(n,h.moveIconFill,e,t)},this.drawIconResizeCircle=function(e,t,i){var s=t*i;c.save(),c.strokeStyle=h.resizeCircleStroke,c.lineWidth=2,c.fillStyle=h.resizeCircleFill,c.beginPath(),c.arc(e[0],e[1],s,0,2*Math.PI),c.fill(),c.stroke(),c.closePath(),c.restore()},this.drawIconResizeBoxBase=function(e,t,i){var s=t*i;c.save(),c.strokeStyle=h.resizeBoxStroke,c.lineWidth=2,c.fillStyle=h.resizeBoxFill,c.fillRect(e[0]-s/2,e[1]-s/2,s,s),c.strokeRect(e[0]-s/2,e[1]-s/2,s,s),c.restore()},this.drawIconResizeBoxNESW=function(e,s,r){this.drawIconResizeBoxBase(e,s,r),_(t,h.resizeBoxArrowFill,e,r),_(i,h.resizeBoxArrowFill,e,r)},this.drawIconResizeBoxNWSE=function(t,i,r){this.drawIconResizeBoxBase(t,i,r),_(e,h.resizeBoxArrowFill,t,r),_(s,h.resizeBoxArrowFill,t,r)},this.drawCropArea=function(e,t,i,s){var r=e.width/c.canvas.width,o=e.height/c.canvas.height,a=t[0]-i/2,n=t[1]-i/2;c.save(),c.strokeStyle=h.areaOutline,c.lineWidth=2,c.beginPath(),s(c,t,i),c.stroke(),c.clip(),i>0&&c.drawImage(e,a*r,n*o,i*r,i*o,a,n,i,i),c.beginPath(),s(c,t,i),c.stroke(),c.clip(),c.restore()}}}]),e.factory("cropHost",["$document","cropAreaCircle","cropAreaSquare",function(e,t,i){var s=function(e){var t=e.getBoundingClientRect(),i=document.body,s=document.documentElement,r=window.pageYOffset||s.scrollTop||i.scrollTop,o=window.pageXOffset||s.scrollLeft||i.scrollLeft,a=s.clientTop||i.clientTop||0,n=s.clientLeft||i.clientLeft||0,h=t.top+r-a,c=t.left+o-n;return{top:Math.round(h),left:Math.round(c)}};return function(r,o,a){function n(){h.clearRect(0,0,h.canvas.width,h.canvas.height),null!==c&&(h.drawImage(c,0,0,h.canvas.width,h.canvas.height),h.save(),h.fillStyle="rgba(0, 0, 0, 0.65)",h.fillRect(0,0,h.canvas.width,h.canvas.height),h.restore(),g.draw())}var h=null,c=null,g=null,_=[100,100],u=[300,300],l=200,p="image/png",z=null,v=function(){if(null!==c){g.setImage(c);var e=[c.width,c.height],t=c.width/c.height,i=e;i[0]>u[0]?(i[0]=u[0],i[1]=i[0]/t):i[0]<_[0]&&(i[0]=_[0],i[1]=i[0]/t),i[1]>u[1]?(i[1]=u[1],i[0]=i[1]*t):i[1]<_[1]&&(i[1]=_[1],i[0]=i[1]*t),r.prop("width",i[0]).prop("height",i[1]).css({"margin-left":-i[0]/2+"px","margin-top":-i[1]/2+"px"}),g.setX(h.canvas.width/2),g.setY(h.canvas.height/2),g.setSize(Math.min(200,h.canvas.width/2,h.canvas.height/2))}else r.prop("width",0).prop("height",0).css({"margin-top":0});n()},f=function(e){return angular.isDefined(e.changedTouches)?e.changedTouches:e.originalEvent.changedTouches},d=function(e){if(null!==c){var t,i,r=s(h.canvas);"touchmove"===e.type?(t=f(e)[0].pageX,i=f(e)[0].pageY):(t=e.pageX,i=e.pageY),g.processMouseMove(t-r.left,i-r.top),n()}},m=function(e){if(e.preventDefault(),e.stopPropagation(),null!==c){var t,i,r=s(h.canvas);"touchstart"===e.type?(t=f(e)[0].pageX,i=f(e)[0].pageY):(t=e.pageX,i=e.pageY),g.processMouseDown(t-r.left,i-r.top),n()}},I=function(e){if(null!==c){var t,i,r=s(h.canvas);"touchend"===e.type?(t=f(e)[0].pageX,i=f(e)[0].pageY):(t=e.pageX,i=e.pageY),g.processMouseUp(t-r.left,i-r.top),n()}};this.getResultImageDataURI=function(){var e,t;return t=angular.element("")[0],e=t.getContext("2d"),t.width=l,t.height=l,null!==c&&e.drawImage(c,(g.getX()-g.getSize()/2)*(c.width/h.canvas.width),(g.getY()-g.getSize()/2)*(c.height/h.canvas.height),g.getSize()*(c.width/h.canvas.width),g.getSize()*(c.height/h.canvas.height),0,0,l,l),null!==z?t.toDataURL(p,z):t.toDataURL(p)},this.setNewImageSource=function(e){if(c=null,v(),a.trigger("image-updated"),e){var t=new Image;"http"===e.substring(0,4).toLowerCase()&&(t.crossOrigin="anonymous"),t.onload=function(){a.trigger("load-done"),c=t,v(),a.trigger("image-updated")},t.onerror=function(){a.trigger("load-error")},a.trigger("load-start"),t.src=e}},this.setMaxDimensions=function(e,t){if(u=[e,t],null!==c){var i=h.canvas.width,s=h.canvas.height,o=[c.width,c.height],a=c.width/c.height,l=o;l[0]>u[0]?(l[0]=u[0],l[1]=l[0]/a):l[0]<_[0]&&(l[0]=_[0],l[1]=l[0]/a),l[1]>u[1]?(l[1]=u[1],l[0]=l[1]*a):l[1]<_[1]&&(l[1]=_[1],l[0]=l[1]*a),r.prop("width",l[0]).prop("height",l[1]).css({"margin-left":-l[0]/2+"px","margin-top":-l[1]/2+"px"});var p=h.canvas.width/i,z=h.canvas.height/s,v=Math.min(p,z);g.setX(g.getX()*p),g.setY(g.getY()*z),g.setSize(g.getSize()*v)}else r.prop("width",0).prop("height",0).css({"margin-top":0});n()},this.setAreaMinSize=function(e){e=parseInt(e,10),isNaN(e)||(g.setMinSize(e),n())},this.setResultImageSize=function(e){e=parseInt(e,10),isNaN(e)||(l=e)},this.setResultImageFormat=function(e){p=e},this.setResultImageQuality=function(e){e=parseFloat(e),!isNaN(e)&&e>=0&&1>=e&&(z=e)},this.setAreaType=function(e){var s=g.getSize(),r=g.getMinSize(),o=g.getX(),_=g.getY(),u=t;"square"===e&&(u=i),g=new u(h,a),g.setMinSize(r),g.setSize(s),g.setX(o),g.setY(_),null!==c&&g.setImage(c),n()},h=r[0].getContext("2d"),g=new t(h,a),e.on("mousemove",d),r.on("mousedown",m),e.on("mouseup",I),e.on("touchmove",d),r.on("touchstart",m),e.on("touchend",I),this.destroy=function(){e.off("mousemove",d),r.off("mousedown",m),e.off("mouseup",d),e.off("touchmove",d),r.off("touchstart",m),e.off("touchend",d),r.remove()}}}]),e.factory("cropPubSub",[function(){return function(){var e={};this.on=function(t,i){return t.split(" ").forEach(function(t){e[t]||(e[t]=[]),e[t].push(i)}),this},this.trigger=function(t,i){return angular.forEach(e[t],function(e){e.call(null,i)}),this}}}]),e.directive("imgCrop",["$timeout","cropHost","cropPubSub",function(e,t,i){return{restrict:"E",scope:{image:"=",resultImage:"=",changeOnFly:"=",areaType:"@",areaMinSize:"=",resultImageSize:"=",resultImageFormat:"@",resultImageQuality:"=",onChange:"&",onLoadBegin:"&",onLoadDone:"&",onLoadError:"&"},template:"",controller:["$scope",function(e){e.events=new i}],link:function(i,s){var r,o=i.events,a=new t(s.find("canvas"),{},o),n=function(e){var t=a.getResultImageDataURI();r!==t&&(r=t,angular.isDefined(e.resultImage)&&(e.resultImage=t),e.onChange({$dataURI:e.resultImage}))},h=function(t){return function(){e(function(){i.$apply(function(e){t(e)})})}};o.on("load-start",h(function(e){e.onLoadBegin({})})).on("load-done",h(function(e){e.onLoadDone({})})).on("load-error",h(function(e){e.onLoadError({})})).on("area-move area-resize",h(function(e){e.changeOnFly&&n(e)})).on("area-move-end area-resize-end image-updated",h(function(e){n(e)})),i.$watch("image",function(){a.setNewImageSource(i.image)}),i.$watch("areaType",function(){a.setAreaType(i.areaType),n(i)}),i.$watch("areaMinSize",function(){a.setAreaMinSize(i.areaMinSize),n(i)}),i.$watch("resultImageSize",function(){a.setResultImageSize(i.resultImageSize),n(i)}),i.$watch("resultImageFormat",function(){a.setResultImageFormat(i.resultImageFormat),n(i)}),i.$watch("resultImageQuality",function(){a.setResultImageQuality(i.resultImageQuality),n(i)}),i.$watch(function(){return[s[0].clientWidth,s[0].clientHeight]},function(e){a.setMaxDimensions(e[0],e[1]),n(i)},!0),i.$on("$destroy",function(){a.destroy()})}}}])}(); \ No newline at end of file diff --git a/compile/unminified/ng-img-crop.js b/compile/unminified/ng-img-crop.js index d7c02ff5..857aebbb 100644 --- a/compile/unminified/ng-img-crop.js +++ b/compile/unminified/ng-img-crop.js @@ -1,11 +1,11 @@ /*! - * ngImgCrop v0.3.0 + * ngImgCrop v0.3.1 * https://github.com/alexk111/ngImgCrop * * Copyright (c) 2014 Alex Kaul * License: MIT * - * Generated at Sunday, November 16th, 2014, 6:44:28 PM + * Generated at Thursday, November 20th, 2014, 9:12:38 AM */ (function() { 'use strict'; @@ -787,7 +787,9 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', funct events.trigger('image-updated'); if(!!imageSource) { var newImage = new Image(); - newImage.crossOrigin = 'anonymous'; + if(imageSource.substring(0,4).toLowerCase()==='http') { + newImage.crossOrigin = 'anonymous'; + } newImage.onload = function(){ events.trigger('load-done'); image=newImage; diff --git a/package.json b/package.json index 3992943b..e2593e8d 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ }, "name": "ng-img-crop", "prettyName": "ngImgCrop", - "version": "0.3.0", + "version": "0.3.1", "description": "Image crop directive for AngularJS", "license": "MIT", "homepage": "https://github.com/alexk111/ngImgCrop", diff --git a/source/js/classes/crop-host.js b/source/js/classes/crop-host.js index f0418b52..6d834ed1 100644 --- a/source/js/classes/crop-host.js +++ b/source/js/classes/crop-host.js @@ -185,7 +185,9 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', funct events.trigger('image-updated'); if(!!imageSource) { var newImage = new Image(); - newImage.crossOrigin = 'anonymous'; + if(imageSource.substring(0,4).toLowerCase()==='http') { + newImage.crossOrigin = 'anonymous'; + } newImage.onload = function(){ events.trigger('load-done'); image=newImage;