Imágenes y fotografías · Editor de imágenes y dibujos del navegador
Cómo funciona el recorte en un editor de imágenes del navegador: lienzo y píxeles
· Cómo funciona
edición de imágenes lienzo procesamiento del navegador
Recortar parece trivial, pero un editor de navegador tiene que decodificar el archivo, copiar un rectángulo de píxeles en un lienzo y codificar un archivo nuevo. Esta publicación recorre cada paso y explica qué cambia y qué permanece idéntico.
Por qué una foto recortada es un archivo nuevo, no uno antiguo recortado: el recorte no puede simplemente eliminar bytes de un archivo JPEG o PNG, por lo que el editor decodifica y vuelve a codificar
Un JPEG almacena datos de imagen comprimidos, no un byte que se pueda eliminar de forma independiente por fila visible. Cortar bytes de su extremo corrompería el archivo, no recortaría una fotografía. Por tanto, un editor de navegador decodifica la imagen, selecciona un rectángulo y crea un nuevo archivo codificado. El original permanece en su disco. Si necesita una edición reversible, conserve las coordenadas de origen y de selección: el recorte exportado no contiene los píxeles que faltan.
Decodificar la imagen en un mapa de bits: cómo el navegador convierte los bytes comprimidos en una cuadrícula de ancho × alto de píxeles RGBA antes de que se pueda seleccionar algo.
El navegador convierte el JPEG, PNG o WebP comprimido en un mapa de bits con muestras de ancho × alto. Una imagen de 4000×3000 representa doce millones de píxeles antes de cualquier recorte, y varios bytes por píxel pueden hacer que su huella en memoria sea mucho mayor que la del archivo en el disco. ToolAcre verifica los límites de la imagen y el lienzo antes de asignar espacios de trabajo muy grandes. Lo que ves en la pantalla se puede ampliar para que se ajuste a la ventana gráfica; el rectángulo de recorte aún debe asignarse nuevamente a las coordenadas de la imagen antes de copiar los píxeles.
Seleccionar un rectángulo: coordenadas de origen y destino: cómo drawImage copia una región elegida en un lienzo del tamaño objetivo y qué significa redondear a píxeles completos
Un rectángulo es un origen (x,y) más el ancho y el alto, medidos en píxeles de origen. ToolAcre limita ese rectángulo a los límites del documento y recorta cada capa visible, no solo una captura de pantalla de la vista previa compuesta. Para cada capa, crea un lienzo de destino y llama a drawImage con nueve argumentos: lienzo de origen, rectángulo de origen, origen de destino y tamaño de destino. Con las mismas dimensiones de origen y destino, los píxeles se seleccionan sin un paso de cambio de tamaño. Las posiciones fraccionarias del puntero se redondean o fijan a píxeles del lienzo representables.
Codificar el resultado en un archivo: por qué el paso de exportación decide el formato y la calidad, y por qué el recorte en sí es exacto mientras que la codificación puede no serlo
La exportación es una operación separada del cultivo. El lienzo editado se puede codificar como PNG, JPEG o WebP según las opciones y la compatibilidad del navegador. PNG puede conservar los píxeles suministrados a su codificador sin pérdidas; JPEG pierde algunos detalles incluso si el rectángulo se seleccionó exactamente, y la transparencia necesita un fondo deliberado cuando se usa un formato sin alfa. El nuevo archivo también puede omitir metadatos de origen o información de color, por lo que nunca lo describa como un subconjunto byte por byte del original.
Ejemplo resuelto: recortar una foto de 4000 × 3000 a un banner de 1600 × 900, siguiendo el recuento de píxeles mediante decodificación, copia y exportación
Para un blogger con una foto de 4000×3000, un banner centrado de 1600×900 comienza en x=1200 e y=1050. drawImage copia las columnas 1200 a 2799 y las filas 1050 a 1949 en una salida de 1600×900: 1.44 millones de píxeles en lugar de doce millones. Si, en cambio, le pide al editor que reduzca la fotografía completa a 1600 × 900, cambiará su relación de aspecto y volverá a muestrear en lugar de realizar este recorte. En un teléfono con memoria limitada, el editor puede reducir primero una entrada muy grande, así que verifique las dimensiones mostradas antes de repetir estas coordenadas.
Lo que un cultivo exportado no puede recuperar del cuadro original
Esto no es un recorte de bloques JPEG sin pérdidas: la aplicación dibuja píxeles y exporta un nuevo contenedor. El archivo exportado de 1600 × 900 tampoco puede recuperar los márgenes descartados después de cerrar el original. Un documento de edición en capas vuelve a ser diferente: el recorte actúa sobre las capas del documento, mientras que la exportación las compone en la imagen descargada. Para material sensible, recortar un margen es más seguro que simplemente dibujar una superposición opaca, pero inspecciona los píxeles exportados y mantén el original en privado.
Conclusión: píxeles exactos, nuevo contenedor: por qué un recorte del navegador es preciso y cómo lo realiza el editor de imágenes y dibujos del navegador sin cargar el archivo
Un recorte del navegador es preciso sobre qué píxeles decodificados conservar, mientras que el codificador elegido controla el archivo descargado. El Editor de imágenes y dibujos del navegador realiza ambos pasos en su dispositivo: cargar una imagen, seleccionar un rectángulo, aplicar el recorte y exportar. La red no necesita los bytes de fotos para ninguno de los pasos, pero los activos del sitio y las solicitudes de análisis/AdSense divulgadas no deben confundirse con la carga de un archivo en DevTools.