如何为TurboWarp打包的Scratch项目Electron应用添加截图保存功能

核心原理 #

你之前用的html2canvas无法捕获Scratch使用的WebGL渲染内容，desktopCapture需要额外的权限申请配置，直接用Electron原生的capturePageAPI是该场景下最适配的方案，不需要额外依赖。

步骤1：修改主进程Main.js #

在原有TurboWarp生成的主进程代码基础上新增IPC监听和截图逻辑：

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

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    // 保留TurboWarp原有窗口尺寸、标题等配置
    width: 1280,
    height: 720,
    webPreferences: {
      // 保留原有配置的基础上新增以下内容
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // 原有加载index.html的逻辑保留
  mainWindow.loadFile('index.html');
}

// 注册截图事件
ipcMain.handle('capture-window', async () => {
  const image = await mainWindow.capturePage();
  return image.toDataURL('image/png');
})

// 注册保存图片事件
ipcMain.handle('save-image', async (event, dataUrl) => {
  const base64Data = dataUrl.replace(/^data:image\/png;base64,/, '');
  const filePath = path.join(app.getPath('pictures'), `scratch-capture-${Date.now()}.png`);
  fs.writeFileSync(filePath, base64Data, 'base64');
  return filePath;
})

// 保留原有app.on的生命周期逻辑
app.whenReady().then(() => {
  createWindow()
})

步骤2：新增preload.js桥接文件 #

在Main.js同级目录新建preload.js，用于隔离上下文后暴露API给渲染层：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('captureTool', {
  getCapture: () => ipcRenderer.invoke('capture-window'),
  saveCapture: (dataUrl) => ipcRenderer.invoke('save-image', dataUrl)
})

步骤3：修改index.html添加交互逻辑 #

在原有index.html的body底部新增按钮、展示区域和交互代码：

<!-- 新增交互节点 -->
<div style="padding: 10px; text-align: center;">
  <button id="captureBtn" style="padding: 8px 20px; font-size: 16px;">点击截图保存</button>
  <div id="captureResult" style="margin-top: 15px; display: none;">
    <p>截图预览：</p>
    <img id="previewImg" style="max-width: 70%; border: 1px solid #eee;" alt="截图预览">
    <p id="saveTip" style="color: #2ecc71;"></p>
  </div>
</div>

<!-- 新增交互逻辑 -->
<script>
document.getElementById('captureBtn').addEventListener('click', async () => {
  try {
    // 获取截图
    const imgData = await window.captureTool.getCapture();
    // 展示截图
    const resultArea = document.getElementById('captureResult');
    const preview = document.getElementById('previewImg');
    const tip = document.getElementById('saveTip');
    preview.src = imgData;
    resultArea.style.display = 'block';
    // 保存到本地
    const savePath = await window.captureTool.saveCapture(imgData);
    tip.innerText = `图片已保存至：${savePath}`;

    // 如果需要弹出新窗口展示，取消下面代码的注释即可
    // const newWin = window.open('', '_blank', 'width=800,height=600');
    // newWin.document.write(`<img src="${imgData}" style="width: 100%;">`);
  } catch (e) {
    alert(`操作失败：${e.message}`);
  }
})
</script>

可选调整 #

如果需要自定义保存路径，可以在主进程引入dialog模块，调用showSaveDialog让用户手动选择保存位置即可。

内容的提问来源于stack exchange，提问作者Smartplus 50