fcrohas / angular-canvas-viewer Goto Github PK

View Code? Open in Web Editor NEW

31.0 7.0 36.0 3.03 MB

An angularJS directive for image and sound viewing bases on HTML5 canvas.

License: MIT License

JavaScript 60.94% CSS 0.25% PowerShell 0.07% HTML 1.00% Java 37.74%

angular-canvas-viewer's Introduction

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

Installation using bower

# bower install angular-canvas-viewer --save

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
		}
	};

angular-canvas-viewer's People

Contributors

Stargazers

Watchers

angular-canvas-viewer's Issues

bower install

When trying to do bower install for this repository I get errors saying the repository is not found. Is there a fix for this or should I just manually try to download this code?

it has a problem when two viewers in one template

when i put two or more canvas-viewers in one template. mousewheel event can zoom all of the pictures at once. So when i want use the carousel directive to include the canvas-viewer, how i will to do ?

Tiffs not loading, no error

What's needed to make tiffs work? I was loading CanvasViewer.all.min.js, JPGs and PNGs were loading fine but not tiffs. I added CanvasViewer.tiff.min.js to see if that fixed it, but it still won't load a tiff. What's worse is there's no error message. I can see in your demo you are able to load a tiff, but it's loading the image from a base64 string. I'm starting to think maybe tiffs can only be loaded from a base64 string?

I have looked at it for a couple of hours, but I have nothing to go on. There's no explanation about how tiff support works (are you using a special library?) and there's no indication of a problem other than it doesn't display. It works in IE but not Firefox or Chrome, but then again IE supports tiffs natively, so maybe that's why it loads in IE but not the others.

I would appreciate any help you can provide. @fcrohas

Having this library in bower

Hello,

I like so much your library and I would like to know if it's possible to publish it in bower package manager.

Thanks!.

bad performance

Hello,
I don't understand why it takes for me about 4 seconds to load a tif file.
I try load the same file in your demo: http://fcrohas.github.io/angular-canvas-viewer/
and there it takes 1 second. So, why the same example when it runs locally, has bad performance and loads the tif file so slow?
thanks,
Yocheved

how can I get the json-formatter.min.js

Failed to load resource: the server responded with a status of 404 (Not Found)
2http://localhost:8090/assets/lib/json-formatter/dist/json-formatter.min.js Failed to load resource: the server responded with a status of 404 (Not Found)

Having this library in Nuget

@fcrohas
This is a good library and i try to implement this in the .Net platform ,
Have you consider publish this library to Nuget (which is package manager for .NET) ,
so that it's more easier integrate for .Net developer ,

This is the url of Nuget : https://www.nuget.org/

A few step about publish to nuget.org :

Have a account of nuget.org which will hold a api key
Produce nupkg file which contains the files of library
Upload to nuget.org

This is the link which can easily produce nupkg file :
http://www.dotnetcurry.com/visualstudio/781/package-javascript-library-nuget

Thanks

set image to top left corner while zoom

how to set image to top left corner while zoom value is set? currently my image starts from center of the canvas.

Could this be used as a component in angular 2 app

Hi I am involved in a project where we have written our application in angular 2.
I am interested to use this component in the application but i have not yet succeeded in doing so.
Would this component be feasible to use in angular 2 based app ? if so is there a guideline to follow on the process ?

support for base64

I have tried to pass as src parameter of the canvas-viewer a clean base64 string and does not render the file, I tried to convert it to Uint8Array and top recognizes the format, there is some way that the module can recognize base64 coming from an angular http service.

Cannot read property 'refresh' of null -> CanvasViewer.js:174:15
data:application/pdf;base64,[object ArrayBuffer] net::ERR_INVALID_URL -> FormatReader.js 307

Any help or track be very grateful.

Cannot read property 'refresh' of null

Hi,
I'm having some problems integrating the library:

Cannot read property 'refresh' of null
    at Object.fn (CanvasViewer.all.min.js:35)

This occurs the first time that model is assigned to src attribute and it is not defined with a file...

It is placed in the non minified code at line 172:

scope.$watch('options.controls.filmStrip', function(position) {
    if (position) {
           scope.options.controls.disableMove = true;
        scope.options.controls.disableRotate = true;
    } else {
        scope.options.controls.disableMove = false;
        scope.options.controls.disableRotate = false;
    }
    reader.refresh();
});

Other thing is a weird effect, some kind of vertical scroll growing for a time...

Do you know something about this?.

Thank you very much!

pdf files giving error

Hi
thank you for the great effort
whenever I request for the pdf file, I am getting the following error

CanvasViewer.all.min.js:34 Uncaught (in promise) RangeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': Out of memory at ImageData creation
at CanvasViewer.all.min.js:34

pdf does not show unless I click multiple times on the file button.
Please help!!!