Ng-Magnizoom

DEMO: Stackblitz

Getting Started

Step 1: Installing via NPM

npm install ng-magnizoom

Step 2: Importing the module

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.

...
  <ng-magnizoom
    zoomMode="LENS"
    imageSrc="/path/to">
  </ng-magnizoom>
...

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