blazor-server-side - 显示本 map 片文件 :///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 option 是一种解决方法，但出于安全原因不推荐使用，如果您的 html 也不是从本地文件系统加载，则通常不会正常工作。

Disabling webSecurity will disable the same-origin policy and set allowRunningInsecureContent property to true. In other words, it allows the execution of insecure code from different domains.

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 - 使用节点 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')