Sam Posts - Answer Overflow

Sam

•Created by Sam on 3/24/2025 in #workers-help

Image processing library?

I have a Worker function that uses Browser rendering and Puppeteer to capture a screenshot. I want to convert the image to 8bit grayscale. Usually I would use a library like imagescript, upng-js but it didn't work with workers. What is the best way to achive this? Sample code that I tried.

    import { PNG } from 'imagescript';

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    
    // Take screenshot
    const img = await page.screenshot({ type: "png" });
    await browser.close();

    // Convert to grayscale using imagescript
    const buffer = new Uint8Array(img);
    const image = await PNG.decode(buffer);
    
    // Apply grayscale conversion
    image.grayscale();
    
    // For 8-bit grayscale specifically, potentially reduce color depth
    // The library's grayscale() gives you grayscale colors, but we can further reduce
    
    // Encode back to PNG
    const processedImageBuffer = await image.encode();

    import { PNG } from 'imagescript';

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    
    // Take screenshot
    const img = await page.screenshot({ type: "png" });
    await browser.close();

    // Convert to grayscale using imagescript
    const buffer = new Uint8Array(img);
    const image = await PNG.decode(buffer);
    
    // Apply grayscale conversion
    image.grayscale();
    
    // For 8-bit grayscale specifically, potentially reduce color depth
    // The library's grayscale() gives you grayscale colors, but we can further reduce
    
    // Encode back to PNG
    const processedImageBuffer = await image.encode();

Error:

  ✘ [ERROR] No loader is configured for ".node" files:
  node_modules/imagescript/codecs/node/bin/arm64-darwin.node

      node_modules/imagescript/codecs/node/index.js:2:31:
        2 │ ...{ module.exports = require(`./bin/${arch()}-${platform()}.node`); }

  ✘ [ERROR] No loader is configured for ".node" files:
  node_modules/imagescript/codecs/node/bin/arm64-darwin.node

      node_modules/imagescript/codecs/node/index.js:2:31:
        2 │ ...{ module.exports = require(`./bin/${arch()}-${platform()}.node`); }

12 replies

CDCloudflare Developers

•Created by Sam on 3/19/2025 in #workers-help

Hono + Workers + Browser rendering: How to screenshot a localhost path?

Hi 👋🏼 I'm following this example at https://developers.cloudflare.com/browser-rendering/workers-binding-api/screenshots/ How do I point puppeteer to this page for the screenshot? Is there a trick to get the "localhost" from withing the worker? I have a worker that has a hono function returning simple HTML data, that I need to screenshot

// This returns the Dashboard HTML
app.get('/api/dashboard/', (c) => {
  return c.html(
      `<html lang="en">
        <head>
        <title>School dashboard</title>
      </head>
      <body>
        <h1>Welcome to my dashboard</h1>
        <p>
          More content will come here soon.
        </p>
      </body>
    </html>`
    )
})

// This returns the Dashboard HTML
app.get('/api/dashboard/', (c) => {
  return c.html(
      `<html lang="en">
        <head>
        <title>School dashboard</title>
      </head>
      <body>
        <h1>Welcome to my dashboard</h1>
        <p>
          More content will come here soon.
        </p>
      </body>
    </html>`
    )
})

2 replies

Gaming

Programming