On the fly clientside image to webp converter...but png's are not transparent

StackOverflow https://stackoverflow.com/questions/18300226

  •  24-06-2022
  •  | 
  •  

Domanda

this is a working code to convert jpg or png to webp

google's new image format that is in average 30-40% smaller than jpg's or png's

1.Open with Chrome

2.Set The quality

3.Drop an image inside the page

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

5.Hover the image to see the size difference

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

Basycally chrome adde the possibility to add image/webp and the quality to the toDataURL function

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

The compression is fantastic.But i have a small problem... png's are not transparent..

what could it be? maybe set the canvas to transparent? how?

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

È stato utile?

Soluzione

Canvas status

This is an known issue with Chrome.

From the comments from the link above it's stated:

WebCore discards the alpha channel in toDataURL("image/webp") and encodes the image from the RGB pixels because WEBP never supported alpha channel. toDataURL("image/webp") has been that way since http://trac.webkit.org/changeset/99319 (shipped over a year ago).

WEBP only recently added support for alpha channel and there is no way to select that in a toDataURL. We could force it one way or the other, I suppose, but should the default encoding be 1) no-alpha as now, or 2) alpha as requesting in this bug?

The issue has currently not been solved but will likely be addressed in near future.

Possible work-around

For a possible work-around you can use a custom implementation of the WEBP format which states it supports 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 won't be able to decode webp images even if they contain alpha channel..).

Conclusion

webp images with alpha channel has poor support at the moment even with Google's (the inventor) own Chrome, and lack support in other browsers. My advice is that you put this on ice until support is improved and instead use PNG as this has wide support.

Use tools such as tinypng.com to reduce the sizes of the files.

Altri suggerimenti

Compresspic is render a better support to compress any type of image like that PNG, BMP, JPEG, GIF, etc. Today many websites can't accept high MB's images. So you can use compresspic tool to compress images as your need.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top