Imágenes y fotografías · Redimensionador de imágenes sociales
Cómo funciona el cambio de tamaño de la imagen del navegador: lienzo, dibujo de imagen y remuestreo
· Cómo funciona
cambio de tamaño de imagen lienzo procesamiento del navegador
Un navegador puede decodificar una foto, dibujarla en un lienzo con un nuevo tamaño y codificar el resultado, todo sin un servidor. Esta publicación sigue ese proceso, explica dónde se gana o se pierde la calidad y muestra por qué el único límite de tamaño es la memoria de su dispositivo.
Sin carga, sin servidor, aún con cambio de tamaño: la cuestión concreta de dónde ocurre el trabajo cuando una página reduce una foto de 20 megapíxeles
Una fotografía puede convertirse en un retrato 1080 por 1350 sin visitar un servidor de procesamiento de imágenes. Social Image Resizer recibe un archivo del selector del navegador, valida su tipo y tamaño MIME y llama a createImageBitmap. Ese mapa de bits decodificado sigue siendo la fuente de cada salida seleccionada, por lo que un objeto local puede alimentar varios lienzos con formas diferentes.
La vista previa visible no es la exportación final oculta detrás de una solicitud de red. Es una representación de lienzo más pequeña del mismo estado de encuadre: proporción objetivo, zoom, desplazamiento, modo de ajuste y fondo. Exportar repeticiones posteriores que se representan en las dimensiones preestablecidas, codifica un Blob y entrega el Blob a los controles de descarga en la página.
La decodificación es local, pero esta herramienta también impone un límite de entrada 40 MB
El plan dice que la memoria del dispositivo es el único límite práctico, pero la ruta de entrada enviada también tiene un límite de archivos 40 MB explícito. Se aceptan JPEG, PNG y WebP; otros tipos se rechazan antes de la decodificación. Después de esa puerta, createImageBitmap le pide al navegador que convierta los bytes del archivo comprimido en ancho, alto y píxeles decodificados utilizables por el lienzo.
Los píxeles decodificados pueden ocupar mucha más memoria que el archivo comprimido y cada lienzo de salida requiere su propia asignación. Por lo tanto, el renderizador llama a la protección del presupuesto de píxeles compartido antes de crear un lienzo. Esa es una segunda restricción orientada al dispositivo, no un permiso para prometer que cada archivo debajo de 40 MB se ajustará a cada salida solicitada en cada máquina.
drawImage escala un mapa de bits completo posicionado mientras los clips del lienzo de salida se desbordan
ToolAcre no calcula un rectángulo de recorte de origen y pasa ocho argumentos de origen y destino a drawImage. Calcula una escala a partir de las dimensiones de origen y de destino, posiciona todo el mapa de bits escalado y lo dibuja en un lienzo cuyos bordes recortan cualquier desbordamiento. En el modo de cobertura, ese recorte es el recorte; en el modo de contención, todo el mapa de bits permanece visible.
La distinción es importante porque recortar y cambiar tamaño no son sinónimos. Cambiar el tamaño cambia las dimensiones en las que se muestra el mapa de bits. El recorte elimina todo lo que se encuentre fuera del marco de salida finito. Una llamada a drawImage puede participar en ambos efectos aquí, pero el recorte se produce mediante la geometría del marco y el recorte en lugar de reescribir primero el archivo fuente.
Remuestreo bajo el capó: configuración de suavizado, qué sugerencia de "alta calidad" le pide al navegador que haga y por qué los resultados difieren ligeramente entre navegadores
Antes de dibujar, el renderizador habilita imageSmoothingEnabled y establece imageSmoothingQuality en alto. Esos son controles de lienzo del navegador, no una solicitud de un Lanczos, bicubic u otro kernel con nombre. La implementación no puede prometer muestras idénticas en todos los motores porque la API expone una sugerencia de calidad en lugar de la tabla de coeficientes exacta del navegador.
Una comparación útil mantiene fijos el origen, las dimensiones de salida y el navegador, luego inspecciona los bordes diagonales, las líneas finas y las texturas repetidas. Si otro navegador difiere ligeramente, eso no significa que la proporción objetivo haya cambiado. Significa que la misma solicitud geométrica pasó por una implementación de lienzo diferente, razón por la cual el artículo evita porcentajes inventados de rendimiento o calidad.
Codificación de la salida: convertir el lienzo nuevamente en un archivo de imagen codificado y ofrecerlo para descargar
El lienzo de exportación se convierte en un Blob a través de OffscreenCanvas.convertToBlob cuando ese método existe, o HTMLCanvasElement.toBlob en caso contrario. El usuario elige JPEG, PNG o WebP. Se proporciona un valor de calidad al codificador, aunque PNG no utiliza un control de calidad con pérdidas como lo hacen JPEG y WebP. El recuento de bytes resultante se mide, no se estima.
Para varios objetivos seleccionados, la herramienta crea cada Blob en secuencia, muestra sus dimensiones reales y su tamaño medido, y puede empaquetar los archivos ya codificados en un ZIP. El almacenamiento ZIP no mejora la compresión de imágenes aquí; el contenido señala que esos formatos ya están comprimidos. Tanto las descargas individuales como el archivo se originan a partir de bytes creados localmente.
Esta implementación realiza el trabajo de exportación en el hilo principal, no en un Web Worker.
El libro de trabajo dice que el trabajo pesado generalmente se ejecuta en un Web Worker, pero esta aplicación importa funciones de recorte y renderizado directamente en main.js y recorre los objetivos allí. No se crea ningún trabajador en la ruta inspeccionada. La página aún puede seguir siendo utilizable para trabajos ordinarios, pero se debe observar la capacidad de respuesta en lugar de atribuirla a una arquitectura que no está presente.
El aislamiento de la red está respaldado por dos tipos de evidencia. Las pruebas principales instalan una protección de red y encuadran cada ajuste preestablecido sin intentarlo, mientras que las marcas de registro del producto se procesan localmente. Una verificación del panel de red en tiempo de ejecución puede agregar evidencia de implementación. Debería distinguir la carga de imágenes de los recursos de página ordinarios o los análisis divulgados en lugar de afirmar que toda la página no realiza solicitudes.
Lo que esto no cubre: bibliotecas de cambio de tamaño aceleradas por GPU y canalizaciones de imágenes del lado del servidor
Esta ruta se basa intencionalmente en primitivas del navegador en lugar de en una biblioteca de GPU o una canalización de medios remota. No expone un núcleo de remuestreo seleccionable, no compara algoritmos alternativos ni promete un procesamiento por lotes acelerado. Una imagen fuente produce varios cultivos; muchos archivos fuente no relacionados pertenecen a un flujo de trabajo diferente.
Esas exclusiones mantienen la promesa comprobable. El código demuestra la validación de archivos, la decodificación de mapas de bits, el encuadre aritmético, el dibujo de lienzo, la codificación de blobs y el ensamblaje de descargas. No demuestra cómo una granja de servidores cambiaría el tamaño de los mismos píxeles o qué ruta de GPU puede elegir un navegador internamente. Las reclamaciones se detienen en las API web observables utilizadas.
Conclusión: su navegador ya tiene un redimensionador integrado: Social Image Resizer lo controla por usted, recortando y escalando a la relación de aspecto de la plataforma sin cargar el archivo.
El navegador ya proporciona las operaciones esenciales, pero los resultados útiles dependen de la geometría correcta a su alrededor. Social Image Resizer elige la escala máxima para la cobertura, la escala mínima para contener, sujeta el movimiento, obtiene una vista previa de la guía del área segura por separado y exporta en las dimensiones exactas del objetivo. Esa orquestación convierte una API de dibujo de bajo nivel en un flujo de trabajo repetible de activos sociales.
Pruebe la canalización con una imagen original en lugar de una copia previamente reducida. Elija una herramienta actual preestablecida o una relación personalizada, mueva el tema, exporte una vez e inspeccione las dimensiones descargadas. La evidencia es el archivo local que recibe y la ruta del código que lo creó, no una afirmación de que cada navegador utilice un remuestreador oculto idéntico.