【问题标题】：On the fly clientside image to webp converter...but png's are not transparent即时客户端图像到 webp 转换器...但 png 不透明
【发布时间】：2015-08-19 17:24:28
【问题描述】：

这是将 jpg 或 png 转换为 webp

的工作代码

Google 的新图片格式平均比 jpg 或 png 小 30-40%

1.用Chrome打开

2.设置质量

3.在页面内放一张图片

4.等待（取决于大小..先尝试小图像）

5.悬停图片查看大小差异

6.点击它即可正确保存为webp

基本上 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 并每次重新加载页面，因为它只是附加每个新图像

【问题讨论】：

也许 ... .globalAlpha 有一天需要测试一下。
downvote...解释一下？ alpha 现在可以在原生 js 中使用吗？

标签： javascript canvas webp

【解决方案1】：

画布状态

这是known issue with Chrome。

从上面链接的 cmets 中可以看出：

WebCore 在 toDataURL("image/webp") 和从 RGB 像素对图像进行编码，因为 WEBP 从不支持阿尔法通道。 toDataURL("image/webp") 从那以后就一直这样 http://trac.webkit.org/changeset/99319（一年多前发货）。

WEBP 最近才添加了对 alpha 通道的支持，没有办法在 toDataURL 中选择它。我们可以强迫它以一种方式或其他，我想，但默认编码应该是 1) no-alpha as 现在，还是 2) 在这个错误中请求 alpha？

该问题目前尚未解决，但可能会在不久的将来得到解决。

可能的解决方法

对于可能的解决方法，您可以使用 WEBP 格式的自定义实现，该格式声明它支持 Alpha 通道。它可以将PNG（和JPEG）转换为WEBP格式。

解决方案称为WEBPJS and can be found here（和examples can be found here）。

（但也有可能 Chrome 无法解码 webp 图像，即使它们包含 alpha 通道..）。

结论

即使使用谷歌（发明者）自己的 Chrome，带有 alpha 通道的 webp 图像的支持也很差，并且在其他浏览器中也缺乏支持。我的建议是，在支持得到改进之前，你应该把它搁置一旁，然后改用 PNG，因为它得到了广泛的支持。

使用tinypng.com 等工具来减小文件的大小。

【讨论】：

我添加了这个使用库的测试。您可以看到即使图像具有 alpha 通道，Chrome 也无法解码 alpha 通道（我冒着假设它确实如此的风险，因为我没有可用的工具来实际测试使用库创建的图像是否包含 alpha 通道）。 jsfiddle.net/AbdiasSoftware/ujSuS

【解决方案2】：

Compresspic 为压缩任何类型的图像提供了更好的支持，例如 PNG、BMP、JPEG、GIF 等。今天许多网站不能接受高 MB 的图像。因此，您可以根据需要使用compresspic 工具压缩图像。

【讨论】：