Put Image on another image using XY coordinates dynamically using Angular

Question

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)

what do you mean by zoom in? are you doing browser zoom like ctrl + (+) or something else? — pathak tejpal
– pathak tejpal, Commented May 15, 2019 at 6:26

pathak tejpal · Accepted Answer · 2019-05-15 06:51:26Z

1

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;
}

edited May 15, 2019 at 6:51

answered May 15, 2019 at 6:45

pathak tejpal

8371 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ingila Ejaz Over a year ago

Thanks A lot for your answer. This is valid if we increase the resolution of the image. However if we zoom the image like in Google Maps using mouse wheel, the marker stays on the same position but the image under is zoomed in, thus resulting in an inaccurate marker position.

Collectives™ on Stack Overflow

Put Image on another image using XY coordinates dynamically using Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related