Angular 14 - Canvas Image/PDF Viewer
IMPORTANT!
This library has been forked from: https://github.com/hallysonh/ngx-imageviewer
I'm not going to maintain this library, only update it to Angular 14.
This is a temporal solution until the PR is merged https://github.com/hallysonh/ngx-imageviewer/pull/95
Install: npm install @devadri/ngx-imageviewer hammerjs
This project generate a image/pdf viewer using canvas.
Features
- 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)
Demo
Access a demo here or download this project and execute: yarn && yarn start
or npm install && npm run start
to self server it.
Install
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:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
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
:
import { ImageViewerModule } from '@hallysonh/ngx-imageviewer';
@NgModule({
imports: [ImageViewerModule],
})
export class AppModule {}
Use the follow code on your html:
<ngx-imageviewer [src]="imageSrc"></ngx-imageviewer>
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:
{
...
"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:
import { IMAGEVIEWER_CONFIG, ImageViewerConfig } from '@hallysonh/ngx-imageviewer';
...
const MY_IMAGEVIEWER_CONFIG: ImageViewerConfig = {
buttonStyle: {
bgStyle: '#B71C1C'
}
};
...
@Component({
...
providers: [
{
provide: IMAGEVIEWER_CONFIG,
useValue: MY_IMAGEVIEWER_CONFIG
}
]
...
})
...
The default configuration available is:
export const IMAGEVIEWER_CONFIG_DEFAULT: ImageViewerConfig = {
width: 800,
height: 600,
bgStyle: '#ECEFF1',
scaleStep: 0.1,
rotateStepper: false,
loadingMessage: 'Loading...',
buttonStyle: {
iconFontFamily: 'Material Icons',
alpha: 0.5,
hoverAlpha: 0.7,
bgStyle: '#000000',
iconStyle: '#ffffff',
borderStyle: '#000000',
borderWidth: 0,
},
tooltips: {
enabled: true,
bgStyle: '#000000',
bgAlpha: 0.5,
textStyle: '#ffffff',
textAlpha: 0.9,
padding: 15,
radius: 20,
},
zoomOutButton: {
icon: 'zoom_out',
tooltip: 'Zoom out',
sortId: 0,
show: true,
},
nextPageButton: createButtonConfig('navigate_next', 'Next page', 0),
beforePageButton: createButtonConfig('navigate_before', 'Previous page', 1),
zoomInButton: createButtonConfig('zoom_in', 'Zoom in', 1),
rotateLeftButton: createButtonConfig('rotate_left', 'Rotate left', 2),
rotateRightButton: createButtonConfig('rotate_right', 'Rotate right', 3),
resetButton: createButtonConfig('autorenew', 'Reset', 4),
};