从资产中获取图像并将其转换为 base64

Question

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

问题是我找不到一种方法来实际加载我知道它存在于该资产文件夹中的图像，例如使用绝对路径（/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'sget方法{ 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);
      });
  }
}

这是供您参考的工作示例 StackBlitz。