lovell / sharp

High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
https://sharp.pixelplumbing.com
Apache License 2.0
28.39k stars 1.28k forks source link

sharp was working fine but doesn't anymore #4139

Open LouisR-P opened 1 week ago

LouisR-P commented 1 week ago

Possible bug

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

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

Are you using the latest version of sharp?

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.

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.

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 commented 1 week ago

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 commented 1 week ago

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: t-shirt it will return the same image with no modification.

lovell commented 6 days ago

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.