README

Imagemapper

Imagemapper is to allow clickable areas on an image

About the Imagemapper

This library was generated with Angular CLI version 12.1.0.

Imagemapper is a client site application build in angular platform that offers a solution to select the portion of an image and display in div with deferent height and width.

Setup

npm install imagemapper

Usage

app.component.html


<div style="width: 100%; float: left; position: relative">
  <nph-imagemapper
    [shaps]="shaps"
    [imageSrc]="imageSrc"
    [retRatio]="retRatio"
    (onAreaClick)="areaClick($event)"
  ></nph-imagemapper>
</div>

<div style="position: relative; width: 60%; float: left">
  <img #rectArea alt="" width="200px" height="100px" draggable="false" />
</div>

app.component.ts

 areaClick(event: any) {

    let el = this.rectArea.nativeElement;

    this.rectArea.nativeElement.style.height = (this.rectArea.nativeElement.width / ((event.coords.w / this.retRatio.width) / (event.coords.h / this.retRatio.height))) + "px";
    let rw = this.rectArea.nativeElement.width / (event.coords.w / this.retRatio.width);
    let rh = this.rectArea.nativeElement.height / (event.coords.h / this.retRatio.height);

    el.style.position = 'absolute';
    el.style.backgroundImage = `url(${this.imageSrc})`;
    el.style.backgroundPosition = "-" + ((event.coords.x / this.retRatio.width) * rw) + "px -" + ((event.coords.y / this.retRatio.height) * rh) + "px";

    el.style.backgroundSize = (event.size.naturalWidth * rw) + "px " + (event.size.naturalHeight * rh) + "px";
  }

Note: Don't forget to add ImagemapperModule in the import section of app.module.ts file.

Further help

stackbliz example.

Usage no npm install needed!