Ng-Magnizoom

DEMO: Stackblitz

Getting Started

$3

``
npm install ng-magnizoom
`

$3

`ts
import { NgMagnizoomModule } from 'ng-magnizoom';

@NgModule({
...
imports: [
... ,
NgMagnizoomModule
],
...
})
export class AppModule {}
`

Usage

Use the ng-magnizoom component with the imageSrc input to render the image with zoom options.
`html
...
zoomMode="LENS"
imageSrc="/path/to">

...
`

Options

Name | Type | Default | Two-way binding | Description
--- | --- | --- | --- | ---
imageSrc | string | (required) | - | Image source (url)
zoomMode | 'LENS', 'COVER' | 'COVER' | - | Mode
minZoomFactor | number | 1.2 | - | Minimum zooming factor
maxZoomFactor | number | 3 | - | Maximum zooming factor
imageStyle | { [x: string]: any; } | - | - | ngSytle for image canvas element
imageClass | any | - | | ngClass for image canvas element
zoomFactor | number | 2 | x | current zoom level (between minZoomFactor and maxZoomFactor)
lensSizeUnit | 'NORMALIZED', 'PIXEL' | 'NORMALIZED' | - | 'NORMALIZED' - between 0 and 1, 'PIXEL' - pixel value
lensSize | { width: number, height: number } | { width: 0.5, height: 0.5 } | - | The size of the lens in lensSizeUnit
zoomCenterUnit | 'NORMALIZED', 'PIXEL' | 'NORMALIZED' | - | 'NORMALIZED' - between 0 and 1, 'PIXEL' - pixel value
zoomCenter | { x: number, y: number } or undefined | undefined | x | The center of the zoom, undefined` if not in zoom mode
updateOnMouseEvents | boolean | true | - | Whether or not the magnifier uses the mouse events