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
