import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core'; @Component({ selector: 'app-img-magnifier', templateUrl: './img-magnifier.component.html', styleUrls: ['./img-magnifier.component.scss'] }) export class ImgMagnifierComponent implements OnInit, AfterViewInit { @Input('src') src: string; @Input('zoom') zoom: number; @Input('magnifierSize') magnifierSize: {width: number, height: number}; @ViewChild('mainImg') mainImg: ElementRef; backgroundSize; magnifierPos = {x: 0, y: 0}; showMagnifier = false; constructor( private window: Window ) { } ngOnInit(): void { } ngAfterViewInit() { setTimeout(() => { this.calcBackgroundSize(); }, 1); } calcPos(event) { const img = this.mainImg.nativeElement.getBoundingClientRect(); this.magnifierPos.x = Math.min(img.width - this.magnifierSize.width, Math.max(0, event.pageX - img.left - this.window.pageXOffset - this.magnifierSize.width / 2)); this.magnifierPos.y = Math.min(img.height - this.magnifierSize.height + 7, Math.max(0, event.pageY - img.top - this.window.pageYOffset - this.magnifierSize.height / 2)); } calcBackgroundSize() { this.backgroundSize = this.mainImg ? (this.mainImg.nativeElement.width * this.zoom - this.magnifierSize.width) + 'px ' + (this.mainImg.nativeElement.height * this.zoom - this.magnifierSize.height) + 'px ' : '0 0'; } }