这是将 jpg 或 png 转换为 webp
的工作代码谷歌的新图像格式平均比 jpg 或 png 小 30-40%
1.用Chrome打开
2.设置质量
3.在页面内放置图片
4.等待(取决于大小..先尝试小图片)
5.悬停图片查看大小差异
6.要将其正确保存为 webp，只需单击它
基本上 chrome 添加了将图像/webp 和质量添加到 toDataURL 函数的可能性
canvas.toDataURL('image/webp',quality(0-1))
压缩很棒。但我有一个小问题...png 不透明..
它会是什么？也许将 Canvas 设置为透明？怎么办？
<!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 格式并重新加载页面，因为它只是附加每个新图像
最佳答案
Canvas 状态
这是一个 known issue with Chrome .
从上面链接的评论中可以看出:
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?
该问题目前尚未解决，但可能会在不久的将来得到解决。
可能的解决方法
对于可能的解决方法，您可以使用 WEBP 格式的自定义实现，声明它支持 alpha channel 。它可以将 PNG(和 JPEG)转换为 WEBP 格式。
解决方案称为WEBPJS and can be found here (和 examples can be found here )。
(但也有可能 Chrome 无法解码 webp 图像，即使它们包含 alpha channel ......)。
结论
带有 alpha channel 的 webp 图像目前即使在谷歌(发明者)自己的 Chrome 中也没有得到很好的支持，并且在其他浏览器中也缺乏支持。我的建议是在支持得到改善之前将其搁置一旁，而是使用 PNG，因为它具有广泛的支持。
使用 tinypng.com 等工具以减小文件的大小。
关于javascript - 即时客户端图像到 webp 转换器......但 png 不透明，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18300226/