Question

我正在使用web contents.capture（）函数从窗口获取屏幕截图，但图像质量并不令人满意继承人的代码

ipcRenderer.on('saved-file', (event, path) =>{
  if (path) {
    remote.BrowserWindow.getFocusedWindow().webContents.[capturePage][1]((image)=>{
    scrImage = image.toJPEG(100);
    console.log(scrImage.toString());
    fs.writeFile(path, scrImage, (err) => {
      if (err) {
        console.error(err);
      }
      console.log(path);
    });

  });

sample image

正如您在上面看到的那样，Res对我们的用户来说不够好; 在Electron DemoAPI中捕获图像的质量是相同的。

还有其他方法可以提高质量吗？

Answer 1

知道为什么质量不能满足您的用户真的很棒。它捕获的图像与BrowserWindow上绘制的图像完全相同。

但NativeImage API为您提供了一些提高图像质量的方法：

您可以转换为PNG
您可以调整图片大小
您可以在高DPI显示屏上使用高DPI图像

以下代码创建了一个~800 KB png作为屏幕截图：

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

app.once('ready', () => {
  let win = new BrowserWindow({
    width: 1280, // win size affects captured image ofc
    height: 720
  })
  win.webContents.on('dom-ready', () => {
    setTimeout(() => {
      win.capturePage( img => {
        var conv = img.resize({ // resize
          width: 2560,
          height: 1480,
          quality: 'best'
        }).toPNG(1.0) // to PNG
        fs.writeFile(__dirname + '/captured.png', conv, err => {
          if (err) console.log(err)
        });
      })
    }, 3000);
  })
  win.loadURL('http://github.com')
})

电子低质量NativeImage toJPG

1 个答案: