CODEWITHSUNDEEP
htmlcss
Ingila Ejaz
Ingila Ejaz

Reputation: 399

Put Image on another image using XY coordinates dynamically using Angular

I am new to Image Processing in Angular. I have an image and I want to add marker to it dynamically using clientX and clientY. The code I have done so far is:

<div id="img-container">
<img data-wheel-zoom src="../assets/dist/custom/img/ThirdFloor.png" alt="" (click)="imageClick($event)" />
<img class = "imgA1" [style.width.px]="50" [style.top.px]="coordY" [style.left.px]="coordX" src="https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Marker-Outside-Chartreuse.png" id="marker" />
</div>

imageClick(event)

imageClick(event) {
this.coordX = event.clientX;
this.coordY = event.clientY;
}

My CSS looks like:

img {
position: relative;
}

.imgA1 {
position: absolute; 
}

Problem: The marker is placed and is working fine but when I zoom in, the picture gets zoomed and the marker stays in the same position, I want it to "Stick" to the same position /pixels within the picture even when I zoom the picture in.

Please help. Would highly appreciate it. Picture of before (left) and after Zoom in (right) are attached

Comparison Before zoom in (Left) and After Zoom in (Right)

Comparison Before zoom in (Left) and After Zoom in (Right)

Upvotes: 4

Views: 2805

Answers (1)

pathak tejpal
pathak tejpal

Reputation: 837

i have created one codepen for you and updated css accordingly. now as you can see marker is showing on 6th window and even if you zoom in marker still stay there with zooming.

so both images are coming on each other. i hope i helped to solve your problem.

https://codepen.io/tejasp/pen/JqErGb

img {
position: relative;
}

.imgA1 {
position: absolute; 
top: 80px;
left: 170px;
width: 40px;
}

Upvotes: 1

Related Questions