在角度/电子应用程序上将图像转换为 base64 URI答案

【问题标题】：Converting an image to base64 URI on a angular/electron app在角度/电子应用程序上将图像转换为 base64 URI
【发布时间】：2020-11-13 21:12:11
【问题描述】：

所以我正在构建一个角度/电子桌面应用程序，我需要将图像转换为 base64 URI，我的图像位于 assets/logo/logo.png，我正在向同一路径发出 http 请求以获取图像如下：

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);
      });

这适用于浏览器，但是当我构建电子应用程序时它不起作用并且我收到以下错误：

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请求的情况下加载图像？？

【问题讨论】：

标签： angular electron base64

【解决方案1】：

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

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

【讨论】：

非常感谢！虽然它没有帮助我你的评论给了我一个想法，我知道现在是什么问题，但问题是对assets/logo/logo.png的HTTP请求在浏览器上运行良好，但是当我构建电子应用程序时我得到一个错误，因为它应该向./assets/logo/logo.png 提出请求。非常感谢您的光临！！

【解决方案2】：

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

【讨论】：