BPANEL IMAGE COMPRESSOR

Compresor de Imágenes

  Ver repo

Documentación de Image Compressor API

Bienvenido a la documentación de la Image Compressor API. Este servicio te permite comprimir imágenes de forma sencilla y sin necesidad de instalación. Utiliza el siguiente endpoint para enviar tus peticiones:

https://compressor.bittacora.dev/upload

Características

  • Compresión de imágenes con parámetros configurables.
  • Soporte para múltiples imágenes en una sola solicitud.
  • Redimensionamiento y conversión de formato (por defecto a webp).

Parámetros de la Solicitud

Envía una petición POST al endpoint con form-data incluyendo los siguientes parámetros:

  • images: Uno o varias imágenes (campo de tipo File).
  • resize (opcional): Ancho deseado para redimensionar la imagen (valor numérico; por defecto 1500).
  • format (opcional): Formato de salida (webp, jpeg, png; por defecto webp).
  • quality (opcional): Calidad de la imagen comprimida (rango 0-100; por defecto 80).
  • lossless (opcional): true o false para compresión sin pérdida (por defecto false). Al seleccionar "true" la opción "Calidad" deja de tener efecto.

Respuesta

Si la solicitud es exitosa, recibirás una respuesta en formato JSON similar a la siguiente: 

          
  {
    "message": "Images compressed",
    "files": [
        "./uploads/compressed-nombreImagen1.webp",
        "./uploads/compressed-nombreImagen2.webp"
    ]
  }

Ejemplos de Implementación

              
  // Ejemplo usando Fetch API
  function handleSendCompress() {
    const formData = new FormData()
    const images = document.querySelector('#images').files

    // Agregar archivos y parámetros
    Array.from(images).forEach(file => {
      formData.append('images', file)
    })
    formData.append('resize', 1500)
    formData.append('format', 'webp')
    formData.append('quality', 80)
    formData.append('lossless', 'false')

    fetch('https://compressor.bittacora.dev/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error))
  }
              
            
              
  // Ejemplo usando Async/Await
  async function uploadImages() {
    try {
      const formData = new FormData()
      const images = document.querySelector('#images').files

      // Agregar archivos y parámetros
      Array.from(images).forEach(file => {
        formData.append('images', file)
      })
      formData.append('resize', 1500)
      formData.append('format', 'webp')
      formData.append('quality', 80)
      formData.append('lossless', 'false')

      const response = await fetch('https://compressor.bittacora.dev/upload', {
        method: 'POST',
        body: formData
      })

      if (!response.ok) {
        throw new Error(`Error en la solicitud: ${response.statusText}`)
      }

      const data = await response.json()
      console.log(data)
    } catch (error) {
      console.error('Error:', error)
    }
  }
Finalmente en el formulario, añade el evento submit para llamar a la función: 
              
  <form id="uploadForm">

    <!-- Resto del formulario -->
 
    <input type="submit" value="Comprimir Imágenes" onclick="uploadImages()">
  
</form>

Ejemplo de Solicitud con Formulario HTML

Usa este formulario para comprimir imágenes sin necesidad de instalar nada. La petición se envía a: https://compressor.bittacora.dev/upload

80