基于 Electron 与 Canvas 绿幕抠像实现桌面交互ai数字人伴侣
本篇将介绍如何使用 Node.js (Electron)、HTML5 Canvas 以及 AI 视频生成工具，在 Windows 桌面实现一个轻量、置顶、透明背景的交互数字人伴侣。
该项目不依赖复杂的 3D 引擎，而是通过高性价比的 2D 视频切片 + Canvas 像素级实时绿幕抠像（Chroma Key） 算法，配合自定义的 HTML 鼠标交互热区和闲置检测状态机来实现。
1. AI 资产生成工作流（提示词设计）
制作数字人伴侣的第一步是设计角色并生成视频素材。我们通过 图像 AI -> 视频 AI (happyhourse或seedance2) 的链路进行生成。
1.1 角色原画生成 (M 提示词模板)
根据上述设定，文生图生成高保真的角色底图。
图像生成提示词：
A close-up portrait of a cute anime girl, gentle smile, silver hair, soft blue eyes, facing the camera directly, solid chroma key green background, ultra detailed, anime key visual style, 8k resolution --ar 9:16 --v 6.0
注：--ar 9:16 保证了画面为竖屏，solid chroma key green background 是后续抠像的关键。
1.2 动作与反应视频生成 (视频 AI 提示词)
将上述生成的原画上传至视频生成工具（如qwen快乐马或seedance2），并以原画作为首帧（Image-to-Video），输入以下提示词来生成不同的动作片段。
| 动作状态 | 提示词 (英文) | 提示词 (中文对照) | 视频属性 |
|---|---|---|---|
| 待机 (Idle) | A close-up shot of the girl, looking at the screen, smiling gently, blinking naturally, breathing slightly, looping animation, solid green screen background, high quality, stable camera. | 少女特写，看着屏幕，温柔微笑，自然眨眼呼吸，循环动画，纯绿幕背景。 | 循环播放 (Loop) |
| 无聊 (Bored) | A close-up shot of the girl, looking bored, sighing, looking away, playing with her hair, waiting, solid green screen background, stable camera. | 少女特写，显得无聊、叹气、移开视线、玩弄头发，纯绿幕背景。 | 单次播放 (Once) |
| 摸头 (Head) | A close-up shot of the girl, closing her eyes happily, smiling widely, blushing slightly, as if being patted on the head, solid green screen background, stable camera. | 少女特写，高兴地闭眼，灿烂微笑，轻微脸红，仿佛被摸头，纯绿幕背景。 | 单次播放 (Once) |
| 触脸 (Face) | A close-up shot of the girl, blushing heavily, covering her cheeks with her hands shyly, looking at the camera with a cute expression, solid green screen background. | 少女特写，双颊绯红，羞涩地用手捂脸，可爱地看着镜头，纯绿幕背景。 | 单次播放 (Once) |
| 胸口 (Chest) | A close-up shot of the girl, being slightly startled, putting her hand over her heart, smiling sweetly with a racing heartbeat expression, solid green screen background. | 少女特写，轻微受惊，手抚胸口，甜美微笑，心跳加速表情，纯绿幕背景。 | 单次播放 (Once) |
| 握手 (Hand) | A close-up shot of the girl, waving her hand at the camera, giggling shyly, looking friendly, solid green screen background, stable camera. | 少女特写，朝镜头挥手，害羞咯咯笑，显得很友好，纯绿幕背景。 | 单次播放 (Once) |
2. 项目架构与准备
在本地创建一个空文件夹，并按照以下结构准备文件：
girlfriend-companion-node/
│
├── package.json # 依赖与打包配置文件
├── main.js # Electron 主进程控制（窗口初始化）
├── index.html # 渲染进程（HTML5 Canvas 抠像与交互）
└── assets/ # 存放 AI 导出的 mp4 视频切片
├── idle.mp4
├── bored.mp4
├── touch_head.mp4
├── touch_face.mp4
├── touch_chest.mp4
└── touch_hand.mp4
3. 完整实现代码
3.1 package.json
配置项目所需的运行环境和独立可执行程序（.exe）的打包脚本。
{
"name": "virtual-companion",
"version": "1.0.0",
"description": "Interactive Virtual Companion",
"main": "main.js",
"scripts": {
"start": "electron .",
"dist": "electron-builder --win portable"
},
"devDependencies": {
"electron": "^28.2.0",
"electron-builder": "^24.9.1"
},
"build": {
"appId": "com.companion.app",
"productName": "VirtualCompanion",
"win": {
"target": "portable"
},
"files": [
"main.js",
"index.html",
"assets/**/*"
]
}
}
3.2 main.js (主进程)
该文件负责调用 Chromium 核心创建桌面无边框、支持穿透透明度、窗口置顶的底层窗体。
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
function createWindow() {
const win = new BrowserWindow({
width: 380,
height: 600,
frame: false, // 禁用默认边框和标题栏
transparent: true, // 开启背景透明支持
alwaysOnTop: true, // 窗口始终置顶
resizable: false, // 限制用户手动调整大小
hasShadow: false, // 禁用窗口阴影以防止透明边缘产生黑边
webPreferences: {
nodeIntegration: true, // 渲染进程启用 Node API
contextIsolation: false // 允许前端直接使用 ipcRenderer
}
});
win.loadFile('index.html');
}
// 解决部分机器开启 GPU 加速时透明网页渲染为黑色的兼容性问题
// 若遇到全黑屏幕，可尝试取消下面这行的注释
// app.disableHardwareAcceleration();
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// 监听渲染进程发送的关闭事件
ipcMain.on('close-app', () => {
app.quit();
});
3.3 index.html (前端核心与抠像算法)
前端通过 Canvas 实时获取...
点击查看剩余70%
{{collectdata}}
网友评论0