Home Angular Angular Component That Allows Panning/Zooming An Image In A Canvas Element

Angular Component That Allows Panning/Zooming An Image In A Canvas Element

Angular webcodeflow · August 1, 2022 · Comments off

Zoomable-Canvas is an Angular 2 component that allows panning and zooming an image in a Canvas element. The <canvas> element hosting the HtmlImageElement can be moved and minified with the mouse.

This component also provides two-way bindings links for programmatic navigation and zoom.

How to make use of it:

Install:

npm install --save @durwella/zoomable-canvas

1. Import the component in your NgModule:

import { ZoomableCanvasComponent } from '@durwella/zoomable-canvas';

@NgModule({
    ...
    declarations: [
        ...
        ZoomableCanvasComponent
    ],
    ...
})
export class AppModule {
}

2. Include the components in your app:

<zoomable-canvas 
    [image]="image"
    (topChange)="top = $event" (bottomChange)="bottom = $event" 
    (leftChange)="left = $event" (rightChange)="right = $event"
    [(centerX)]="centerX" [(centerY)]="centerY"
    [(zoomLevel)]="zoomLevel" [maxZoom]="maxZoom" [minZoom]="0"
    (canvasWidthChange)="canvasWidth = $event" (canvasHeightChange)="canvasHeight = $event"
></zoomable-canvas>

image panning & zooming library for angular, zoomable-canvas Plugin/Github, ‘ngx-image-zoom’ is not a known element