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>