Using Html Canvas with ionic for image editing

In our mobile app based on ionic, we are looking to edit uploaded image using canvas tag. When user upload the photo, user can highlight certain area of the photo with some color. To achieve this we are using html canvas tag.

So, far this is working good. However we are having below issues.

  1. When user edit the uploaded image by highlighting certain area, it changes the original dimensions of the image and takes dimension of canvas tag. So, if user has uploaded large image, then by taking canvas dimensions it become small and this small image is uploaded to the server.

So, how can we keep original dimensions while editing the image ? We have tried to set height & width of canvas as of image, but then the image becomes scroll-able and highlighting the area doesn’t work properly.

  1. While editing the image, if we try to highlight some area on it, the image gets scrolled even though it doesn’t have scrollbars. Means default touch behavior for scroll up/down for any mobile comes into picture. As we cannot edit the image if it gets scrolled.

Below is my code for the same.

Html Code

<mat-dialog-content [formGroup]="photoEditForm">
    <ion-row>
        <ion-col size="12">
            <ion-img [src]="data.fileData"></ion-img>
        </ion-col>
        <ion-col class="ion-no-padding" size="12" size-md="12">
            <canvas class="photo-edit-box" #photoImageCanvas (mousedown)="startDrawing($event)" (touchstart)="startDrawing($event)" 
            (mousemove)="moved($event)" (touchmove)="moved($event)" (mouseup)="endDrawing()" (touchend)="endDrawing()"></canvas>  
            <input matInput aria-label="State" formControlName="editedPhotoBase64" [hidden]="false" />
          </ion-col>
    </ion-row>
</mat-dialog-content>
<mat-dialog-actions>
    <button mat-button [mat-dialog-close]="true" color="#fff" cdkFocusInitial (click)="deletePhoto(data.fileIndex)">Delete</button>
    <button mat-button [mat-dialog-close]="true" color="#fff" cdkFocusInitial (click)="updatePhoto(data.fileIndex)">OK</button>
</mat-dialog-actions>

Ts Code

 ngAfterViewInit() {
      let img = new Image();
      img.src = this.data.fileData;
      img.addEventListener('load',function(){

      });

      this.canvasElement = this.canvas.nativeElement;
      this.canvasElement.width = img.width;
      this.canvasElement.height = img.height;
      this.setBackground(this.data.fileData);
    }

setBackground(imageSrc) {
    let background = new Image();
    background.src = 'data:image/png;base64,' + imageSrc;
    let ctx = this.canvasElement.getContext('2d');
    background.onload = () => {
      ctx.drawImage(background,0,0, this.canvasElement.width, this.canvasElement.height);
    }
  }

Source: New feed
Source Url Using Html Canvas with ionic for image editing