sharp was working fine but doesn't anymore

[LouisR-P]

Possible bug

Is this a possible bug in a feature of sharp, unrelated to installation?

• [x] Running npm install sharp completes without error.
• [x] Running node -e "require('sharp')" completes without error.

If you cannot confirm both of these, please open an installation issue instead.

Are you using the latest version of sharp?

• [x] I am using the latest version of sharp as reported by npm view sharp dist-tags.latest.

If you cannot confirm this, please upgrade to the latest version and try again before opening an issue.

If you are using another package which depends on a version of sharp that is not the latest, please open an issue against that package instead.

What is the output of running npx envinfo --binaries --system --npmPackages=sharp --npmGlobalPackages=sharp?

System: OS: macOS 14.5 CPU: (8) arm64 Apple M2 Memory: 54.34 MB / 8.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm npmPackages: sharp: ^0.33.4 => 0.33.4

Does this problem relate to file caching?

The default behaviour of libvips is to cache input files, which can lead to EBUSY or EPERM errors on Windows. Use sharp.cache(false) to switch this feature off.

• [x] Adding sharp.cache(false) does not fix this problem.

Does this problem relate to images appearing to have been rotated by 90 degrees?

Images that contain EXIF Orientation metadata are not auto-oriented. By default, EXIF metadata is removed.

• To auto-orient pixel values use the parameter-less rotate() operation.

• To retain EXIF Orientation use keepExif().

• [x] Using rotate() or keepExif() does not fix this problem.

What are the steps to reproduce?

This code was working fine, but doesn't work anymore: Try to negate and threshold a image, it will not change the image:

await sharp(shirtImage)
        .negate()
        .threshold(10)
        .toFile("shirt-mask.png");
const processedShirtImage = await sharp(shirtImage)
        .joinChannel("shirt-mask.png")
        .toBuffer();

What is the expected behaviour?

The expected behaviour is that the white image background is removed.

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this problem

Please provide sample image(s) that help explain this problem

[lovell]

This code was working fine, but doesn't work anymore:

Please provide much more information about what you changed between "working" and "doesn't work".

Please provide sample image(s).

This appears to relate to https://github.com/lovell/sharp/issues/4076

[LouisR-P]

I haven't changed a thing... I updated my code which uses sharp, the white background removal (https://github.com/lovell/sharp/issues/4076) didn't work any more, so I rollback it but unfortunately I have the impression that it still doesn't work whereas before with the changes you suggested it worked... Here is my code:

import axios from "axios";
import * as admin from "firebase-admin";
import { getApps, initializeApp } from "firebase-admin/app";
import * as functions from "firebase-functions";
import {
  FirestoreEvent,
  QueryDocumentSnapshot,
  onDocumentCreated,
} from "firebase-functions/v2/firestore";
import { getOutfitImageByOutfitId } from "./services/outfit-service";
import { onUserRegister } from "./register";
import * as sharp from "sharp";

export function functionsInstance(): typeof functions {
  if (getApps().length === 0) {
    initializeApp();
  }
  return functions;
}

functionsInstance();

const firestore = admin.firestore();
const storage = admin.storage();

const THRESHOLD_VALUE = 10;

async function processImage(imageUrl: string) {
  const imageResponse = await axios.get(imageUrl, {
    responseType: "arraybuffer",
  });
  const imageBuffer = Buffer.from(imageResponse.data, "binary");
  functions.logger.info("imageBuffer", imageUrl, imageBuffer);

  // Create a mask from the image
  const maskBuffer = await sharp(imageBuffer)
    .negate()
    .threshold(THRESHOLD_VALUE)
    .toColourspace("b-w") // Ensure the mask is in the correct color space
    .toBuffer();

  // Apply the mask to the original image
  const processedImage = await sharp(imageBuffer)
    .composite([{ input: maskBuffer, blend: "dest-in" }])
    .png() // Ensure the output is in PNG format to preserve transparency
    .toBuffer();

  return processedImage;
}

exports.generateOutfitImage = onDocumentCreated(
  {
    memory: "512MiB",
    document: "outfits/{outfitId}",
  },
  async (
    event: FirestoreEvent<
      QueryDocumentSnapshot | undefined,
      {
        outfitId: string;
      }
    >
  ) => {
    try {
...
      const [image] = await storage
        .bucket()
        .file(Image)
        .download();

      // Remove white background from individual images
      await sharp(image)
        .negate()
        .threshold(THRESHOLD_VALUE)
        .toFile("shirt-mask.png");
      const processedImage = await sharp(image)
        .joinChannel("shirt-mask.png")
        .toBuffer();

... other images

      // Create composite image
      const compositeImage = await sharp({
        create: {
          width: 2000, // Set width and height as per your requirement
          height: 2000,
          channels: 4, // RGBA
          background: { r: 255, g: 255, b: 255, alpha: 0 }, // Transparent background
        },
      })
        .composite([
          { input: processedImage, top: 0, left: 0 },
          ... other image
        ])
        .unflatten()
        .png()
        .toBuffer();

      ...
    } catch (e) {
      console.error(e);
    }
  }
);

For example with this code, if I take this as entry: it will return the same image with no modification.

[lovell]

From the snippet of code provided here I can see a processImage() function but nothing appears to call it.

I also see use of a shirt-mask.png file. If this function runs in parallel then use of a shared filesystem could result in a race condition.

Perhaps you could provide a complete, standalone repo without any networking dependency that allows someone else to reproduce.

[LouisR-P]

My snippet wasn't entirely correct, sorry. Here is my updated current snippet:

import axios from "axios";
import sharp from "sharp";
other imports...


async function processImage(imageUrl: string) {
  const imageResponse = await axios.get(imageUrl, {
    responseType: "arraybuffer",
  });
  const imageBuffer = Buffer.from(imageResponse.data, "binary");

  // Remove white background from individual images
  await sharp(imageBuffer).negate().threshold(10).toFile("mask.png");

  const processedImage = await sharp(imageBuffer)
    .joinChannel("mask.png")
    .toBuffer();

  return processedImage;
}

exports.generateOutfitImage = onDocumentCreated(
  {
    memory: "512MiB",
    document: "outfits/{outfitId}",
  },
  async (
    event: FirestoreEvent<
      QueryDocumentSnapshot | undefined,
      {
        outfitId: string;
      }
    >
  ) => {
    try {
      const outfit = event.data?.data();

      const topImageUrl = outfit?.top.image;
      const bottomImageUrl = outfit?.bottom.image;
      const shoesImageUrl = outfit?.shoes.image;

      const processedShirtImage = await processImage(topImageUrl);
      const processedPantsImage = await processImage(bottomImageUrl);
      const processedShoesImage = await processImage(shoesImageUrl);

      // Create composite image
      const compositeImage = await sharp({
        create: {
          width: 2000, // Set width and height as per your requirement
          height: 2000,
          channels: 4, // RGBA
          background: { r: 255, g: 255, b: 255, alpha: 0 }, // Transparent background
        },
      })
        .composite([
          { input: processedShirtImage, top: 0, left: 0 },
          { input: processedPantsImage, top: 0, left: 500 },
          { input: processedShoesImage, top: 500, left: 0 },
        ])
        .png()
        .toBuffer();

For this code snippet, for these pictures input:

I get this output composite image with still the white background on each sub images:

As you said, this issue is related to https://github.com/lovell/sharp/issues/4076 I don't understand why this is not working with the processImage function.

[lovell]

It looks like the processImage() function is still relying on the shared filesystem - please remove any possible race conditions from your code e.g. use toBuffer() rather than toFile().

If you still require help, please provide a complete, standalone repo without any networking dependency that allows someone else to reproduce.

[LouisR-P]

here you go: https://github.com/LouisR-P/sharp-project/tree/main Install with npm i and then launch npm start to run the script. Here, I see a transparent image as result.

[lovell]

Thank you, I've been able to reproduce locally.

It looks like you upgraded from 0.33.3 (or earlier) to 0.33.4 and introduced https://github.com/lovell/sharp/pull/4096 which was supposed to make the negate operation produce more accurate results for CMYK images. However I now realise this was a slightly-breaking change and you've run into one of those breaks.

What you can do is invert the logic here, threshold pixel values above 245 (max of 255 minus the original threshold of 10) then negate, which feels slightly more logically anyway:

-  const maskImage = await sharp(imageBuffer).negate().threshold(10).toBuffer();
+  const maskImage = await sharp(imageBuffer).threshold(245).negate().toBuffer();

[LouisR-P]

Thanks for your reply. The change you suggested seems to work, I applied it but however, I seem to have another problem. I've updated the repository with new image links, and now the script doesn't seem to be working for these ones. https://github.com/LouisR-P/sharp-project For the exact same picture:

• https://i.postimg.cc/8k9DpFzQ/shoes.avif ➡️ this link into the script will work and remove the white background
• https://images.stockx.com/360/Nike-Air-Humara-LX-Jacquemus-Pink-W/Images/Nike-Air-Humara-LX-Jacquemus-Pink-W/Lv2/img01.jpg ➡️ will not work.

[LouisR-P]

Okay I found the solution, I just had to convert the image to png:

const convertedImageBuffer = await sharp(imageBuffer)
    .toFormat("png")
    .toBuffer();

[lovell]

Great, thanks for the update, glad you worked it all out.