图片裁剪后如何将base 64转为图片文件，需要上传服务器

Question

在使用图像裁剪器进行图像裁剪时，图像被裁剪为 base 64，我尝试将其转换为图像，但没有得到预期的结果。我收到以下错误：

ERROR DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

这是我的代码：

component.ts

  onImageChange(event){
    this.imageChangedEvent=event;
    console.log(this.imageChangedEvent);
  }

  imageCropped(event: ImageCroppedEvent,keyType ){
    let imageFile;
    if(keyType=='COVER'){
      this.croppedcoverPicImage =event.base64;
    }else{
      this.croppedprofilePicImage=event.base64;
      console.log(this.croppedprofilePicImage);

      const date = new Date().valueOf();
      let text = '';
      const possibleText = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
             for (let i = 0; i < 5; i++) {
                   text += possibleText.charAt(Math.floor(Math.random() *    possibleText.length));
              }
    // Replace extension according to your media type
     const imageName = date + '.' + text + '.jpeg';
    // call method that creates a blob from dataUri
     const imageBlob = this.dataURItoBlob(this.croppedprofilePicImage);
     imageFile = new File([imageBlob], imageName, { type: 'image/jpeg' });
    }
     this.upload(keyType,imageFile);
  }
   dataURItoBlob(dataURI) {
    const byteString = window.atob(dataURI);
    const arrayBuffer = new ArrayBuffer(byteString.length);
    const int8Array = new Uint8Array(arrayBuffer);
    for (let i = 0; i < byteString.length; i++) {
      int8Array[i] = byteString.charCodeAt(i);
    }
    const blob = new Blob([int8Array], { type: 'image/jpeg' });    
    return blob;
 }

 upload(keyType,imageFile) {

  var data = new FormData();
  if (keyType == 'COVER') {
     data.append('file', this.croppedcoverPicImage);
   } else {
      data.append('file',imageFile);
   }

    this.dashboardApi.uploadPicture(data, keyType).subscribe(response => {
      if (response.status == 200 || response.status == 201) {
        this.helper.showSnackbar('Picture Uploaded', 'snackBar-success');
        if (keyType == 'COVER') {
          this.studentDetails['coverUrl'] = response.body.url;
          this.coverPicUrl = response.body.url;
          this.noCoverPic = false;
        } else {
          this.studentDetails['profileUrl'] = response.body.url;
          this.profilePicUrl = response.body.url;
          this.noProfilePic = false;
        }
        this.isLoading = false;
      }

component.html

<input id="file-upload-profile" placeholder="Profile Pic"
            style="margin-left:5px;display: none;" (change)=" onImageChange($event)"
            accept="image/*" type="file" class="form-control">

<image-cropper
      [imageChangedEvent]="imageChangedEvent"
      [maintainAspectRatio]="true"
      [aspectRatio]="4 / 3"
      [resizeToWidth]="128"
      (imageCropped)="imageCropped($event,keyType)">
</image-cropper>

Answer 1

有助于转化

profileChangedEvent: any = '';
  croppedImage: any = '';

  fileChangeEvent(event: any): void {
      this.profileChangedEvent = event;
  }
  imageCropped(event: ImageCroppedEvent) {
     const Blob =  this.dataURItoBlob(event.base64);
     //this.dataURItoBlob(this.croppedImage);

      var fd=new FormData();
      fd.append('image','profile.png');
      console.log(fd);
  }
  dataURItoBlob(dataURI) {
    console.log(dataURI);

    const binary = atob(dataURI.split(',')[1]);
    const array = [];
    for (let i = 0; i < binary.length; i++) {
      array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {
      type: 'image/png'
    });
  }
}

图片裁剪后如何将base 64转为图片文件，需要上传服务器

how to convert base 64 into image file after image cropping, and need to upload the server

base64

typescript

angular

angular6

component.html