6

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

4

2 回答 2

5

画布状态

这是Chrome 的一个已知问题。

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

WebCore 丢弃了 toDataURL("image/webp") 中的 alpha 通道并从 RGB 像素编码图像，因为 WEBP 从不支持 alpha 通道。toDataURL("image/webp") 自http://trac.webkit.org/changeset/99319（一年多前发布）以来一直是这样 。

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

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

可能的解决方法

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

该解决方案称为WEBPJS，可在此处找到（示例可在此处找到）。

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

结论

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

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

于 2013-09-11T04:32:07.727 回答
1

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

于 2015-08-19T09:24:28.160 回答