[![travis build](https://travis-ci.org/hallysonh/ngx-imageviewer.svg?branch=master)](https://travis-ci.org/hallysonh/ngx-imageviewer) [![Greenkeeper badge](https://badges.greenkeeper.io/hallysonh/ngx-imageviewer.svg)](https://greenkeeper.io/) [![version

Downloads in past


84552.0.44 years ago5 years agoMinified + gzip package size for @hallysonh/ngx-imageviewer in KB


Angular 6 - Canvas Image/PDF Viewer
travis build Greenkeeper badge version MIT License semantic-release This project generate a image/pdf viewer using canvas.


  • Configurable
  • Resizeble component
  • Supports JPEG, PNG, GIF and PDF
  • Support File Objects
  • Avaliable actions:
Rotate Zoom Reset to maximize size Free movable Change page (available just for PDF files)


Access a demo here
or download this project and execute: yarn && yarn start or npm install && npm run start to self server it.


Run yarn add @hallysonh/ngx-imageviewer hammerjs to install it and its dependency.
hammerjs is currently mandatory, but it will be optional in a future release.

Icon Font

You can use any icon font to render the button's icons. However, the default icon font is the Google's Material Icons. To use them you can just add the follow line to your index.html: ```html ``` Optionaly, you can also install the font library via npm or yarn.
when using another icon font, you should provide a config object with the button icon mapping

Basic Usage

After import the module ImageViewerModule: ```typescript import { ImageViewerModule } from '@hallysonh/ngx-imageviewer'; @NgModule({ imports:
}) export class AppModule { } ``` Use the follow code on your html: ```html src="imageSrc"> ``` Optionaly, you can provide the fields width and height. If you omit those values, the width and height in the config object will be used.

Add PDF Support

To add PDF rendering support, you must first include pdfjs by running yarn add pdfjs-dist@2.0.489 and add its reference in your angular.json file, like below: ```json { ... "scripts":
"input": "node_modules/pdfjs-dist/build/pdf.min.js"
}, {
"input": "node_modules/pdfjs-dist/build/pdf.worker.min.js"
, ... } ```

Custom Configuration

Optionaly, you can provide a custom configuration like below: ```typescript import { IMAGEVIEWERCONFIG, ImageViewerConfig } from '@hallysonh/ngx-imageviewer'; ... const MYIMAGEVIEWERCONFIG: ImageViewerConfig = { buttonStyle: {
bgStyle: '#B71C1C' // custom container's background style
} }; ... @Component({ ... providers:
... }) ... ``` The default configuration available is: ```typescript export const IMAGEVIEWERCONFIGDEFAULT: ImageViewerConfig = { width: 800, // component default width height: 600, // component default height bgStyle: '#ECEFF1', // component background style scaleStep: 0.1, // zoom scale step (using the zoom in/out buttons) rotateStepper: false, // touch rotate should rotate only 90 to 90 degrees loadingMessage: 'Loading...', buttonStyle: {
iconFontFamily: 'Material Icons', // font used to render the button icons
alpha: 0.5, // buttons' transparence value
hoverAlpha: 0.7, // buttons' transparence value when mouse is over
bgStyle: '#000000', //  buttons' background style
iconStyle: '#ffffff', // buttons' icon colors
borderStyle: '#000000', // buttons' border style
borderWidth: 0 // buttons' border width (0 == disabled)
}, tooltips: {
enabled: true, // enable or disable tooltips for buttons
bgStyle: '#000000', // tooltip background style
bgAlpha: 0.5, // tooltip background transparence
textStyle: '#ffffff', // tooltip's text style
textAlpha: 0.9, // tooltip's text transparence
padding: 15, // tooltip padding
radius: 20 // tooltip border radius
}, zoomOutButton: { // zoomOut button config
icon: 'zoom_out', // icon text
tooltip: 'Zoom out', // button tooltip
sortId: 0, // number used to determine the order of the buttons
show: true // used to show/hide the button
}, // shorter button configuration style nextPageButton: createButtonConfig('navigatenext', 'Next page', 0), beforePageButton: createButtonConfig('navigatebefore', 'Previous page', 1), zoomInButton: createButtonConfig('zoomin', 'Zoom in', 1), rotateLeftButton: createButtonConfig('rotateleft', 'Rotate left', 2), rotateRightButton: createButtonConfig('rotateright', 'Rotate right', 3), resetButton: createButtonConfig('autorenew', 'Reset', 4) }; ```