Error: ReferenceError: Response is not defined

[ntpnhan]

I'm using @imgly/background-removal-node package for an example. But I get the error: ReferenceError: Response is not defined Following is my example

// Importing necessary modules
const { removeBackground } = require('@imgly/background-removal-node');
const fs = require('fs');

// Function to remove background from an image
async function removeImageBackground(imgSource) {
    try {
        // Removing background
        const blob = await removeBackground(imgSource);

        // Converting Blob to buffer
        const buffer = Buffer.from(await blob.arrayBuffer());

        // Generating data URL
        const dataURL = `data:image/png;base64,${buffer.toString("base64")}`;

        // Returning the data URL
        return dataURL;
    } catch (error) {
        // Handling errors
        throw new Error('Error removing background: ' + error);
    }
}

// Example usage
async function main() {
    try {
        // Path to the input image
        const imgSource = 'main_title.png';
        // Removing background from the input image
        const resultDataURL = await removeImageBackground(imgSource);

        // Writing the result to a file (optional)
        fs.writeFileSync('output.png', resultDataURL.split(';base64,').pop(), { encoding: 'base64' });

        // Logging success message
        console.log('Background removed successfully.');
    } catch (error) {
        // Logging error message
        console.error('Error:', error.message);
    }
}

// Calling the main function
main();

How to resolve this? Please

[maumarteau]

Hi !!
I have the same problem, your have been able to solve it?

[pprory]

Cause: Response is used in the package, but is not imported. I temporarily solved the problem in this way and hope the author can fix it later.

1. Found the /node_modules/@imgly/background-remove-node/dist/index.mjs file . Add in header import {Response, Blob} from "node-fetch";
2. npm i node-fetch

[pprory]

There is a more reasonable solution :) Copy this code into your entry file, such as index.mjs. It works on my computer.

import { removeBackground } from "@imgly/background-removal-node";
import fs from "fs";
// here
import { Response, Blob } from "node-fetch";

globalThis.Response = Response;
globalThis.Blob = Blob;

const image_src = "./1_9it-TQH191NXVvKqv4dF1A.webp";

async function removeImageBackground(imgSource) {
  const blob = await removeBackground(imgSource, {
    model: "medium",
    progress: (progress, current, total) => {
      const currentProgress = (current / total) * 100;
      console.log(progress, `Progress: ${currentProgress.toFixed(2)}%`);
    },
  });
  const buffer = Buffer.from(await blob.arrayBuffer());
  const dataURL = `data:image/png;base64,${buffer.toString("base64")}`;
  return dataURL;
}

removeImageBackground(image_src)
  .then((dataURL) => {
    fs.writeFileSync("output.png", dataURL.split(";base64,").pop(), {
      encoding: "base64",
    });
  })
  .catch((error) => {
    console.error(error);
  });