When using ng2-image cropper, it does not accept the "src" attribute and instead requires the "image" attribute.
As a result, if a dataUrl is provided, the image will not display in the cropper.
I am utilizing the camera to capture an image and obtaining a base64 image from it.
I need to convert the base64 dataUrl to an image so that it can be used in the following code:
//component.html
<div *ngSwitchCase="'camera'">
<mat-dialog-actions>
<button mat-raised-button class="capture" (click)="capture()">Take Photo</button>
<button mat-raised-button mat-dialog-close class="cancel" (click)="closeCamera()" (click)="openDialog()">Cancel</button>
</mat-dialog-actions>
<canvas #canvas id="canvas" width="400" height="400"></canvas>
</div>
<img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper>
<span class="result rounded" *ngIf="data">
<img src="{{data}}" [width]="cropperSettings.croppedWidth"
[height]="cropperSettings.croppedHeight">
</span>
The process involves capturing an image from the camera, drawing it on a canvas, and then converting it to a dataUrl.
// component.ts
public async capture() {
var context = this.canvas.nativeElement.getContext("2d").drawImage(this.video.nativeElement, 0, 0, 400, 400);
await this.captures.push(this.canvas.nativeElement.toDataURL("image/png"));
this.state = 'photo';
this.data = this.canvas.nativeElement.toDataURL("image/png");
localStorage.setItem('webcam', this.data);
}