Taking full page snapshot using asp.net core

Question

public async Task CaptureFullPageScreenshot(string url, string outputPath) { try { await new BrowserFetcher().DownloadAsync(BrowserTag.Latest);

      using (var browser = await Puppeteer.LaunchAsync(new LaunchOptions { Headless = true }))
      using (var page = await browser.NewPageAsync())
      {
          await page.GoToAsync(url, WaitUntilNavigation.Networkidle2);
          await page.SetViewportAsync(new ViewPortOptions { Width = 1349});

          int totalHeight = Convert.ToInt32(await page.EvaluateExpressionAsync("document.body.scrollHeight"));

          await page.SetViewportAsync(new ViewPortOptions { Width = 1349, Height = totalHeight });

          await page.ScreenshotAsync(outputPath);
      }
  }
  catch (Exception ex)
  {
      _logger.LogError($"Error while taking screenshot of '{url}' getting exception {ex.Message}");
  }
  finally {
      _logger.LogError($"screenshot captured successfully and stored at '{outputPath}'");
  }

}

Above is working code, just want optimize image without loosing quality & Size.

Answer 1

I suggest using the WebP format, which reduces the size of the file without sacrificing image quality.

Test Result

Check the Images online: https://squoosh.app/editor

WebP format

Original format

    public async Task CaptureFullPageScreenshot(string url, string outputPath)
    {
        try
        {
            await new BrowserFetcher().DownloadAsync(BrowserTag.Latest);
            using (var browser = await Puppeteer.LaunchAsync(new LaunchOptions { Headless = true, ExecutablePath = @"C:\Program Files\Google\Chrome\Application\chrome.exe" }))
            using (var page = await browser.NewPageAsync())
            {
                await page.GoToAsync(url, WaitUntilNavigation.Networkidle2);
                await page.SetViewportAsync(new ViewPortOptions { Width = 1349 });

                int totalHeight = Convert.ToInt32(await page.EvaluateExpressionAsync("document.body.scrollHeight"));
                await page.SetViewportAsync(new ViewPortOptions { Width = 1349, Height = totalHeight });

                // save as PNG temporary
                var tempPath = Path.ChangeExtension(outputPath, ".png");
                await page.ScreenshotAsync(tempPath);

                // convert to WebP
                await ConvertToWebP(tempPath, outputPath);

                // delete tmp PNG file
                System.IO.File.Delete(tempPath);
            }
        }
        catch (Exception ex)
        {
            _logger.LogError($"Error while taking screenshot of '{url}' getting exception {ex.Message}");
        }
        finally
        {
            _logger.LogError($"Screenshot captured successfully and stored at '{outputPath}'");
        }
    }

    private async Task ConvertToWebP(string inputPath, string outputPath)
    {
        using (var image = await Image.LoadAsync(inputPath))
        {
            var encoder = new WebpEncoder
            {
                Quality = 75 // accoding your needs to adjust the Quality 
            };
            await image.SaveAsWebpAsync(outputPath, encoder);
        }
    }

My test URL:

https://localhost:7143/Snapshot/CaptureFullPageScreenshot?url=https://localhost:7143/Home/Privacy&outputPath=E:/abc_webp.webp