How draw reactangle and text on captured image in ionic 5 with touch move event?

@jakesully wrote:

I need to draw rectangle and text on captured image with touch start, touch move, touch end event.
I tried like this:
<canvas #canvas (touchstart)="startDrawing($event)" (touchmove)="moved($event)" (touchend)="endDrawing($event)"></canvas>

import { Component, OnInit,ViewChild, Renderer, AfterViewInit } from '@angular/core';

import { IonContent, Platform, NavParams, ModalController } from '@ionic/angular';

// import * as ImageEditor from 'tui-image-editor';

declare var $:any;

@Component({

  selector: 'app-edit-img',

  templateUrl: './edit-img.page.html',

  styleUrls: ['./edit-img.page.scss'],

})

export class EditImgPage implements AfterViewInit {

  img:any;

  @ViewChild('canvas',{static:false}) canvas:any;

  @ViewChild('finalCanvas',{static:false}) finalCanvas:any;

  canvasElement:any;

  finalCanvasElement:any;

  saveX:number;

  saveY:number;

  drawing:boolean = false;

  bgImg:any;

  resized:any;

  constructor(

    private navParams: NavParams,

    private modalController: ModalController,

    private plt: Platform,

    private modal: ModalController) { 

    this.img = this.navParams.get('img');

}

  

  ngAfterViewInit(){

    this.canvasElement = this.canvas.nativeElement;

    this.finalCanvasElement = this.finalCanvas.nativeElement;

    this.bgImg = new Image();

    this.bgImg.src = this.img;

    let ctx = this.canvasElement.getContext('2d');

    this.bgImg.onload = () =>{

          ctx.imageSmoothingEnabled = false;

          ctx.drawImage(this.bgImg,0,0,this.canvasElement.width,this.canvasElement.height);

    }

  

    /*   this.canvasElement.height = 350;

    this.canvasElement.width = this.plt.width()+''; */

  

    this.canvasElement.height = this.bgImg.height / 12;

    this.canvasElement.width = this.bgImg.width / 12;

/*     this.canvasElement.height = 500;

    this.canvasElement.width = 300;

 */    

  }

startDrawing(ev){

  // console.log(ev)

  this.drawing = true;

  const canvasPosition = this.canvasElement.getBoundingClientRect();

  console.log(canvasPosition)

  this.saveX = ev.touches[0].pageX - canvasPosition.x;

  this.saveY = ev.touches[0].pageY - canvasPosition.y;

}

moved(ev){

  // console.log(ev)

  if(!this.drawing) return;

  let ctx = this.canvasElement.getContext('2d');

  ctx.clearRect(0,0,this.canvasElement.width,this.canvasElement.height);

  ctx.drawImage(this.bgImg,0,0,this.canvasElement.width,this.canvasElement.height);

  const canvasPosition = this.canvasElement.getBoundingClientRect();

  let currentX = parseInt(ev.touches[0].pageX) - parseInt(canvasPosition.x);

  let currentY = parseInt(ev.touches[0].pageY) - parseInt(canvasPosition.y);

  ctx.beginPath();

  var width = currentX - this.saveX;

  var height = currentY - this.saveY;

  

  ctx.rect(this.saveX,this.saveY,width,height);

  ctx.strokeStyle = 'red';

  ctx.lineWidth = 3;

  ctx.stroke();

}

endDrawing(ev){

  this.drawing = false;

}

save(){

  this.finalCanvasElement.height = this.bgImg.height;

  this.finalCanvasElement.width = this.bgImg.width;

  let editedBase64 = this.canvasElement.toDataURL();

   

   let img = new Image();

   img.src = editedBase64;

  let ctx = this.finalCanvasElement.getContext('2d');

  img.onload = () =>{

          ctx.imageSmoothingEnabled = false;

          ctx.drawImage(img,0,0,this.finalCanvasElement.width,this.finalCanvasElement.height);

    }

    // this.resized = this.canvasElement.toDataURL();

    let final;

    setTimeout(()=>{

      final = this.finalCanvasElement.toDataURL('image/jpeg', 1.0);

      this.modalController.dismiss({editedImg:final});

    },2000)

/*     console.log(editedBase64)

    console.log(final) */

  
 

}

close(){

  this.modal.dismiss({editedImg:null});

}

}

Problems are:

1. capured image height and width is very large.when load that image on canvas not fully visible in screen.
   2.cant draw text on canvs

Posts: 1

Participants: 1

Read full topic