Javascript 在不降低质量的情况下增加图像大小-JS_Javascript_Html_Electron

Javascript 在不降低质量的情况下增加图像大小-JS

javascript html electron

Javascript 在不降低质量的情况下增加图像大小-JS,javascript,html,electron,Javascript,Html,Electron,我正在使用electron制作一个应用程序，它可以获得应用程序图标。因此，我使用app.getFileIcon（）获取图标，并使用icon.toDataURL（）将带有事件的图像url传递给index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&quo

我正在使用electron制作一个应用程序，它可以获得应用程序图标。因此，我使用

app.getFileIcon（）

获取图标，并使用

icon.toDataURL（）

将带有事件的图像url传递给index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DualTouch</title>
</head>
<body>
  <div id="app"></div>

  <script src="assets/js/app.js"></script>
  <script>
  const { ipcRenderer } = require('electron')

  ipcRenderer.send('ImgUrl-request');

  ipcRenderer.on('ImgUrl-reply', function (event, args) {
    document.write(`<img src='${args}' />`)
  });
  </script>
</body>
</html>

它工作正常，但当我增加图像的大小时，它会变得模糊，因为app.getFileIcon（）的图标最大大小只能是32px（在MacOs或linux中为48）

这就是它的样子（在高度增加之前）

高度增加后

Main.js

const { app, BrowserWindow, ipcMain, shell } = require('electron')
const path = require('path');
const { writeFileSync } = require('fs');

let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
    }
  })

  win.loadFile('public/index.html')
}

app.whenReady().then(createWindow)

// Get File Icons ------------------------------------------------

const filePath = path.normalize("C:\\Users\\hamid\\Desktop\\DualTouch\\NordVPN.lnk");
const realPath = shell.readShortcutLink(filePath).target

app.getFileIcon(realPath).then(icon => {

  const ImgUrl = icon.toDataURL()
  ipcMain.on('ImgUrl-request', (event)=>{
    event.sender.send('ImgUrl-reply', ImgUrl)
  })
  writeFileSync('icon.png', icon.toPNG())

}).catch(err => console.log(err))

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DualTouch</title>
</head>
<body>
  <div id="app"></div>

  <script src="assets/js/app.js"></script>
  <script>
  const { ipcRenderer } = require('electron')

  ipcRenderer.send('ImgUrl-request');

  ipcRenderer.on('ImgUrl-reply', function (event, args) {
    document.write(`<img src='${args}' />`)
  });
  </script>
</body>
</html>


双重接触
常量{ipcRenderer}=require（'electron'）
发送（'ImgUrl-request'）；
ipcRenderer.on（'ImgUrl-reply'，函数（事件，参数）{
document.write（``）
});

遗憾的是，图像大小与质量成反比，即图像元素的曝光量。因此，为了获得更高的质量，我建议您使用更多像素和更高分辨率的图像。

您不能向不存在的图像添加信息，但有一些非常好的upscaler的这些日子，特别是那些基于AI的日子

例如，访问此网站->我可以将您的图像放大到如下->

快速搜索AI放大工具会发现这一点，因此这些选项中的一个可能有用。

图像大小不能增加，除非是svg。