6

设想

我正在为基于 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"
));

最后，作为解决方法，我将图像作为 data base64 inimg src的属性发送，但它看起来像一个肮脏的方法。

我的问题：

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

一些不相​​关的信息：

我需要帮助的开源线路。

4

1 回答 1

0

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

默认情况下，对本地文件的访问表现为跨源请求。您可以尝试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 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')
于 2020-07-21T23:02:43.347 回答