這是一個工作代碼，以JPG或PNG轉換爲WEBP在飛客戶方圖像WebP的轉換器......但PNG的不是透明

谷歌的新圖像格式，是在較小的平均30-40％比JPG文件或png的

1.Open使用Chrome

2.將質量

3.Drop頁面

內的圖像0

4.Wait（取決於大小..嘗試小圖像第一）

5.Hover圖像看到的大小差異

6.To妥善保存爲WEBP只需點擊它

Basycally鉻ADDE添加圖片/ WEBP的可能性和質量達到toDataURL功能

canvas.toDataURL('image/webp',quality(0-1))

壓縮是fantastic.But我有一個小問題...... 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.:for最佳效果，請使用JPG格式的每一次重新加載頁面，因爲它只是追加每一個新的形象

來源

2013-08-18 cocco

也許... .globalAlpha需要測試那一天。 – cocco

downvote ...解釋？ alpha現在在原生js中工作嗎？ – cocco

帆布狀態

這是一個known issue with Chrome。

根據從鏈路評論上方它指出：

WebCore的丟棄在toDataURL（「圖像/ WEBP」）和 alpha通道從RGB像素編碼圖像，因爲WEBP從未支持 alpha通道。 toDataURL（「image/webp」）自 http://trac.webkit.org/changeset/99319（一年前發貨）以來一直如此。

WEBP最近才添加了對alpha通道的支持，並且沒有辦法在toDataURL中選擇該通道。我們可以強制它的一種方式或其他，我想，但應該默認的編碼是1）現在沒有-alpha作爲，或者2）alpha在這個bug中請求？

該問題目前尚未解決，但很可能會在不久的將來解決。

可能的變通

對於一個可能的方法，您可以使用其中指出它支持Alpha通道的WEBP格式的自定義實現。它可以將PNG（和JPEG）轉換爲WEBP格式。

該解決方案被稱爲WEBPJS and can be found here（和examples can be found here）。

（但也有可能Chrome瀏覽器無法解碼webp圖像，即使它們包含alpha通道..）。

結論

WEBP的alpha通道圖像具有目前甚至與谷歌的（發明者）自己的Chrome瀏覽器的支持欠佳，且缺乏其他瀏覽器的支持。我的建議是，你把這個問題放在冰上，直到支持得到改善，而使用PNG，因爲這有廣泛的支持。

使用諸如tinypng.com之類的工具來減小文件的大小。

來源

2013-09-11 04:32:07 K3N

我添加了這個使用庫的測試。您可以看到，即使圖像具有Alpha通道，Chrome也無法解碼Alpha通道（我承擔假設的風險，因爲我沒有工具可用於實際測試用庫創建的圖像是否包含Alpha通道）。 http://jsfiddle.net/AbdiasSoftware/ujSuS/ – K3N

Compresspic爲壓縮PNG，BMP，JPEG，GIF等任何類型的圖像提供了更好的支持。今天許多網站不能接受高MB的圖像。因此，您可以使用compresspic工具根據需要壓縮圖像。

來源

2015-08-19 09:24:28 waseem

在飛客戶方圖像WebP的轉換器......但PNG的不是透明

回答

帆布狀態

可能的變通

結論

相關問題