如何使用javascript去除黑色区域或黑色区域到透明png图像？

Question

How to remove black area or black area to transparent png image using javascript?

I want remove black area or black area to transparent i used 'sharp' Library but I couldn't get what I want if you need more information what you need plz tell me

Answer 1

I have tried to do something similar in the past, but after checking out several resources, I realized that removing backgrounds from images is not possible solely with Sharp. You might have to use another package too, for instance, Rembg. This is how you can do it:

// Import the sharp and rembg library for image processing
const { Rembg } = require("rembg-node");
const sharp = require("sharp");

(async () => {
  const input = sharp("Path/to/your/image.png");  // Load the input image using Sharp

  // Create a new instance of the Rembg class (optional arguments can be provided)
  const rembg = new Rembg();

  // Apply background removal by calling the remove() method of the Rembg instance
  const output = await rembg.remove(input);

  await output.toFile("path/to/your/destination.png");  // Save the output image with the background removed

})();

Note: Rembg is not a very popular package, so you will need to use yarn for its installation.

Another easy solution I found is the freemium Cloudinary AI background removal service. I played around with it a bit, and it was pretty consistent in removing backgrounds. For this, install Cloudinary Node.js SDK in your project. Enable the plugin by going to Add-ons>Cloudinary AI Background Removal and subscribing to the free plan. Then run this simple script in Node.js:

// Import cloudinary
const cloudinary = require('cloudinary').v2;

// Configure cloudinary with your credentials
cloudinary.config({
  cloud_name: 'your_cloud_name',
  api_key: 'your_api_key',
  api_secret: 'your_api_secret'
});

// Specify the public ID for the image you want to upload
const publicId = "Your_Image_ID";

// Upload the image to Cloudinary with specified options
cloudinary.uploader.upload("Path/to/your/image.png", {
  resource_type: "image", // Specify the type of resource being uploaded
  public_id: publicId, // Set the public ID for the uploaded image
  background_removal: "cloudinary_ai" // Use background removal plugin
})
.then((result) => {
  console.log("success", JSON.stringify(result, null, 2)); // Log the success response
})
.catch((error) => {
  console.log("error", JSON.stringify(error, null, 2)); // Log the error response
});

Hope this helps you out.

PS. Referred to this blog post , in case it helps.