Issue with Web Fonts in /1/screenshot Endpoint Rendering Empty Image

Open vibolyoeung opened this issue 1 year ago • 0 comments

Great project! It works perfectly in many cases. However, I encountered an issue when using web fonts in the HTML and calling the /1/screenshot API endpoint to render an image. The response image is generated without any content.

Steps to Reproduce:

Send a request to the /1/screenshot endpoint with the following HTML content:

{
   "html":"<!DOCTYPE html><html><head><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Sofia\"><style>body { font-family: \"Sofia\", sans-serif;}</style></head><body><h1>Sofia Font</h1><p>Lorem ipsum dolor sit amet.</p><p>123456790</p></body></html>",
}

The resulting image is empty, with no content displayed.

Cause:

It seems that the issue is due to the web fonts not being fully loaded before the image is generated, resulting in an empty output.

Solution:

To fix it, I added https://github.com/bedrockio/export-html/pull/10/files by adding below code to make sure fonts are fully loaded before generating an image

// Wait for all fonts to be loaded
   await page.evaluate(async () => {
     await document.fonts.ready;
   });

Noted: Rendering PDFs with web fonts works correctly, issue only image

Aug 28 '24 02:08 vibolyoeung