Recorte de imagens em JavaScript com precisão de coordenadas

Uma ferramenta de recorte em JavaScript tem duas funções: ajudar uma pessoa a escolher uma região e descrever essa região sem ambiguidade. Misturar pixels da pré-visualização, coordenadas escaladas por CSS e pixels de origem é a causa mais comum de recortes incorretos.

O que mais importa

• Evite decodificar imagens muito grandes repetidamente em dispositivos com memória limitada.
• Valide novamente as coordenadas e as dimensões mínimas no 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, maxDimension = 1024) {
  const width = crop.right - crop.left
  const height = crop.bottom - crop.top
  if (![width, height, maxDimension].every((value) => Number.isFinite(value) && value > 0)) {
    throw new Error('Crop dimensions must be finite and positive')
  }
  const scale = Math.min(1, maxDimension / Math.max(width, height))
  const canvas = document.createElement('canvas')
  canvas.width = Math.max(1, Math.round(width * scale))
  canvas.height = Math.max(1, Math.round(height * scale))
  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,
    canvas.width,
    canvas.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)
  })
}

Detalhes técnicos que vale a pena conhecer

• naturalWidth e naturalHeight descrevem as dimensões da imagem decodificada, enquanto clientWidth e clientHeight descrevem a caixa CSS. As coordenadas de recorte precisam ser convertidas entre esses espaços.
• Imagens de câmera podem conter metadados de orientação que alteram a largura, a altura e os eixos visuais sem alterar a ordem dos pixels armazenados; por isso, a orientação precisa ser normalizada antes dos cálculos com coordenadas.
• URLs de Blob evitam o acréscimo de aproximadamente um terço no tamanho das data URLs em base64, mas cada URL mantém seu Blob subjacente até que URL.revokeObjectURL seja chamado ou o documento seja descarregado.
• A exportação do canvas pode alterar perfis de cor, metadados, animação e qualidade de codificação, o que é mais um motivo para tratar o resultado do navegador como uma pré-visualização, e não como a versão mestre.
• As coordenadas do ponteiro são relativas à viewport até serem convertidas considerando o retângulo delimitador do elemento, a rolagem, o zoom e quaisquer transformações CSS aplicadas.
• Imagens decodificadas muito grandes podem exceder os limites de canvas em dispositivos móveis mesmo quando o upload comprimido é pequeno; por isso, as dimensões da pré-visualização e a contagem de pixels da origem precisam de limites separados.

Uma abordagem prática

Limite da arquitetura

O canvas do navegador é útil para prévias interativas, mas consome memória do cliente e não garante uma codificação idêntica entre dispositivos. Não deixe um celular responsável por todas as imagens derivadas de produção.