画布状态

Question

这是将jpg或png转换为 webp

的工作代码谷歌的新图像格式比jpg或png的平均小30-40％

1.打开Chrome

2.设置质量

3.在页面内删除图像

4.等待（取决于尺寸......先试试小图片）

5.悬停图片以查看尺寸差异

6.要正确保存为webp，只需点击它

即可

Basycally chrome添加了将图像/ webp和质量添加到toDataURL函数的可能性

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

Answer 1

画布状态

这是known issue with Chrome。

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

WebCore丢弃toDataURL（“image / webp”）和中的alpha通道   从RGB像素编码图像，因为WEBP从不支持   alpha通道。 toDataURL（“image / webp”）就是这样的   http://trac.webkit.org/changeset/99319（一年前发货）。

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

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

可能的解决方法

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

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

（但即使它们包含Alpha频道，Chrome也可能无法解码webp图像。）。

结论

即使谷歌（发明人）拥有自己的Chrome，目前支持alpha通道的网络图片也支持不佳，并且在其他浏览器中缺乏支持。我的建议是你把它放在冰上，直到支持得到改善，而不是使用PNG，因为这有广泛的支持。

使用tinypng.com等工具缩小文件大小。

Answer 2

Compresspic可以更好地支持压缩PNG，BMP，JPEG，GIF等任何类型的图像。如今，许多网站都无法接受高MB的图像。因此，您可以使用compresspic工具根据需要压缩图像。

在客户端图像到webp转换器...但png不透明

2 个答案:

画布状态

可能的解决方法

结论