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


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.

Here’s an example of how it should work: It’s without zoom:

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’

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’);


this.canvasElement = this.canvas.nativeElement;

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


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; let i=index">

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