angular - 从 Assets 中获取图像并将其转换为 base64

Question

我正在尝试制作包含图像的 pdf，但在实际获取代码中的图像时遇到了困难。在我的项目 Assets 文件夹中有一个图像列表(svg 和 png)，我想将其转换为 base64，以便我可以将它们用于我的 pdf。

问题是我找不到一种方法来实际加载我知道它存在于该 Assets 文件夹中的图像，例如具有绝对路径(/assets/images/{imagename}.png)，并将其加载到里面编码

这是我用于转换为 base64 的代码:

convertImageToBase64(file: File) {
  const reader: FileReader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = (): string => {
    const base64String: string = (reader.result as string).match(/.+;base64,(.+)/)[1];
    return base64String;
  };
}

有没有办法从该路径获取图像，使其以某种方式成为文件，然后转换它？或者我应该使用另一种方式/对象格式来做到这一点(而不是文件)？

Answer 1

只需调用HttpClient的get使用 { responseType: 'blob' } 的方法.这将导致响应被读取为 blob目的。

然后您可以使用 FileReader读取它并将其转换为base64。

试试这个:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('/assets/image.jpg', { responseType: 'blob' })
      .subscribe(res => {
        const reader = new FileReader();
        reader.onloadend = () => {
          var base64data = reader.result;                
              console.log(base64data);
        }

        reader.readAsDataURL(res); 
        console.log(res);
      });
  }
}

Here's a Working Sample StackBlitz for your ref.