Cloudflare Developers•2w ago

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

11 Replies

gwapes•2w ago

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

SamOP•2w ago

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.

gwapes•2w ago

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

SamOP•2w ago

What did you use it for?

gwapes•2w ago

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

1984 Ford Laser•2w ago

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

SamOP•2w ago

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

gwapes•2w ago

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

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

SamOP•2w ago

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.

SamOP•2w ago

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

gwapes•2w ago

Great glad you could get it working

Gaming

Programming

Image processing library?

Did you find this page helpful?