显示本地图像文件：///tmp/someimage.jpg

Question

场景

我正在为基于 BlazorServerSide 和 ElectronNET.API 版本 9.31.1 构建的 OSS 项目做出贡献。

在 Electron 窗口中，我们希望通过 <img> 标签显示来自本地存储 UI 的图像。

我尝试过的：

我试过了：

<img src="file:///home/dani/pictures/someimage.jpg" />

但不起作用。图像不出现。然后我尝试使用WebSecurity = false 创建电子窗口，但也没有帮助（图像在 UI 上显示为损坏）：

var browserWindowOptions = new BrowserWindowOptions
{
    WebPreferences = new WebPreferences
    {
        WebSecurity = false,
    },
};

Task.Run(async () => await Electron.WindowManager.CreateWindowAsync(
    browserWindowOptions,
    $"http://localhost:{BridgeSettings.WebPort}/Language/SetCultureByConfig"
));

最后，作为解决方法，我将图像作为数据库64 发送到img src 的属性中，但这看起来是一种肮脏的方法。

我的问题：

我的问题是，如何从本地存储中显示电子窗口图片文件。

一些不相关的信息：

open source line 我需要帮助。

Answer 1

有几种方法可以解决这个问题，因此我将尝试涵盖最相关的用例。其中一些取决于您的项目环境。

默认情况下，对本地文件的访问表现为跨源请求。您可以尝试在图像标签上使用crossorigin=anonymous 属性，但由于您的本地文件系统不会响应跨源标头，因此不起作用。

禁用webSecurity 选项是一种解决方法，但出于安全原因不建议这样做，并且如果您的html 也未从本地文件系统加载，通常也无法正常工作。

禁用 webSecurity 将禁用同源策略并将 allowRunningInsecureContent 属性设置为 true。换句话说，它允许执行来自不同域的不安全代码。

https://www.electronjs.org/docs/tutorial/security#5-do-not-disable-websecurity

以下是解决此问题的一些方法：

1 - 使用 HTML5 File API 加载本地文件资源并提供 ArrayBuffer 到 ImageData 以将图像写入 <canvas>。

function loadAsUrl(theFile) {
    var reader = new FileReader();

    var putCanvas = function(canvas_id) {
      return function(loadedEvent) {
        var buffer = new Uint8ClampedArray(loadedEvent.target.result);
        document.getElementById(canvas_id)
                .getContext('2d')
                .putImageData(new ImageData(buffer, width, height), 0, 0);
      }
    }

    reader.onload = putCanvas("canvas_id");

    reader.readAsArrayBuffer(theFile);
}

1.b - 也可以将文件加载为数据 URL。可以使用 JavaScript 将数据 URL 设置为 img 元素的源 (src)。这是一个名为 loadAsUrl() 的 JavaScript 函数，它展示了如何使用 HTML5 文件 API 将文件作为数据 URL 加载：

function loadAsUrl(theFile) {
    var reader = new FileReader();

    reader.onload = function(loadedEvent) {
        var image = document.getElementById("theImage");
        image.setAttribute("src", loadedEvent.target.result);
    }

    reader.readAsDataURL(theFile);
}

2 - 使用 Node API fs 读取文件，并将其转换为 base64 编码的数据 url 以嵌入到图像标签中。

Hack - 或者，您可以尝试在 BrowserView 或 <webview> 中加载图像。前者覆盖您的BrowserWindow 的内容，而后者嵌入到内容中。

// In the main process.
const { BrowserView, BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 600 })

const view = new BrowserView()
win.setBrowserView(view)
view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
view.webContents.loadURL('file:///home/dani/pictures/someimage.jpg')