ImageToBlackAndWhite

Paquete: @tiendana/utils

Convierte una imagen a blanco y negro usando canvas, ajustándola (fit contain) a un lienzo de 380x100px con fondo blanco. Solo funciona en el navegador, con la imagen ya cargada.

Firma

function ImageToBlackAndWhite(img: HTMLImageElement): string

Parámetros

Parámetro	Tipo	Descripción
img	HTMLImageElement	Elemento imagen a convertir

Retorno

Tipo: string

Data URL (base64) de la imagen en blanco y negro en formato PNG.

Uso

import { ImageToBlackAndWhite } from '@tiendana/utils';

const img = new Image();
img.onload = () => {
  const bwDataUrl = ImageToBlackAndWhite(img);
  
  // Usar en otro img element
  document.querySelector('#output').src = bwDataUrl;
  
  // O descargar
  const link = document.createElement('a');
  link.download = 'image-bw.png';
  link.href = bwDataUrl;
  link.click();
};

img.src = 'photo.jpg';

Algoritmo

1. Canvas: Crea canvas 380x100px y lo rellena de blanco (el backgroundColor negro que se le asigna es solo CSS y no afecta los píxeles exportados)
2. Aspecto: Mantiene aspect ratio de imagen original (fit contain)
3. Centrado: Centra imagen en canvas; las franjas sobrantes quedan blancas
4. Conversión: Por cada pixel:
   • Suma R + G + B
   • Si suma > 383: blanco (255)
   • Si suma ≤ 383: negro (0)
   • El alfa se fuerza a 255, así que las zonas transparentes de la imagen quedan blancas
5. Output: Retorna PNG en base64

Casos de Uso

• Logos en blanco y negro sobre fondo blanco
• Thumbnails en blanco y negro
• Efectos artísticos
• Optimización de imágenes para impresión

Limitaciones

• Dimensiones fijas: Siempre 380x100px
• Threshold fijo: 383 no es configurable
• Formato fijo: Solo PNG output
• Sin transparencia: el resultado es opaco, con fondo blanco
• Solo navegador: usa document.createElement('canvas')

Ver También

• downloadFile - Descargar imagen procesada