coc*_*cco 5 javascript canvas webp
这是一个将jpg或png转换为webp的工作代码
谷歌的新图像格式平均比jpg或png小30-40%
1.打开Chrome
2.设置质量
3.在页面内删除图像
4.等待(取决于尺寸..先尝试小图片)
5.悬停图像以查看尺寸差异
6.要正确保存为webp,只需单击它即可
Basycally chrome添加了为toDataURL函数添加图像/ webp和质量的可能性
canvas.toDataURL('image/webp',quality(0-1))
压缩是太棒了.但我有一个小问题...... png不透明 ..
会是什么呢？也许将画布设置为透明？怎么样？
<!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.:为了获得最佳效果,每次使用jpg并重新加载页面,因为它只是附加每个新图像
小智 5
从上面链接的评论中可以看出:
WebCore丢弃toDataURL("image/webp")中的alpha通道,并对RGB像素中的图像进行编码,因为WEBP从不支持alpha通道.自http://trac.webkit.org/changeset/99319(一年前发货)以来,toDataURL("image/webp")就是这样 .
WEBP最近才添加了对alpha通道的支持,并且无法在toDataURL中选择它.我想,我们可以以某种方式强制它,但是默认编码应该是1)现在没有-α,还是2)alpha请求这个bug？
该问题目前尚未解决,但很可能在不久的将来得到解决.
对于可能的解决方法,您可以使用WEBP格式的自定义实现,该格式表明它支持alpha通道.它可以将PNG(和JPEG)转换为WEBP格式.
该解决方案称为WEBPJS,可在此处找到(此处可以找到示例).
(但即使它们包含alpha通道,Chrome也有可能无法解码webp图像.).
即使谷歌(发明人)拥有Chrome,目前支持alpha通道的网络图片也支持不佳,并且在其他浏览器中缺乏支持.我的建议是你把它放在冰上,直到支持得到改善,而使用PNG,因为这有广泛的支持.
使用tinypng.com等工具来减小文件的大小.