在 Angular 中将图像 url 转换为 base64

Question

我正在努力尝试将给定的图像 url 转换为 base64 ......在我的情况下，我有一个带有图像路径的字符串

var imgUrl = `../../../../../assets/logoEmpresas/${empresa.logoUrl}`

我怎样才能直接在 base64 中转换给定的图像 url？...我试过这篇文章。

以角度 2 将图像转换为 base64

但是这篇文章是从表单中获取图像...我该如何调整它？

Answer 1

您可以使用它来获取 base64 图像

async function getBase64ImageFromUrl(imageUrl) {
  var res = await fetch(imageUrl);
  var blob = await res.blob();

  return new Promise((resolve, reject) => {
    var reader  = new FileReader();
    reader.addEventListener("load", function () {
        resolve(reader.result);
    }, false);

    reader.onerror = () => {
      return reject(this);
    };
    reader.readAsDataURL(blob);
  })
}

然后这样调用

getBase64ImageFromUrl('your url')
    .then(result => testImage.src = result)
    .catch(err => console.error(err));

Answer 2

就像 pdfMake 和 angular 中的魅力一样

您可以使用此功能创建生成 base64 图像

    toDataURL = async (url) => {
    console.log("Downloading image...");
    var res = await fetch(url);
    var blob = await res.blob();

    const result = await new Promise((resolve, reject) => {
      var reader = new FileReader();
      reader.addEventListener("load", function () {
        resolve(reader.result);
      }, false);

      reader.onerror = () => {
        return reject(this);
      };
      reader.readAsDataURL(blob);
    })

    return result
  };

然后像这样调用它

imageSrcString = await this.toDataURL(imageSrc)

Answer 3

如果我们在 Angular 中这样做，我们不妨使用HttpClient和一个Service 。

让我们继续将HttpClientModule添加到我们的相关模块中，我们需要它来使用 HttpClient。

@NgModule({
  imports: [HttpClientModule],
  ...
})
export class AppModule {}

然后让我们创建一个通用的 Image Service，然后让 Angular 将HttpClient 注入到我们的 Service 中。

@Injectable()
export class ImageService {
  constructor(private http: HttpClient) { }
}

一旦完成，我们实际上可以在我们的服务中创建我们的函数

imageUrlToBase64(urL: string) {
  return this.http.get(urL, {
      observe: 'body',
      responseType: 'arraybuffer',
    })
    .pipe(
      take(1),
      map((arrayBuffer) =>
        btoa(
          Array.from(new Uint8Array(arrayBuffer))
          .map((b) => String.fromCharCode(b))
          .join('')
        )
      ),
    )
}

当我们使用http. 获取并提供arraybuffer作为我们的response type ，Angular 将我们的请求body解释为一个ArrayBuffer 。 这意味着我们现在将图像作为ArrayBuffer 。 我们需要做的就是将我们的ArrayBuffer转换为base64字符串。 如果您想查看替代选项，这个SO Question有很好的答案。

map(
  btoa(
    Array.from(new Uint8Array(arrayBuffer))
    .map((b) => String.fromCharCode(b))
    .join('')
  )
)

现在函数已经完成，我们可以转移到用法：

@Component()
export class AppComponent {
  base64Image: string;
  constructor(private imageService: ImageService) {
      this.imageService.imageUrlToBase64('https://picsum.photos/200/300').subscribe(
          base64 => {
              this.base64Image = base64
      })
  }
}

我们现在可以访问作为 base64 的图像