Image processing library?

[manic plank]

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();

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`); }

[red token]

Have you tried npm install @cf-wasm/photon, https://github.com/silvia-odwyer/photon, I believe this is the recommended one.

[manic plank]

Thanks, let me check it out and report back. I was searching this sever for "image processing" and so far haven't found anything that works.

[red token]

That's the one i found when I was researching before

[manic plank]

What did you use it for?

[red token]

I was going to use it to preprocess some images before OCR but just done it locally in the end

[vast vector]

The Images Transformation API has brightness, contrast and saturation options. Probably not quite what you're looking for

[manic plank]

I found many libs under cf-wasm. Just need to find what’s the best way to convert the image into 8 bit grayscale.

[red token]

import { PhotonImage, grayscale } from '@cf-wasm/photon';
        const imageUrl = new URL(req.url).searchParams.get('url');
        if (!imageUrl) return new Response('Image URL is required', { status: 400 });
    
        try {
            const response = await fetch(imageUrl);
            if (!response.ok) throw new Error(`Failed to fetch image: ${response.status}`);
            const buffer = await response.arrayBuffer();
            const inputBytes = new Uint8Array(buffer);
    
            if (inputBytes.length === 0) throw new Error('Empty image data received');
            const inputImage = PhotonImage.new_from_byteslice(inputBytes);
            grayscale(inputImage);
    
            const outputBytes = inputImage.get_bytes_webp();
            inputImage.free();
    
            return new Response(outputBytes, {
                headers: { 'Content-Type': 'image/webp' }
            });
        } catch (error) {
            console.error('Image processing error:', error);
            return new Response(`Error processing image: ${error.message}`, { status: 500 });
        }
    })

worked for me

[manic plank]

I tried the same except with png, grayscale conversion works but I need to convert it into 8 bit gray format. It is for kindle which needs this format.

[manic plank]

Success!
After lots of wrestling with LLMs I managed to get the AI Slop to deliver.