All geek questions in one place

On-the-fly client image for webp converter ... but png is not transparent

this is working code to convert jpg or png to webp

Google’s new image format, which is on average 30-40% smaller than jpg or png

1.Open Chrome with

2. Set quality

3. Draw an image inside the page

4.Wait (depends on size .. try small images first)

5.Find image to see size difference

6. To save it as webp, just click on it.

Base chrome adds the ability to add image / webp and quality to the toDataURL function

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

The compression is fantastic. But I have a little problem ... png is not transparent ..

what could it be? Is transparency possible? as?

 <!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 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.:for best results, use jpg and reload the page every time it just adds every new image

+4
source share
2 answers

Canvas condition

This is a known issue with Chrome .

From the comments on the link above, it says:

WebCore discards the alpha channel in toDataURL ("image / webp") and encodes the image from RGB pixels, since WEBP has never supported the alpha channel. toDataURL ("image / webp") was like this http://trac.webkit.org/changeset/99319 (posted over a year ago).

WEBP only recently added alpha channel support, and there is no way to select this in toDataURL. We could do this one way or the other, I suppose, but if the default encoding is 1) no-alpha as now or 2) alpha, asking for this error?

The issue is currently unresolved, but is likely to be considered in the near future.

Possible workaround

For possible work, you can use a custom implementation of the WEBP format, which claims to support the alpha channel. It can convert PNG (and JPEG) to WEBP format.

The solution is called WEBPJS and can be found here (and examples can be found here ).

(but there is also the possibility that Chrome will not be able to decode web images, even if they contain an alpha channel ..).

Conclusion

alpha webp images are poorly supported at the moment, even if Google (the inventor) owns Chrome and does not support support in other browsers. My advice is that you put this on ice until the support is improved, and use PNG instead, as this has wide support.

Use tools like tinypng.com to reduce file sizes.

+6
source

Compresspic provides the best support for compressing any type of image such as PNG, BMP, JPEG, GIF, etc. Today, many websites cannot accept high MB images. Thus, you can use the compresspic tool to compress images to suit your needs.

+1
source

Source: https://habr.com/ru/post/1497671/

More articles:


All Articles