6

これは、jpg または png をwebpに変換する作業コードです。

jpg や png よりも平均 30 ～ 40% 小さい Google の新しい画像形式

1.Chromeで開く

2.品質を設定する

3.ページ内に画像をドロップ

4. 待ちます (サイズによって異なります。最初に小さな画像を試してください)。

5.画像にカーソルを合わせると、サイズの違いが表示されます

6.webpとして適切に保存するには、クリックするだけです

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 の既知の問題です。

上記のリンクからのコメントから、次のように述べられています。

WEBP はアルファ チャネルをサポートしていないため、WebCore は toDataURL("image/webp") のアルファ チャネルを破棄し、RGB ピクセルから画像をエンコードします。toDataURL("image/webp") は、 http: //trac.webkit.org/changeset/99319 ( 1 年以上前に出荷)以来、そのようになってい ます。

WEBP は最近アルファ チャネルのサポートを追加したばかりで、toDataURL でそれを選択する方法はありません。いずれかの方法で強制することもできると思いますが、デフォルトのエンコーディングは 1) 現在のようにアルファなしにするべきでしょうか、それとも 2) このバグで要求されているようにアルファにするべきでしょうか?

この問題は現在解決されていませんが、近い将来に解決される可能性があります。

考えられる回避策

考えられる回避策として、アルファ チャネルをサポートすることを示す WEBP 形式のカスタム実装を使用できます。PNG (および JPEG) を WEBP 形式に変換できます。

このソリューションはWEBPJS と呼ばれ、ここで見つけることができます(例はここで見つけることができます)。

(ただし、アルファ チャネルが含まれている場合でも、Chrome が webp 画像をデコードできない可能性もあります..)。

結論

アルファ チャネルを含む webp 画像は、現時点では Google (発明者) 自身の Chrome でもサポートが不十分であり、他のブラウザーではサポートされていません。私のアドバイスは、サポートが改善されるまでこれを氷上に置き、代わりに PNG を使用することです。これは幅広いサポートがあるためです。

tinypng.comなどのツールを使用して、ファイルのサイズを縮小します。

于 2013-09-11T04:32:07.727 に答える
1

Compresspic は、PNG、BMP、JPEG、GIF などのあらゆるタイプの画像を圧縮するためのより優れたサポートを提供します。今日、多くの Web サイトは高 MB の画像を受け入れることができません。したがって、compresspicツールを使用して、必要に応じて画像を圧縮できます。

于 2015-08-19T09:24:28.160 に答える