在 angular/electron 应用程序上将图像转换为 base64 URI

Question

所以我正在构建一个 angular/electron 桌面应用程序，我需要将图像转换为 base64 URI，我的图像位于 assets/logo/logo.png 并且我正在向同路径获取图片如下：

this.http
      .get('/assets/logo/logo.png', { responseType: 'blob' })
      .subscribe((data) => {
        const reader = new FileReader();
        reader.onloadend = () => {
          var base64data = reader.result;
          this.logo = base64data;
        };
        reader.readAsDataURL(data);
      });

这在浏览器上有效，但在我构建 Electron 应用程序时不起作用，并且出现以下错误：

main.4a1ed7a….js:1 ERROR 
jB
error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}
headers: YB {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message: "Http failure response for /assets/logo/logo.png: 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: "/assets/logo/logo.png"
__proto__: TB

有没有其他方法可以在不向资产目录发出 http 请求的情况下加载图像？

Answer 1

我不太了解电子和节点，我不知道 FileReader 这个东西是如何工作的（是节点？电子？还是这个：https://developer.mozilla.org/en-US/docs/Web/API/FileReader？也许可以在问题）。但正如它的名字所暗示的，它可能读取 files，但你想向它传递一个 blob，这不是文件。另外，我怀疑 readAsDataURL 方法不需要参数，它可能只是读取 FileReader 已经初始化的文件。

一个实际的解决方案可能是使用 btoa 方法，它可以对 base64 进行编码。如果您对 blob（订阅中的 data 变量）进行编码，您也许可以使用该值创建数据 url。

Answer 2

所以我试图修复这个错误，我想出了一个简单的解决方案，我正在向 assets/logo/logo.png 发出 GET HTTP 请求，它在浏览器上运行良好，但是当我在 electron 上构建应用程序时我收到一个错误，然后我想知道如果我向 ./assets/logo/logo.png 发出请求并且成功了怎么办！！我不确定它为什么起作用，但我想是因为电子的工作方式。

在 angular/electron 应用程序上将图像转换为 base64 URI

Converting an image to base64 URI on a angular/electron app

base64

electron

angular