Sobre la marcha image del cliente al convertidor webp … pero los png no son transparentes

este es un código de trabajo para convertir jpg o png a webp

El nuevo formatting de image de Google es en promedio 30-40% más pequeño que el de jpg o png

1. Abrir con Chrome

2. Establecer la calidad

3. Despliegue una image dentro de la página

4.Espere (depende del tamaño … pruebe primero las imágenes pequeñas)

5. Pase la image para ver la diferencia de tamaño

6.Para savelo como webp, simplemente click él

Basycally Chrome agregó la posibilidad de agregar image / webp y la calidad a la function toDataURL

canvas.toDataURL('image/webp',quality(0-1)) 

La compression es fantástica. Pero tengo un pequeño problema … los png no son transparentes

¿qué podría ser? tal vez establecer el canvas en transparente? ¿cómo?

 <!doctype html> <html> <head> <meta charset="utf-8"> <style> html,body{ width:100%; height:100%; margin:0; padding:0; display:-webkit-flex; display: flex; } a{margin: auto;} .imG{ max-width:800px; max-height:400px; } form{ position:fixed; bottom:0px;left:0px; } </style> <script> (function(W){ W.URL=W.URL||W.webkitURL; var D; function init(){ D=W.document; D.body.addEventListener('dragstart',pdrop,false); D.body.addEventListener('dragenter',pdrop,false) D.body.addEventListener('dragover',pdrop,false); D.body.addEventListener('dragleave',pdrop,false); D.body.addEventListener('dragend',pdrop,false); D.body.addEventListener('drop',drop,false); } function readablizeBytes(bytes) { var s=['bytes','kB','MB','GB','TB','PB'],m=Math,e=m.floor(m.log(bytes)/m.log(1024)); return (bytes/Math.pow(1024,e)).toFixed(2)+" "+s[e]; } function pdrop(e){ e.stopPropagation(); e.preventDefault(); } function drop(e){ e.stopPropagation(); e.preventDefault(); console.log(e.dataTransfer.files[0]); var f=e.dataTransfer.files[0]; var i=document.createElement('img'); i.onload=function(e){ window.URL.revokeObjectURL(this.src); var b=document.createElement('canvas'); b.width=this.width;b.height=this.height; var c=b.getContext("2d"); c.drawImage(this,0,0); this.onload=function(){ this.className='imG'; var d=document.createElement('a'); g=f.name.split('.');g.pop(); d.download=g.join('')+'.webp'; d.href=this.src; d.title=readablizeBytes(atob(this.src.split(',')[1]).length)+' vs '+readablizeBytes(f.size); d.appendChild(this); D.body.appendChild(d); } this.src=b.toDataURL('image/webp',D.getElementsByName('o')[0].innerText*0.01); }; i.src=window.URL.createObjectURL(f); } W.addEventListener('load',init,false); })(window) </script> <title>Image To Google's webp format</title> </head> <body> <form onsubmit="return false" oninput="o.value=v.valueAsNumber"> <label for="q">Choose the quality and then drop a image</label> <input name="v" id="q" type="range" min="0" max="100" value="0"> <output for="q" name="o">0</output>/100 </form> </body> </html> 

ps .: para get los mejores resultados, use jpg y vuelva a cargar la página cada vez, ya que solo agrega cada nueva image

    2 Solutions collect form web for “Sobre la marcha image del cliente al convertidor webp … pero los png no son transparentes”

    Estado del canvas

    Este es un problema conocido con Chrome .

    De los comentarios del enlace de arriba se dice:

    WebCore descarta el canal alfa en toDataURL ("image / webp") y codifica la image desde los píxeles RGB porque WEBP nunca admitió el canal alfa. toDataURL ("image / webp") ha sido así desde http://trac.webkit.org/changeset/99319 (enviado hace más de un año).

    Recientemente, WEBP agregó soporte para el canal alfa y no hay forma de seleccionarlo en un toDataURL. Podríamos forzarlo de una forma u otra, supongo, pero ¿la encoding pnetworkingeterminada debería ser 1) no alfa como ahora, o 2) alfa como solicitada en este error?

    El problema no se ha resuelto actualmente, pero probablemente se tratará en un futuro próximo.

    Posible solución

    Para una posible solución alternativa, puede utilizar una implementación personalizada del formatting WEBP que indica que admite el canal alfa. Puede convertir PNG (y JPEG) a formatting WEBP.

    La solución se llama WEBPJS y se puede encontrar aquí (y los ejemplos se pueden encontrar aquí ).

    (pero también existe la posibilidad de que Chrome no pueda decodificar imágenes web aunque contengan un canal alfa …).

    Conclusión

    Las imágenes web con canal alfa tienen poco soporte en este momento, incluso con el propio Chrome de Google (el inventor), y carecen de soporte en otros browseres. Mi consejo es que pongas esto en hielo hasta que se mejore la compatibilidad y en su lugar utilices PNG, ya que tiene un amplio respaldo.

    Use herramientas como tinypng.com para networkingucir el tamaño de los files.

    Compresspic es un mejor soporte para comprimir cualquier tipo de image como PNG, BMP, JPEG, GIF, etc. En la actualidad, muchos sitios web no pueden aceptar imágenes de MB de alta calidad. Entonces puede usar la herramienta compresspic para comprimir imágenes según su necesidad.

    Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.