This project generate a image 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.
To use ngx-imageviewer in your project, install it via npm:
npm i -S @hallysonh/ngx-imageviewer
or via yarn:
yarn add @hallysonh/ngx-imageviewer
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.
To add touch support, add HammerJs in your dependencies by yarn add hammerjs
or npm i -S hammerjs
and include on your main module import:
import 'hammerjs';
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.
To support PDF files you must first include pdfjs
by yarn add pdfjs-dist
and add its reference in your .angular-cli.json
file, like below:
{
...
"scripts": [
"../node_modules/pdfjs-dist/build/pdf.min.js"
],
...
}
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' // custom container's background style
}
};
...
@Component({
...
providers: [
{
provide: IMAGEVIEWER_CONFIG,
useValue: MY_IMAGEVIEWER_CONFIG
}
]
...
})
...
The default configuration available is:
export const IMAGEVIEWER_CONFIG_DEFAULT: 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
},
// short button configuration
nextPageButton: createButtonConfig('navigate_next', 'Next page', 0),
beforePageButton: createButtonConfig('navigate_before', 'Previous page', 1),
zoomInButton: new ButtonConfig('zoom_in', 'Zoom in', 1),
rotateLeftButton: new ButtonConfig('rotate_left', 'Rotate left', 2),
rotateRightButton: new ButtonConfig('rotate_right', 'Rotate right', 3),
resetButton: new ButtonConfig('autorenew', 'Reset', 4)
};