显示本地图片文件:///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"
));

最后，作为解决方法，我将图像作为img src's 属性中的database64 发送，但它看起来像是一种肮脏的方法。

我的问题：

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

一些不相​​关的信息：

在开放的源代码行，我需要帮助。

Answer 1

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

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

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

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

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

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

1 - 使用 HTML5 文件 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 APIfs读取文件，并将其转换为base64编码的数据url以嵌入图像标签中。

Hack - 或者，您可以尝试将图像加载到 aBrowserView或<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')