关于electron:electron-显示本地exe程序图标及图片缩略图

代码只在 window 下可用

间接上代码:
代码摘抄过程中可能有脱漏或谬误，欢送指出

electron: “25.2.0”，低于此版本的 protocol 写法不同，请自行处理

须要的 npm 包:

npm install gm

须要的第三方开源软件:
GraphicsMagick
extracticon.exe

GraphicsMagick 的效率不错，70MB|4961 × 7016 × 32 BPP 的 png 图片生成 300px 左右的缩略图耗时大概 2s
extracticon 能够提取 exe 图标里最大的那个为 png 图片，所以图片大小不肯定对立，最大尺寸为 256×256，最小 16×16

img_load:

const spawn = require("child_process").spawn
const os = require("os")
const path = require("path")
const fs = require("fs")

// 我装置 GraphicsMagick 后无奈间接调用，但控制台能够，理由不晓得，这里就间接指定程序门路
const gm = require("gm").subClass({appPath: "d:/GraphicsMagick/App/",})

const tempDir = os.tmpdir()

const exeRoot = process.cwd()
console.log(tempDir, exeRoot)

function isExists(filepath) {
    try {fs.accessSync(filepath, fs.constants.F_OK | fs.constants.R_OK)
        return true
    } catch (error) {return false}
}

function getExtracticonPath() {
    // 我放在了根目录下的 utils 文件夹里
    const p = path.join(exeRoot, "/utils/Image/extracticon.exe")
    console.log(p)
    if (isExists(p)) {return p}
    return ""
}

export function getIcon(filepath) {return new Promise((resolve, reject) => {if (!isExists(filepath)) {reject("file not found!")
        }
        const pngname = path.parse(filepath).name + ".png"
        const pngpath = path.join(tempDir, pngname)
        if (isExists(pngpath)) {resolve(gm(pngpath).stream("png"))
        }
        const extracticon = getExtracticonPath()
        if (extracticon == "") {reject("extracticon.exe not found!")
        }
        const child = spawn(extracticon, [filepath, pngpath])
        child.on("close", (code) => {if (code == 0) {resolve(gm(pngpath).stream("png"))
            }
            reject("error")
        })
    })
}

export function getThumbnail(url, width = 240, height = 400, option = ">") {if (!isExists(url)) {throw new Error("file not found!")
    }
    return gm(url).thumbnail(width, height, option).stream("png")
}

electron:

import {getIcon, getThumbnail} from "./img_load"

app.whenReady().then(()=>{

// 404 的返回能够依据须要自行批改
// limg 与前面的 exei 都是能够自定义的

protocol.handle("limg", (request) => {let url = request.url.slice("limg:///".length)
        // 这个是 node 的形式，但反对的格局太少，记得就只有 png 和 jpg，益处是不必第三方软件
        // const image = await nativeImage.createThumbnailFromPath(url, {
        //     width: 240,
        //     height: 100,
        // })
        try {let imageBuffer = getThumbnail(url)
            return new Response(imageBuffer, {headers: { "content-type": "image/png"},
            })
        } catch (error) {console.log(error);
            return new Response("", {
                status: 404,
                headers: {"content-type": "image/png"},
            })
        }
    })

    protocol.handle("exei", async (request) => {let url = request.url.slice("exei:///".length)
        try {let imageBuffer = await getIcon(url)
            return new Response(imageBuffer, {headers: { "content-type": "image/png"},
            })
        } catch (error) {console.log(error);
            return new Response("", {
                status: 404,
                headers: {"content-type": "image/png"},
            })
        }
    })
})

vue+pug:

const setAltImg = ({target}) => {target.src = "limg:///E:/ 默认图片.jpg"}

img(src="exei:///d:/Software/Ruler.exe", @error="setAltImg")