javascript - Electron 低质量 native 图像到JPG

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中，Capture图像的质量是相同的。

还有其他方法可以获得更好的质量吗？

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')
})