Why is the text blurred after being translated into pictures?

[lidongzhangg]

Why is the text blurred after being translated into pictures?

code like this:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://www.baidu.com');
  await page.screenshot({path: '/Users/ldz/Downloads/xx.jpg'});

  browser.close();
})();

[ebidel]

Are you on a retina machine? If so, you may need to set the deviceScaleFactor to match the DPR of the device.

Something like:

const page = await browser.newPage();
await page.setViewport({width: 800, height: 800, deviceScaleFactor: 2});

By default, puppeteer uses deviceScaleFactor: 1

[lidongzhangg]

Yes, it is the retina screen, the problem is solved, thanks！

[LastTribunal]

I have a problem with this feature. When you increase the deviceScaleFactor, you also increase the aspect, so the image although becomes sharper, it also becomes bigger. How do you increase quality without scaling up the image?
Note, this is not an issue in PDFs, obviously, since the fonts are vectorized

[csandman]

I have a problem with this feature. When you increase the deviceScaleFactor, you also increase the aspect, so the image although becomes sharper, it also becomes bigger. How do you increase quality without scaling up the image?
Note, this is not an issue in PDFs, obviously, since the fonts are vectorized

This comment was a while ago, but as a lot of people seem to agree with it I wanted to address it. This is just not how images work. If the pixel density of an image doesn't match the device you're viewing it on, it will look blurry. There is no way around this unless you shrink the image to look smaller on your screen to match your pixel density. What you're asking for is impossible.

It's basically the same thing as asking for a 1080p video to look like a 4k video on a 4k TV without changing the resolution of the video.

That is unless you're just talking about how it appears when you open it on your computer, in which case you could fix this by changing the DPI metadata on the image file. This changes nothing about the data in the image, just how certain devices decide to open them. This can be done with different packages for node or in the browser.

• Change DPI (browser)
• GraphicsMagick (node)
  • https://stackoverflow.com/a/46514716/11020515

[matmilbury]

@csandman is correct, dpi should be bumped. This is what worked for me:

sharp(screenshot).withMetadata({ density: 144 }).toBuffer()