Question

我正在使用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);
}

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

如何在打字稿中将base64 dataUrl转换为图像

1 个答案: