Angular image magnifier (based on HTML canvas)
npm install ng-magnizoomDEMO: Stackblitz
```
npm install ng-magnizoom
`ts
import { NgMagnizoomModule } from 'ng-magnizoom';
@NgModule({
...
imports: [
... ,
NgMagnizoomModule
],
...
})
export class AppModule {}
`
Use the ng-magnizoom component with the imageSrc input to render the image with zoom options.`html`
...
imageSrc="/path/to">
...
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 lensSizeUnitundefined` if not in zoom mode
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,
updateOnMouseEvents | boolean | true | - | Whether or not the magnifier uses the mouse events