title: On the fly clientside image to webp converter...but png's are not transparent
body: <p>this is a working code to convert jpg or png to <strong>webp</strong></p>
  
  <p>google's new image format that is in average 30-40% smaller than jpg's or png's</p>
  
  <p>1.Open with Chrome</p>
  
  <p>2.Set The quality</p>
  
  <p>3.Drop an image inside the page</p>
  
  <p>4.Wait (depends on the size .. try small images first)</p>
  
  <p>5.Hover the image to see the size difference</p>
  
  <p>6.To properly save it as webp just click on it</p>
  
  <p>Basycally chrome adde the possibility to add image/webp and the quality to the toDataURL function</p>
  
  <pre><code>canvas.toDataURL('image/webp',quality(0-1))
  </code></pre>
  
  <p>The compression is fantastic.But i have a small problem... <strong>png's are not transparent</strong>..</p>
  
  <p>what could it be? maybe set the canvas to transparent? how?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  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;
  }
  &lt;/style&gt;
  &lt;script&gt;
  (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)
  &lt;/script&gt;
  &lt;title&gt;Image To Google's webp format&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form onsubmit="return false" oninput="o.value=v.valueAsNumber"&gt;
   &lt;label for="q"&gt;Choose the quality and then drop a image&lt;/label&gt;
   &lt;input name="v" id="q" type="range" min="0" max="100" value="0"&gt; 
   &lt;output for="q" name="o"&gt;0&lt;/output&gt;/100
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>ps.:for best results use jpg's and reload the page every time as it just appends every new image</p>