Demo crop images, put watermark and save
Mobile Demo Download GitHubhtml
<html lang="en"> <body> <image-crop image-out="imageOut" crop-options="options" ng-transclude > <edit-crop></edit-crop> <view-crop></view-crop> </image-crop> </body> </html>
Settings
//set the module var app = angular.module('app',['sotos.crop-image']); app.controller('cropFullCtrl',['$scope',function($scope){ //the image to output $scope.imageOut=''; //make the options settings $scope.options={}; // required $scope.options.image="image.jpg"; // image for crop required $scope.options.viewSizeWidth= 500; // canvas size default 480 $scope.options.viewSizeHeight= 500; $scope.cropOptions.viewShowRotateBtn= true; //if rotate tool show default true $scope.options.outputImageWidth= 0 ; //output size of image 0 take the size of source image $scope.options.outputImageHeight= 0; $scope.options.outputImageRatioFixed= true; //keep the ratio of source image $scope.options.outputImageType= "jpeg"; //output image type //if this check the image crop by the original size off image and no resize $scope.options.outputImageSelfSizeCrop= true; //show the crop tool use only for crop and crop again one image $scope.options.viewShowCropTool= true; //this is the watermark if is set the watermark tool //show after crop //watermark type = text or image $scope.options.watermarkType='image'; //set the image $scope.options.watermarkImage= null; //set text if type is text $scope.options.watermarkText= null; //settings for the text canvas textfill $scope.options.watermarkTextFillColor= 'rgba(0,0, 0, 0.8)'; //color of the letters $scope.options.watermarkTextFont= 'Arial'; //font //if window is modal $scope.options.inModal=true; // $broadcast functions // cropImage : crop the image and data fill the imageOut with the image. // reload the view with the crop image if watermark is set then watermark tool shows. $scope.cropImage= function(){ $scope.$broadcast('cropImage'); }; // cropImageSave : send the image to the window.open() to save the image $scope.saveImage= function(){ $scope.$broadcast('cropImageSave'); }; // cropImageShow : after crop output the image with the watermark to the imageOut $scope.cropImageShow= function(){ $scope.$broadcast('cropImageShow'); }; }]);
app.controller('cropCtrl',['$scope',function($scope){ $scope.options={}; $scope.options.image="sotos.jpg"; $scope.options.watermarkType="text"; $scope.options.watermarkText="sotos"; $scope.options.outputImageType= "png"; $scope.cropImage= function(){ $scope.$broadcast('cropImage'); }; $scope.showImage= function(){ $scope.$broadcast('cropImageShow'); }; }]);
app.controller('cropCtrl',['$scope',function($scope){ $scope.options={}; $scope.options.image="image.jpg"; $scope.options.watermarkType="image"; $scope.options.watermarkImage="wimage.jpg"; $scope.options.viewSizeWidth=400; $scope.showImage= function(){ $scope.$broadcast('cropImageShow'); }; $scope.cropImage= function(){ $scope.$broadcast('cropImage'); }; }]);
options: {{options|json}}