如何将base 64转成图像文件后的图像裁剪,并需要上传服务器。

当使用图像裁剪器进行图像裁剪时,图像被裁剪成基数64,我试图将其转换为图像,但我没有得到预期的结果。我得到了以下错误。

ERROR DOMException.Failed to execute ‘atob’ on the base 64 and I try to convert into image but I don’t get the expected result: Failed to execute ‘atob’ on ‘Window’: 要解码的字符串没有正确编码。

这是我的代码。

组件.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;
      }

组件.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> 

解决方案:

这有助于转换

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

将分支A合并到B中和将B合并到A中一样吗?

2022-9-8 20:10:37

未分类

Squish QT在Ubuntu 20.04上安装失败

2022-9-8 20:10:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索