Add a hook to transform images? #6

davidesigner · 2025-03-16T11:35:12Z

It would be really nice to be able to transform the image.

My use case: add a colorize=white|black parameter.

Idea of the transform hook I would add:

import { getImgParams } from "openimg/node";

function loader({ request }) {
  const headers = new Headers();
  headers.set('Cache-Control', 'public, max-age=31536000, immutable');
  
  return getImgResponse(request, {
    headers,
    getImgParams: ({ request }) => {
      const defaultParams = getImgParams({ request });
  
      const colorize = url.searchParams.get('colorize') || undefined;
      if (colorize && !['white', 'black'].includes(colorize)) {
        return new Response(null, {
          status: 400,
          statusText: 'Search param "colorize" must be either "white" or "black" or unset',
        });
      }
  
      return {
        ...defaultParams,
        colorize,
      };
    },
    transform: async ({ params, pipeline }) => {
      const infoPromise = new Promise((resolve) => {
        pipeline.on('info', (info) => {
          resolve(info);
        });
      });
      const outputImgInfo = await infoPromise; // This could also be passed as function's parameter with `params, pipeline`.
  
      if (params.colorize) {
        if (!['png', 'svg'].includes(outputImgInfo.format)) {
          return new Response(null, {
            status: 400,
            statusText: 'Colorize is only supported for PNG and SVG images',
          });
        }
  
        if (outputImgInfo.format === 'svg') {
          // Convert SVG to PNG before colorizing
          pipeline.png();
        }
  
        switch (params.colorize) {
          case 'white':
            pipeline.grayscale().modulate({
              brightness: 100,
              saturation: 0,
            });
            break;
          case 'black':
            pipeline.grayscale().modulate({
              brightness: 0,
              saturation: 0,
            });
            break;
          default:
            return new Response(null, {
              status: 400,
              statusText: 'Unhandled colorize value',
            });
        }
      }
  
      return pipeline;
    },
  });
}

The text was updated successfully, but these errors were encountered:

andrelandgraf · 2025-05-27T02:08:10Z

Thanks a ton for brining this up and opening a PR as well. I had to make a few changes for the custom cacheKey logic and just went ahead and did it myself (as discussed in your PR).

Transform hook now released as getSharpPipeline in v1.0.0. 🥳

andrelandgraf · 2025-05-27T02:08:52Z

Would love if you give it a spin, @davidesigner! I also exposed a new params property in the React component to make it easier to send custom search parameters as part of the image source to the optimizer endpoint.

davidesigner mentioned this issue Mar 16, 2025

Add transform hook #7

Closed

andrelandgraf closed this as completed May 27, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add a hook to transform images? #6

Add a hook to transform images? #6

Uh oh!

Uh oh!

Add a hook to transform images? #6

Add a hook to transform images? #6

Comments

Uh oh!

Uh oh!

Uh oh!