node-html-to-image
node-html-to-image copied to clipboard
frinyvonnick
Blurry image
When I just try a simple example like this:
nodeHtmlToImage({
html: `<html><body>Hello world!</body></html>`,
type: "png",
output: "./image.png",
});
I get a blurry image as output, any idea how this is possible?
Hi @AlessandroAries 👋
Thank you for opening this issue 🙏 You can try to change the quality in the options to improve it. Tell me if it is better after this 😄
Hi @AlessandroAries 👋
Thank you for opening this issue 🙏 You can try to change the quality in the options to improve it. Tell me if it is better after this 😄
Hi, I already tried that with jpeg, but didn't work and for png it also doesn't work (also because thats not used occording to the documentation)
You could try to set the deviceScaleFactor. You can pass options to puppeteer using puppeteerArgs property. Let me know if it works.
Hi, I have the same issue. Can you please show me how to pass that option? will this work? puppeteerArgs: {'defaultViewport.deviceScaleFactor' : '1'},
This is how I see the created image
Hi, i tried using defaultViewport.deviceScaleFactor, but it seems doesn't works,
then i tried with
puppeteerArgs: {
'defaultViewport': {
'deviceScaleFactor': 2
}
}
it give me an error
UnhandledPromiseRejectionWarning: Error: Unable to get browser page,
it will works if i using beforeScreenshot parameter, but then it needs specific width and height value
any suggestion ?
hi @igor9silva, my solution is using beforeScreenshot argument, to handle dynamic height of my document, i'm using
const height = await page.evaluate(
() => document.documentElement.offsetHeight
);
inside my beforeScreenshot, and here's full example
beforeScreenshot: async (page: any) => {
const height = await page.evaluate(
() => document.documentElement.offsetHeight
);
await page.setViewport({
width: 375,
height: height,
deviceScaleFactor: 1.6
});
},
hi @igor9silva, my solution is using
beforeScreenshotargument, to handle dynamic height of my document, i'm usingconst height = await page.evaluate( () => document.documentElement.offsetHeight );inside my
beforeScreenshot, and here's full examplebeforeScreenshot: async (page: any) => { const height = await page.evaluate( () => document.documentElement.offsetHeight ); await page.setViewport({ width: 375, height: height, deviceScaleFactor: 1.6 }); },
Oh, very interesting, thanks for sharing!
Thank you @myoganugraha for providing the solution 👍 I close this issue since it seems to fix it 😄