0

He estado buscando una forma de transformar imágenes con formato PNG, JPEG, JPG al formato WebP mediante JavaScript al ser subida a un formulario en el navegador

Sería el siguiente proceso: 1. El usuario sube la imagen 2. El navegador transforma la imagen 3. Manda el formulario

Mi idea era tomar una "captura de pantalla" a la propia imagen que se sube con jQuery y después guardarla con el formato de WebP, pero buscaba si hay otra forma de conseguirlo directamente con JavaScript

¿Alguien sabe si hay forma de conseguirlo? De verdad agradezco sus ideas

1
  • Desconozco el formato WebP, pero a lo mejor sacas conclusiones con el html2canvas el 30 may. 2020 a las 14:10

1 respuesta 1

0

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
let currentImg = "";
let webpImg = "";
let convertedImg = "";

function handleUploadedFile(ev){

  const file = ev.currentTarget.files[0];
  
  if(currentImg != "" || webpImg != "" || convertedImg != ""){
    URL.revokeObjectURL(currentImg);
    convertedImg = "";
    currentImg = "";
    webpImg = "";
  }
  
  currentImg = URL.createObjectURL(file);
  
  webpImg = new Image();
  
  webpImg.onload = ()=>{
     canvas.width = webpImg.naturalWidth;
     canvas.height = webpImg.naturalHeight;
     ctx.drawImage(webpImg, 0, 0, canvas.width, canvas.height);
     convertedImg = canvas.toDataURL("image/webp", 1.0);
     console.log(convertedImg);
  }
  
  webpImg.src = currentImg;
}
<input type = "file" accept = "image/*" onchange = "handleUploadedFile(event)">

De hecho te tengo buenas noticias, resulta y pasa que puedes transmutar cualquier imagen que sea soportada por los navegadores a el formato webp puesto que se sabe que la mayoria de los navegadores soportan el formato de imagen webp, ese ejemplo de arriba demuestra que si es posible transmutar una imagen de algun formato soportado por el navegador a webp sin necesidad de enviarlo al servidor!, es realmente genial!.

Sin embargo como siempre hay malas noticias...

Resulta que el método canvas.toDataURL que es el que hace la magia aquí, solo soporta como output de imagen en la mayoria de navegadores los tipos image/jpeg e image/png hasta donde se no soportan ningun otra extensión, excepto el navegador google chrome el cuál SI soporta la extensión webp como output de canvas.toDataURL.

Por lo cuál se hace dependiente que el usuario si o si este usando el navegador Google Chrome para usar esta opción, otros navegadores como firefox u opera no soportan la extensión de archivo webp para el caso del metodo canvas.toDataURL pero si soportan la visualización y carga de estas.

Por lo que esta solución funcionará solo para aquellos usuarios que utilicen el navegador Google Chrome en cualquier otro navegador el formato por defecto de output es image/png.

Ahora bien, voy a explicar solo aquellas cosas que pueden resultarte nuevas, como por ejemplo:

  • URL.createObjectURL: Crea un enlace único de un recurso en base a un tipo Blob o un tipo File leyendo su data, este link NO es publico, y solo es usable en la misma ventana del navegador (acceso remoto imposible y prohibido).

  • URL.revokeObjectURL: Destruye los datos cargados en la URL para liberar el espació que estaba usando la URL, es bueno usarlo cuando este seguro de que ya no requieres ese recurso.

  • new Image(): Podemos construir imagenes desde javascript, pero no te equivoques, como parametros no recibe la imagen, si no las dimensiones de la imagen, es por ello que mas adelante asignamos un src como si se tratase de un elemento img obtenido desde JS.

  • ctx.drawImage: Asumo que te es familiar este metodo, sin embargo lo no familiar puede ser el contexto en el que es usado, verás usamos este metodo para que al redimensionar el canvas podamos pintar la imagen extraida desde el input file, la manera de hacerlo es primero pintando la imagen en el canvas y luego extrayendo sus pixeles, es por eso que primero necesitamos dibujarla en el canvas (aunque el canvas no sea tecnicamente visible se puede).

  • canvas.toDataURL: Este método se usa para extraer todos los pixeles del area del canvas y convertirlos a una imagen, como parametros recibe el tipo de imagen de output y la calidad con la que se verá la imagen output, donde 0.1 es lo minimo y 1.0 es lo maximo, por default si omitimos este parametro el valor por defecto es 0.92.

Bien, ahora ya sabemos que si es posible hacer lo mismo sin siquiera enviar la imagen al servidor para convertirla a webp pero bajo una muy mala condición:

Solo servirá en Google Chrome.

Aunque si aún así deseas usar este método, entonces seguro te preguntaras...

¿Y como rayos hago para pasar un string en base64 a una imagen descargable?

La respuesta es sencilla...

Verás, el formato que nos devuelve canvas.toDataURL no es directamente base64 si no una URI en formato base64, el cuál es legible directamente por una etiqueta img siempre y cuando tenga el formato adecuado, así que lo único que debes hacer para que la imagen sea descargable es, a esta nueva data obtenida como base64 cargarla en un elemento img, y una vez cargada la data puedes setear el atributo download en ella para que sea descargable al darle click, donde tu nuevo string en base64 se verá algo parecido a esto:

data:image/webp;base64,iVBORw0KGgoAAAANSUhEUgAAAUA

Y muchos mas caracteres, es justo esta parte:

data:image/webp;base64,

Lo que le indica al navegador el tipo de dato que debe intentar cargar y reproducir, lo que hace la magia que permite que nosotros veamos una imagen tal cuál por medio de un string en base64, que a fin de cuentas es simplemente una codificación diferente que contiene la data de la imagen.

Resumiendo esto en un ejemplo, despues de esta parte de aquí:

convertedImg = canvas.toDataURL("image/webp", 1.0);

puedes usar convertedImg como src de la imagen directamente, quedando así:

convertedImg = canvas.toDataURL("image/webp", 1.0);
const imgToDownload = new Image(canvas.width, canvas.height);

imgToDownload.onload = ()=>{
   imgToDownload.download = "";
   document.body.appendChild(imgToDownload);
}

imgToDownload.src = convertedImg;

De esta manera podrás descargar la imagen en su nuevo formato webp sin embargo si por alguna razón no te lo permite o simplemente no ocurre nada, entonces deberás usar un elemento a para encerrar a tu img de la siguiente forma:

HTML download Attribute

En caso de querer una solución que funcione en cualquier navegador web, me temo que por el momento hasta donde se en javascript no hay otra manera de transmutar imagenes directamente.

Para esto se requiere de un lenguaje del lado del servidor, el cuál tienes, por ejemplo PHP o nodejs cualquiera de tu preferencia, por el cuál puedes enviar la data de una imagen y convertirla a otra usando ciertas herramientas de la shell (se pueden ejecutar comandos de la shell desde php o nodejs).

Yo por ejemplo usaba una herramienta de la shell de linux en nodejs para obtener un frame de un video con el formato que desee de imagen usando ffmpeg, luego simplemente respondia al cliente con la data traida por el servidor y la usaba, sin embgaro ffmpeg es mas bien especializado en videos y audio no se si sea la mejor opción para imagenes, puesto que nunca he intentado transmutar el formato de una imagen a otra usando ffmpeg.

Una ultima cosa, y es que si lo que quieres es enviar la imagen ya transmutada por medio del formulario, resulta y pasa que existe una limitación, y es que el objeto FileList que devuelve ev.currentTarget.files es de solo lectura, por lo cuál, si deseas añadir esta nueva imagen no podras hacerlo de ninguna manera.

A menos claro que uses ajax para enviar la imagen...

No voy a ondar mucho en ajax, puesto que eso se presta para otra pregunta, sin embargo, lo correcto a la hora de enviar una imagen al servidor, no sería enviar la imagen como un string en base64 directamente, que es justo lo que obtendrías al usar el metodo canvas.toDataURL, así que voy a ayudarte en una cosa mas para poder pasar de un string en base64 a un tipo Blob, y luego de eso a un tipo File el cuál sería el formato ideal que deberías enviar por medio de ajax.

Para ello te redirijo a la siguiente pregunta en la que di una propuesta de solución:

Error 413 al intentar subir fotografia desde celular

Puede que por el titulo te suene a que no tiene nada que ver, sin embargo en mi respuesta explico las dos cosas relevantes:

como pasar de base64 a Blob y luego de un tipo Blob a un tipo File.

El porque de no usar simplemente el Blob o el base64 para enviarlo al servidor es por 2 razones:

  • base64 es una codificación de caracteres que es mas pesada que el formato original del archivo, pero es segura, al enviar datos en base64 puede ocurrir una perdida si la info es muy grande, ademas si usas PHP del lado del servidor un base64 no será detectado como recurso en la variable $_FILES de PHP, la cuál brinda información muy útil.

  • Blob es un tipo de formato usado para archivos de gran tamaño, difiere del formato en base64 puesto que se acerca mas al formato binario, ademas es mas ligero, pero para poder ser enviado se requieren cabeceras especiales y pueden corromperse los datos al ser enviados como un Blob plano, ademas la carga de envio será menos optima e inestable, ademas de no almacenarse en la variable $_FILES de PHP al ser enviada, haciendo que información útil no pueda ser recolectada directamente.

  • File es el formato contenedor de cualquier recurso cargado en un input tipo file o generado mediante un Blob (se pueden construir Blobs y a la vez tambien se pueden construir Files), el tipo File usa Blobs para crear un archivo con cierta información útil la cuál puede ser enviada directamente a los servidores, entre ellos PHP para posteriormente ser recolectada en la variable $_FILES de PHP así como su data, ademas permite escribir directamente el recurso en vez de tener que transformarlo para escribirlo. Es mas estable y rapido para el transporte que un Blob plano.

3
  • nota: ffmpeg tambien existe en windows, solo que la instalación es diferente, en linux puedes instalarlo desde la shell, en windows debe descargarse para simplemente ejecutarse desde la shell una vez lo tienes.
    – Layer
    el 30 may. 2020 a las 23:05
  • Nota importante 2: si intentas usar esto en un navegador diferente a chrome y luego reemplazar ya sea image/png o image/jpeg como truco para obtener un string con tipo image/webp como resultado la imagen estará corrupta (no funciona así).
    – Layer
    el 31 may. 2020 a las 0:12
  • Muchas gracias! Ocuparé las ideas que me ha dado! Realmente muchas gracias el 1 jun. 2020 a las 11:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.