Función para comprimir imágenes que se suben por web con React

Tiempo de lectura: < 1 minuto

Hoy os voy a compartir una función que nos ayuda a comprimir las imágenes que subimos en nuestra web usando un input.

Código:

const comprimirImagen = (img: HTMLImageElement, maxWidth = 1024, quality = 0.7) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    if (!ctx) return null;

    const scale = maxWidth / img.width;
    const width = maxWidth;
    const height = img.height * scale;

    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);

    return canvas.toDataURL('image/jpeg', quality);
};