Last active
July 15, 2018 08:02
-
-
Save bettysteger/25c7594288c9b102a951 to your computer and use it in GitHub Desktop.
Croppie Angular Directive for a simple image cropping. Directive => Component: https://github.com/lpsBetty/angular-croppie
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Use Croppie for a simple image cropping. | |
* @see https://github.com/Foliotek/Croppie | |
* @example | |
* <lh-croppie src="cropped.source" ng-model="cropped.image"></lh-croppie> | |
*/ | |
angular.module('lingohubApp').directive('lhCroppie', function () { | |
return { | |
restrict: 'E', | |
scope: { | |
src: '=', | |
ngModel: '=' | |
}, | |
link: function (scope, element, attrs) { | |
if(!scope.src) { return; } | |
var c = new Croppie(element[0], { | |
viewport: { | |
width: 200, | |
height: 200 | |
}, | |
update: function () { | |
c.result('canvas').then(function(img) { | |
scope.$apply(function () { | |
scope.ngModel = img; | |
}); | |
}); | |
} | |
}); | |
// bind an image to croppie | |
c.bind({ | |
url: scope.src | |
}); | |
} | |
}; | |
}); |
yes,
Any examples would be appreciated !!!
I made a Angular 1.5+ component: https://github.com/lpsBetty/angular-croppie
there is an example!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Any example using this directive?