angular-canvas-ext

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

Homepage

Angular Core Dependency: ~1.2.14

Module License: MIT

Added by: Sam Deering

GitHub

Repository

petalvlad/angular-canvas-ext

Stats

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

##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

Module stats last updated: 2017-06-12 15:00:04

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!