Offscreencanvas

Acabo de crear un conversor de formato de imágenes muy simple usando JavaScript del lado del cliente. Es un conversor muy simple que te permite convertir entre formatos de imágenes como lo son JPG, PNG, AVIF y WEBP. https://parzibyte.me/apps/conversor-imagenes/ Con este conversor puedes convertir de webp a png, webp a avif, webp a jpg y todas las combinaciones posibles entre estos formatos. El conversor es realmente rápido, basta con seleccionar el formato de salida, la calidad y listo, una vez que selecciones la imagen se va a descargar la misma imagen pero con el nuevo formato, así de simple. ...

La API de OffscreenCanvas permite trabajar con un canvas en JavaScript sin tener que usar un elemento <canvas> HTML. Hoy te voy a enseñar cómo convertir ese OffscreenCanvas a una imagen codificada en base64, ya que este OffscreenCanvas no permite usar toDataURL. ...

En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del lado del cliente para conocer los valores RGBA o red, green, blue y alpha (rojo, verde, azul, nivel alfa) sin necesidad de algún servidor. A lo largo de este artículo te voy a enseñar cómo recorrer los pixeles de una imagen con JavaScript del lado del cliente usando OffscreenCanvas y getImageData para leer los pixeles de una imagen desde el client-side. Prueba la demostración ya mismo en el siguiente enlace. Asegúrate de abrir la consola de depuración para que puedas apreciar cómo se imprime el RGBA de cada pixel de la imagen seleccionada: https://parzibyte.github.io/ejemplos-javascript/pixeles-imagen/ El ejemplo que te mostraré va a leer cada pixel de la imagen a partir de un input de tipo file, pero como siempre te digo: la imagen puede venir de cualquier lugar. Leer los pixeles de la imagen con JS sirve para esconder texto en una imagen con Esteganografía, por poner un ejemplo. ...