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


Angular Core Dependency: ~1.2.14

Module License: MIT

Added by: Sam Deering





Stars: 33

Watchers: 33

Forks: 8

Module Description

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



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>
$ = function($event) {
  var filename = new Date().getTime() + '.png';
  return apImageHelper.downloadImageHandler($scope.src, filename, $event);    


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

Module stats last updated: 2017-12-30 15:00:05

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!