Electron全屏截图尺寸过小问题求助（附Renderer.js代码）

嘿，我看了你的代码，问题出在你直接使用了desktopCapturer返回的缩略图（source.thumbnail）——这玩意儿本来就是用来做预览的缩小版图像，自然达不到你想要的全屏分辨率。咱们换个方式，通过捕获屏幕的媒体流来获取高清截图，具体调整如下：

核心思路 #

放弃直接使用source.thumbnail，改用navigator.mediaDevices.getUserMedia请求屏幕捕获权限，获取原始分辨率的视频流后，取一帧绘制到Canvas，再导出高清图片。

修改后的Renderer.js代码 #

const electron = require('electron');
const electronScreen = electron.screen;
const shell = electron.shell;
const remote = electron.remote;
const dialog = remote.dialog;
const fs = require('fs');
const os = require('os');
const path = require('path');

const screenshot = document.getElementById('screen-shot');
const screenshotMsg = document.getElementById('screenshot-path');
const pathButton = document.getElementById('path-button');
let screenShotPath = '';

pathButton.addEventListener('click', function (event) {
  dialog.showSaveDialog(function (fileName) {
    if (fileName == undefined) {
      return;
    }
    screenShotPath = fileName;
    screenshotMsg.textContent = screenShotPath;
  });
});

screenshot.addEventListener('click', async function (event) {
  screenshotMsg.textContent = 'Gathering screens';

  try {
    // 获取屏幕尺寸（考虑设备像素比）
    const primaryDisplay = electronScreen.getPrimaryDisplay();
    const { width, height } = primaryDisplay.workAreaSize;
    const devicePixelRatio = window.devicePixelRatio;
    const captureWidth = width * devicePixelRatio;
    const captureHeight = height * devicePixelRatio;

    // 请求屏幕捕获媒体流
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: false,
      video: {
        mandatory: {
          chromeMediaSource: 'desktop',
          chromeMediaSourceId: 'screen:0', // 捕获整个屏幕，多屏可替换为对应screen id
          minWidth: captureWidth,
          maxWidth: captureWidth,
          minHeight: captureHeight,
          maxHeight: captureHeight
        }
      }
    });

    // 创建video元素加载流
    const video = document.createElement('video');
    video.style.display = 'none';
    video.srcObject = stream;
    await video.play();

    // 创建Canvas绘制视频帧
    const canvas = document.createElement('canvas');
    canvas.width = captureWidth;
    canvas.height = captureHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, captureWidth, captureHeight);

    // 导出图片数据
    const imageBuffer = Buffer.from(canvas.toDataURL('image/png').split(',')[1], 'base64');

    // 处理保存路径
    if (screenShotPath === '') {
      screenShotPath = path.join(os.tmpdir(), 'screenshot.png');
    }

    // 写入文件
    fs.writeFile(screenShotPath, imageBuffer, function (err) {
      if (err) return console.log(err.message);
      shell.openExternal("file://" + screenShotPath);
      screenshotMsg.textContent = `Saved SS to ${screenShotPath}`;
    });

    // 清理资源
    stream.getTracks().forEach(track => track.stop());
    video.remove();
    canvas.remove();

  } catch (err) {
    console.error('截图失败:', err);
    screenshotMsg.textContent = '截图失败，请重试';
  }
});

关键调整说明 #

• 媒体流捕获：通过getUserMedia直接请求屏幕的原始分辨率流，确保获取到的画面尺寸和屏幕完全一致
• 设备像素比适配：乘以window.devicePixelRatio，解决高分屏（比如Retina屏）下截图模糊或尺寸不符的问题
• 资源清理：捕获完成后停止媒体流并移除临时创建的video和canvas元素，避免内存泄漏
• 多屏适配：如果需要捕获其他屏幕，可以把chromeMediaSourceId换成对应屏幕的id（可通过desktopCapturer.getSources获取所有屏幕的id）

为什么原来的方法不行？ #

你之前用的source.thumbnail是Electron为desktopCapturer生成的预览缩略图，即使设置了thumbnailSize，它的实际分辨率也会被Electron内部限制，无法达到屏幕的原始尺寸，所以生成的截图会偏小。

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