En este tutorial, aprenderás cómo integrar y utilizar el paquete @imgly/background-removal en tus aplicaciones web. Este potente paquete de npm te permite eliminar el fondo de las imágenes de manera eficiente y segura, ya sea directamente en el navegador o en un entorno Node.js. A lo largo de este tutorial, exploraremos cómo configurar el proyecto, instalar el paquete, y utilizar sus funcionalidades clave para mejorar tus aplicaciones con capacidades avanzadas de eliminación de fondos. Ya sea que estés desarrollando una aplicación de comercio electrónico, una herramienta de edición de imágenes, o cualquier otro proyecto que requiera procesamiento de imágenes en tiempo real, este tutorial te guiará paso a paso para que puedas aprovechar al máximo lo que @imgly/background-removal tiene para ofrecer.
Eliminar fondos de imágenes con @imgly/background-removal
El paquete @imgly/background-removal es un paquete de npm que permite a los desarrolladores eliminar el fondo de las imágenes directamente en el navegador o en un entorno Node.js. Este paquete está diseñado para funcionar de manera eficiente sin requerir procesamiento en el servidor, lo que ayuda a mantener la privacidad de los datos, ya que todo el procesamiento se realiza en el dispositivo del usuario. Utiliza una red neuronal (modelo ONNX) y archivos WebAssembly (WASM) para lograr este objetivo.
Características clave del paquete incluyen:
Procesamiento en el Navegador: El paquete realiza la eliminación de fondos directamente en el navegador, lo que lo hace ideal para aplicaciones donde se necesita procesamiento en tiempo real, como en e-commerce o herramientas de diseño gráfico basadas en la web.
Soporte para Node.js: Recientemente, el paquete ha agregado soporte para Node.js, lo que permite la eliminación de fondos en el lado del servidor. Esto es útil para el procesamiento por lotes o para manejar imágenes más grandes que pueden estar limitadas por la memoria del navegador.
Privacidad de Datos: Dado que la eliminación de fondos se realiza localmente, no es necesario cargar las imágenes en servidores externos, lo que garantiza que los datos del usuario permanezcan seguros.
Fácil Integración: El paquete se puede integrar fácilmente en proyectos, y proporciona la flexibilidad de alojar el modelo ONNX y los archivos WASM necesarios en tu propio servidor si así lo prefieres.
Este paquete es ideal para desarrolladores que buscan agregar capacidades de eliminación de fondos eficientes y centradas en la privacidad a sus aplicaciones web.
Creación del Proyecto en Node.js
En esta sección, te guiaré a través de los pasos necesarios para configurar un proyecto en Node.js utilizando ES6 Modules y el paquete @imgly/background-removal. Este tutorial asume que ya tienes Node.js instalado en tu máquina.
1. Inicializa tu Proyecto
Primero, crea una nueva carpeta para tu proyecto y navega a ella desde la terminal:
mkdir background-removal-node
cd background-removal-node
Luego, inicializa un nuevo proyecto de Node.js con el siguiente comando:
npm init -y
Esto creará un archivo package.json con la configuración básica de tu proyecto.
2. Configura ES6 Modules
Para habilitar ES6 Modules en Node.js, debes agregar "type": "module" en el archivo package.json. Abre package.json y asegúrate de que contenga lo siguiente:
{
"name": "background-removal-node",
"version": "1.0.0",
"type": "module",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"dependencies": {}
}
3. Instala el Paquete @imgly/background-removal
Ahora, instala el paquete necesario para eliminar fondos:
npm i @imgly/background-removal-node
4. Crea el Archivo Principal
Crea un archivo index.js en la raíz de tu proyecto y escribe el siguiente código para importar el paquete y configurar la funcionalidad básica de eliminación de fondos:
import { removeBackground } from "@imgly/background-removal-node";
import fs from "fs";
import path from "path";
// Ruta de la imagen de entrada
const inputPath = "./input-image.png";
// Ruta de la imagen de salida
const outputPath = "./output-image.png";
// Verificar si el archivo existe
if (!fs.existsSync(inputPath)) {
console.error("El archivo de entrada no existe:", inputPath);
process.exit(1);
}
console.log("Leyendo archivo:", inputPath);
// Convertir la ruta del archivo a URL
const absolutePath = path.resolve(inputPath);
const imageUrl = `file://${absolutePath}`;
console.log("URL de la imagen:", imageUrl);
console.log("Iniciando eliminación de fondo...");
// Función para convertir Blob a Buffer
async function blobToBuffer(blob) {
const arrayBuffer = await blob.arrayBuffer();
return Buffer.from(arrayBuffer);
}
// Remover el fondo de la imagen usando URL
removeBackground(imageUrl)
.then(async (blob) => {
console.log("Fondo eliminado exitosamente");
// Convertir Blob a Buffer y guardar
const buffer = await blobToBuffer(blob);
fs.writeFileSync(outputPath, buffer);
console.log("Imagen guardada en:", outputPath);
})
.catch((error) => {
console.error("Error al eliminar el fondo:", error.message);
console.error("Stack trace:", error.stack);
});
5. Ejecuta el Proyecto
Finalmente, puedes ejecutar tu proyecto con el siguiente comando:
npm start
Si todo está configurado correctamente, el fondo de la imagen se eliminará y se guardará en la ruta especificada.
Mejorando el codigo
Vamos a convertir ahora algunos usos de promesas a async/await y tambien vamos a eliminar algunos console.log inncesarios
import { removeBackground } from "@imgly/background-removal-node";
import fs from "fs";
import path from "path";
// Función para convertir Blob a Buffer
async function blobToBuffer(blob) {
const arrayBuffer = await blob.arrayBuffer();
return Buffer.from(arrayBuffer);
}
// Función principal
async function main() {
try {
// Ruta de la imagen de entrada
const inputPath = "./input-image.png";
// Ruta de la imagen de salida
const outputPath = "./output-image.png";
// Verificar si el archivo existe
if (!fs.existsSync(inputPath)) {
console.error("El archivo de entrada no existe:", inputPath);
process.exit(1);
}
console.log("Procesando imagen...");
// Convertir la ruta del archivo a URL
const absolutePath = path.resolve(inputPath);
const imageUrl = `file://${absolutePath}`;
// Remover el fondo de la imagen usando URL
const blob = await removeBackground(imageUrl);
// Convertir Blob a Buffer y guardar
const buffer = await blobToBuffer(blob);
fs.writeFileSync(outputPath, buffer);
console.log("Imagen guardada exitosamente en:", outputPath);
} catch (error) {
console.error("Error al eliminar el fondo:", error.message);
}
}
// Ejecutar la función principal
main();
¡Con esto ya tienes un proyecto de Node.js usando ES6 Modules que realiza la eliminación de fondos en imágenes!