imagemapper
v2.0.4
Published
Imagemapper is to allow clickable areas on an image
Downloads
32
Maintainers
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.