angular - 如何在 typescript 中将base64 dataUrl转换为图像

Question

我正在使用 ng2-image cropper，因为它没有采用“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>

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

Answer 1

您可以执行以下操作...

首先，将数据 URL 转换为 blob:

convertDataUrlToBlob(dataUrl): Blob {
    const arr = dataUrl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);

    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }

    return new Blob([u8arr], {type: mime});
}

接下来，使用 blob 创建对象 URL:

const objectURL = URL.createObjectURL(convertDataUrlToBlob(dataUrl));

最后，使用对象 URL 作为图像的 src:

document.getElementById('myImage').src = objectURL;

如果需要，您还可以将 Blob 转换为 File:

const file = new File([convertDataUrlToBlob(dataUrl)], filename, {type: `image/${extension}`});