AngularJS directive for image and sound viewing bases on HTML5 canvas

If you are looking for angular directive for image and sound viewing then in this post I am going to share simple lightweight AngularJS directive for image and sound viewing which you can configure in your angular app to display images with some additional feature which have all the image viewing application like rotate, zoom in, zoom out etc.


  • [x] Support many format of pictures and sound (PNG, JPG, PDF, TIFF, WAV, OGG, MPEG)
  • [x] Module delivery or whole package
  • [x] Image rotation and Zoom parametric ( Rotation angle by default is set to 90°)
  • [x] External control
  • [x] Metadata information extraction
  • [x] Support multipage ( TIFF and PDF)

How to build

You need npm package manager :

# npm install
# gulp dist

How to use it

The directive usage is as follow ( CanvasViewer.min.worker.js must be in same folder that CanvasViewer.min.js but not in script tag ), src can be either a string or a File or Blob object :

        <link rel="stylesheet" href="dist/CanvasViewer.all.min.css">
        <script src="dist/CanvasViewer.all.min.js" type="text/javascript" charset="utf-8"></script> 
        <canvas-viewer src="test.jpg" title="TITLE" overlays="overlays" options="options"></canvas-viewer>

title and overlays are optional.

Usage with $http or input type file :

$http.get("assets/img/billet_specimen_securite2.jpg", { responseType : 'blob'}).then(function(resp) {
   $scope.fileInput =;
<canvas-viewer src="fileInput" title="TITLE" overlays="overlays" options="options"></canvas-viewer>

overlays is an Array Of Object like :

$scope.overlays = [{x : 50, y:155, w:106, h:29, color:'#00FF00'}];

options is an Object as follow :

Name Properties Definition
zoom value Read or write the zoom factor (By default : 1.0)
zoom step Set the zoom factor increment
zoom min Minimum zoom factor allowed
zoom max Maximum zoom factor allowed
rotate value Read or write the rotation angle of picture (By default : 0)
rotate step Set the rotation angle increment
controls toolbar Boolean to show/hide toolbar controls button
controls image Boolean to show/hide pictures controls button
controls sound Boolean to show/hide sound controls button
controls fit Possible values are page , height or width
controls disableZoom Disable zoom functionnality
controls disableRotate Disable rotate functionnality
controls disableMove Disable move functionnality
controls numPage Current page to display ( only for TIFF and PDF)
controls totalPage Total number of pages ( only for TIFF and PDF)
controls filmstrip Display multipage as film
adsrc The Current AudioContext object ( Only for sound)
ctx The Current CanvasContext object ( Only for sound)
info The Metadata properties of viewed object ( Only for pictures)

Sample options object with initial value or simple empty object {}:

var options = {
        zoom : {
            value : 0.5,
            step : 0.01
        rotate : {
            value : 90

See live demo and download source code.


This awesome script developed by fcrohas, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.