小编Sai*_*uri的帖子

我正在使用 ng2-image 裁剪器，因为它没有采用“src”属性，而是采用“image”属性。

因此，如果我提供 dataUrl，图像不会显示在裁剪器中。

我正在使用相机拍摄图像，并从中获取 base64 图像。

想要将 base64 dataUrl 转换为图像，以便它可以在

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

从相机获取图像并在画布中绘制并将其推送到 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);
}