Skip to content

An Angular module that allows to open images in canvas, zoom, pan, crop, resize and download image

License

Notifications You must be signed in to change notification settings

guyyosan/angular-canvas-ext

 
 

Repository files navigation

Angular canvas extensions

An Angular module that allows you

  • open local or remote photos and draw photos on canvas (supports iOS browsers)
  • zoom & pan photo (supports touch gestures)
  • crop & resize photo
  • download photo

##Demo http://petalvlad.github.io/angular-canvas-ext/

##Install

bower install angular-canvas-ext

Include third party libs

<script src="bower_components/angular-canvas-ext/exif.min.js"></script>
<script src="bower_components/angular-canvas-ext/megapix-image.min.js"></script>

Include the module

<script src="bower_components/angular-canvas-ext/angular-canvas-ext.min.js"></script>

##Use module with angular application Pass ap.canvas.ext module as a dependency of your application

var app = angular.module('app', ['ap.canvas.ext']);

##Example of usage Use ap-file-src directive to open files

<input type="file" ap-file-src="src">

Use the same src field with ap-canvas directive to draw open photo

<canvas width="400" height="450" ap-canvas src="src" image="image" zoomable="true" frame="frame" scale="scale" offset="offset"></canvas>

Change scale field to zoom photo or use pinch gesture

$scope.zoomIn = function() {
  $scope.scale *= 1.2;
}

$scope.zoomOut = function() {
  $scope.scale /= 1.2;
}

In order to crop photo inject apImageHelper and use its cropImage function

angular.module('app').controller('controller', function($scope, apImageHelper) {
  $scope.crop = function() {
    var maxSize = {
      width: 1500,
      height: 1500
    };
    
    var canvasData = apImageHelper.cropImage($scope.image, $scope.frame, maxSize);
  }
}

It returns following object:

{
  dataURI: <base64 string of cropped image>,
  imageData: <ImageData instance of cropped image>
}

In order to download image use link

<a href="#" ng-click="download($event)">download</a>
$scope.download = function($event) {
  var filename = new Date().getTime() + '.png';
  return apImageHelper.downloadImageHandler($scope.src, filename, $event);    
}

##Dependencies

Angular canvas extensions module uses third party libraries to fix rendering image on canvas in iOS browsers

About

An Angular module that allows to open images in canvas, zoom, pan, crop, resize and download image

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.7%
  • HTML 2.3%