Mark an image by clicking (Android, IOS) with a dot / circle

#1

Hello, I need some help with a project. The point is that I have to open an image in base 64 format, zoom in and place a marker at any point. I save this point in the further course in my DB. How is it possible to Zoom in a Picture with Ionic apart from the Image Viewer plugin and output the XY coordinates of a picture? I already had some experience with Canvas, but unfortunately I did not succeed here.

I used this method for displaying the XY coordinates. https://www.joshmorony.com/creating-a-drawing-application-in-ionic/

Here’s an example of how it should work: It’s without zoom: http://jsfiddle.net/rdpuxajo/2/

I would be really grateful for help!

Best regards

Canvas Draw: HTML

<canvas #myCanvas (touchstart)=“handleStart($event)”>

Canvas-Draw TS.

import { Component, ViewChild, Renderer } from ‘@angular/core’;
import { Platform, AlertController } from ‘ionic-angular’

@Component({
selector: ‘canvas-draw’,
templateUrl: ‘canvas-draw.html’
})
export class CanvasDrawComponent {
@ViewChild(‘myCanvas’) canvas:any;

canvasElement: any;
lastX: number;
lastY: number;

constructor(private platform : Platform, private renderer: Renderer, private alertCtrl: AlertController) {
console.log(‘Hello CanvasDrawComponent Component’);

}

getSize()
{
this.canvasElement = this.canvas.nativeElement;

 this.renderer.setElementAttribute(this.canvasElement,'width', this.platform.width+ '');
 this.renderer.setElementAttribute(this.canvasElement,'height', this.platform.height+ '');

}

handleStart(ev)
{
this.getSize()
console.log(ev)
this.lastY = ev.touches[0].pageY;
this.lastX = ev.touches[0].pageX;
console.log("X : "+this.lastX+"Y : "+this.lastY)
}

}

HTML where the Picture should be shown:

    <ion-content class="card-background-page">
        
  <ion-item padding *ngFor="let picture of this.mangel.pictures; let i=index">

        <ion-card>
            <canvas-draw></canvas-draw>
            <img src="data:image/jpg;base64,{{picture.file}}" *ngIf="picture.file"   />

          </ion-card> 

    </ion-item>
  </ion-content>