Recortar imágenes en JavaScript con precisión de coordenadas

Un recortador en JavaScript cumple dos tareas: ayudar a una persona a elegir una región y describir esa región sin ambigüedades. Mezclar píxeles de la vista previa, coordenadas escaladas por CSS y píxeles de la fuente es la causa más común de recortes incorrectos.

Lo más importante

• Evita decodificar imágenes muy grandes repetidamente en dispositivos con memoria limitada.
• Vuelve a validar las coordenadas y las dimensiones mínimas en el servidor.

function normalizeCrop(crop, sourceWidth, sourceHeight) {
  return {
    x: crop.x / sourceWidth,
    y: crop.y / sourceHeight,
    width: crop.width / sourceWidth,
    height: crop.height / sourceHeight,
  }
}

function cropToSourcePixels(crop, sourceWidth, sourceHeight) {
  return {
    left: Math.round(crop.x * sourceWidth),
    top: Math.round(crop.y * sourceHeight),
    right: Math.round((crop.x + crop.width) * sourceWidth),
    bottom: Math.round((crop.y + crop.height) * sourceHeight),
  }
}

function renderCrop(image, crop) {
  const width = crop.right - crop.left
  const height = crop.bottom - crop.top
  const canvas = document.createElement('canvas')
  canvas.width = width
  canvas.height = height
  const context = canvas.getContext('2d')
  if (context == null) throw new Error('2D canvas is unavailable')

  context.drawImage(
    image,
    crop.left,
    crop.top,
    width,
    height,
    0,
    0,
    width,
    height,
  )

  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => {
      if (blob == null) reject(new Error('The browser could not encode the crop'))
      // Browsers fall back to image/png when the requested type is unsupported
      else if (blob.type !== 'image/webp') reject(new Error('Encoder fell back to ' + blob.type))
      else resolve(blob)
    }, 'image/webp', 0.86)
  })
}

Detalles técnicos que conviene conocer

• naturalWidth y naturalHeight describen las dimensiones de la imagen decodificada, mientras que clientWidth y clientHeight describen la caja CSS. Las coordenadas de recorte deben traducirse entre esos espacios.
• Las imágenes de cámara pueden llevar metadatos de orientación que cambian el ancho, el alto y los ejes visuales sin cambiar el orden de píxeles almacenado, por lo que la orientación debe normalizarse antes de la aritmética de coordenadas.
• Las URL de blob evitan la sobrecarga de tamaño de aproximadamente un tercio que añaden las URL de datos en base64, pero cada URL conserva su Blob subyacente hasta que se llama a URL.revokeObjectURL o se cierra el documento.
• La exportación de canvas puede cambiar los perfiles de color, los metadatos, la animación y la calidad de codificación, lo cual es otra razón para tratar el resultado del navegador como una vista previa y no como el archivo maestro.
• Las coordenadas del puntero son relativas al viewport hasta que se traducen mediante el rectángulo delimitador del elemento, el desplazamiento, el zoom y cualquier transformación CSS aplicada.
• Las imágenes decodificadas muy grandes pueden superar los límites de canvas en móviles incluso cuando la subida comprimida es pequeña, por lo que las dimensiones de vista previa y el número de píxeles de la fuente necesitan límites independientes.

Un enfoque práctico

Límite de la arquitectura

El canvas del navegador es útil para vistas previas interactivas, pero consume memoria del cliente y no garantiza una codificación idéntica en todos los dispositivos. No hagas que un teléfono sea responsable de cada derivado de producción.