gpt4 book ai didi

javascript - Electron :将图像加载到新窗口中

转载 作者:行者123 更新时间:2023-12-03 12:37:52 26 4
gpt4 key购买 nike

在 Electron 应用程序中,我试图在窗口中显示本地光盘中的图像
单击主窗口中的按钮时打开的窗口。
图像的路径仅在运行时已知。
我的第一种方法是生成一个新窗口,以加载模板html文件
当触发该按钮的点击事件,然后设置
此html模板中img元素的src属性,
但是我没有成功获得对在中定义的此img-element的句柄
“imgView.html”(以下来自渲染器过程):

newWindowBtn.addEventListener('click', function(event){
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: true
},
width: 500, height:500});
win.loadFile("imgView.html");
// how can the img-element defined in the template imgView.html
// be accessed here to set the src-attribute?
win.show();
win.on('close', function(){win=null})
})
我希望能够同时打开多个窗口,并加载不同的图像。
我的第二种方法是动态生成要加载的html:
var html = [
"<body>",
"<p>Sample image: </p>",
"<img src=\"img.png\" style=\"width:90%\">",
"</body>"
].join("")
并替换 win.loadFile event-function中的 newWindowBtn.addEventListener命令
从上面
    win.loadURL("data:text/html;charset=utf-8," + encodeURIComponent(html),
{baseURLForDataURL: __dirname + "/imgDir/"}
)
但显然找不到该图片(该页面的其余部分都可以正常加载)。
我尝试使用 baseURLForDataURL的格式,但是没有任何效果。
有任何想法吗?

最佳答案

在某些情况下,我认为data:text/html;charset=utf-8," + encodeURIComponent(html)是不够的,您需要使用base64:data:text/html;base64, + btoa(html)对html进行编码。
付款注意
如果这不是解决方案,则意味着Electron不允许您调用图像,因为您要加载的页面被视为外部页面,并且您也必须使用base64对该图像进行编码。

关于javascript - Electron :将图像加载到新窗口中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65737850/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com