Skip to content

Latest commit

 

History

History
101 lines (79 loc) · 3.04 KB

README.md

File metadata and controls

101 lines (79 loc) · 3.04 KB
Raw

Description

This is a picture and sound viewer directive for AngularJS

Demo

A sample demo is available here.

Prerequisites

  • FontAweSome ( for nice icons library)
  • BootStrap ( for button look&feel )

Features

  • Support many format of pictures and sound (PNG, JPG, PDF, TIFF, WAV, OGG, MPEG)
  • Module delivery or whole package
  • Image rotation and Zoom parametric ( Rotation angle by default is set to 90°)
  • External control
  • Metadata information extraction
  • 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 :

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

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 = resp.data;
});
<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
		}
	};