如何在AngularNGX dropzone中从图像中提取base64

htrmnn0y 于 2021-09-29 发布在 Java

关注(0)|答案(1)|浏览(284)

嘿，伙计们，我正在使用ngx dropzone，我注意到当我将图像拖到查看器中时，它位于base64中，但当我尝试读取 console.log(event.addedFiles); 我没有使用base64值传递给我的信息。这是我得到的一个例子

[File]
  0: File
     lastModified: 1625149167659
     lastModifiedDate: Thu Jul 01 2021 10:19:27 GMT-0400 (Eastern Daylight Time) {}
     name: "210534431_764639924207804_238792847075232344_n.jpeg"
     size: 101133
     type: "image/jpeg"
     webkitRelativePath: ""
     __proto__: File
     length: 1
     __proto__: Array(0)

我还使用了另一段代码，将url转换为base64字符串。但这对我来说毫无用处，因为url也可以被任何人从任何地方共享和打开。但是，我的计算机中的本地映像仅对我可用，除非我将其转换为base64，这是一个可以保存在数据库中的字符串。
这是剧本

imageToShow: any;

onURLinserted() {
  this.getImage(this.thumb.name).subscribe(data => {
    this.createImageFromBlob(data);     
  }, error => {
    console.log("Error occured",error);
  });

  console.log("Data: ", this.thumb.name);
}

getImage(imageUrl: string): Observable<Blob> {
  return this.http
    .get<Blob>(imageUrl, { observe: 'body', responseType: 'blob' as 'json' })
}

createImageFromBlob(image: Blob) {
  let reader = new FileReader(); //you need file reader for read blob data to base64 image data.
  reader.addEventListener("load", () => {
      this.imageToShow = reader.result; // here is the result you got from reader which I use to view the image
      this.selectedRowData.photo = reader.result; // this is my ngModel read by my HTML input fields
  }, false);

  if (image) {
    reader.readAsDataURL(image);
  }
}

//In my HTML code
<img [src]="imageToShow" alt="">

我真正想做的就是从拖入其中的图像中提取base64信息到imagetoshow中，或者使用此代码（如果有用）或者类似的东西，或者可能cdk drag-an drop已经有一个我不知道的道具
我怎么知道base64是否可用？当我在其中拖动一个图像，并在dev工具中检查它时，我可以看到src=“data:image/jpeg；base64，随机的东西……”
希望我能在这里放一些测试代码，但我需要dropzone库

angularjs Base64 dropzone.js

来源：https://stackoverflow.com/questions/68321634/how-to-extract-the-base64-from-an-image-in-angular-ngx-dropzone

1条答案

按热度按时间

mdfafbf11#

看起来ngx dropzone没有提供bas64string的道具。您可以使用readasdataurl获取base64string。readasdataurl用于读取blob或文件的内容。当loadend被触发时。此时，result属性将数据包含为data:url，该url将文件的数据表示为base64编码的字符串。
下面的代码适用于我。
html文件

<div class="custom-dropzone" ngx-dropzone [accept]="'image/jpeg,image/jpg,image/png,image/gif'"
                  (change)="onSelect($event)">
                  <ngx-dropzone-label>
                    <div>
                      <h2>Upload photo</h2>
                    </div>
                  </ngx-dropzone-label>
                  <ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f"
                    [removable]="true" (removed)="onRemove(f)">
                  </ngx-dropzone-image-preview>
   </div>

.ts文件

onSelect(event) {
        this.files.push(...event.addedFiles);
        if (this.files && this.files[0]) {
          for (let i = 0; i < this.files.length; i++) {
           this.fileToBase64(this.files[i])
            .then(result=>{
              const base64String = result.replace('data:', '')
              .replace(/^.+,/, ''); // To remove data url part
              this.postMultimedias.push({ name:this.files[i].name,content: 
               base64String});//postMultimedias is a array which holds image name and bas64String
            });         
          }
        }
      }

 fileToBase64 = (file:File):Promise<string> => {
    return new Promise<string> ((resolve,reject)=> {
         const reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = () => resolve(reader.result.toString());
         reader.onerror = error => reject(error);
     })
    }

onRemove(event) {
    let position = this.files.indexOf(event);
    this.postMultimedias.splice(position, 1);
    this.files.splice(position, 1);
  }

赞(0）回复(0）举报 2021-09-29

我来回答

如何在AngularNGX dropzone中从图像中提取base64

1条答案

相关问题

热门标签

最新问答