Использование Html Canvas с Ioni c для редактирования изображений - PullRequest
Новая
       0

Использование Html Canvas с Ioni c для редактирования изображений

0 голосов
/ 21 февраля 2020

В нашем мобильном приложении на базе ioni c мы собираемся редактировать загруженное изображение, используя тег canvas. Когда пользователь загружает фотографию, он может выделить определенную область фотографии некоторым цветом. Для этого мы используем html canvas tag.

Итак, пока это работает хорошо. Однако у нас возникают следующие проблемы.

  1. Когда пользователь редактирует загруженное изображение, выделяя определенную область, он изменяет исходные размеры изображения и принимает размер тега canvas. Итак, если пользователь загрузил большое изображение, то, взяв размеры холста, оно становится маленьким, и это маленькое изображение загружается на сервер.

Итак, как мы можем сохранить исходные размеры при редактировании изображения? Мы попытались установить высоту и ширину холста как изображения, но затем изображение становится прокручиваемым, и выделение области не работает должным образом.

При редактировании изображения, если мы пытаемся выделить на нем некоторую область, изображение прокручивается, даже если у него нет полос прокрутки. Означает стандартное поведение касания для прокрутки вверх / вниз для любого мобильного телефона. Поскольку мы не можем редактировать изображение, если оно прокручивается.

Ниже приведен мой код для того же.

Html Код 

<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>

Код Ц 

 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);
    }
  }
...