1

このコードを見ると、webp は png と jpg よりもはるかに優れています。

<canvas id="canvas"></canvas>
<script>
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 8, 8);

var webp = canvas.toDataURL("image/webp"); // Chrome only?
var png  = canvas.toDataURL("image/png");
var jpg  = canvas.toDataURL("image/jpeg");

console.log(webp.length, webp); //  263 byte
console.log(png.length, png);   // 1918 byte
console.log(jpg.length, jpg);   // 1938 byte

document.body.appendChild(new Image).src = webp;
document.body.appendChild(new Image).src = png;
document.body.appendChild(new Image).src = jpg;
</script>

ノードモジュールhttps://github.com/Automattic/node-canvasを使用しています

これはwebpをサポートしていませんが、キャンバス要素をシミュレートします

私が必要だと思うのは、このキャンバスのラッパーです

wrapper(canvas).toDataURL('image/webp');

多くの試みでわかったように、base64 png 画像を png から webp に変換するのは速度が悪いだけです。

webp は、websocket を介してすばやく転送するのに理想的なサイズです。webp がサポートされていない場合は、png にフォールバックすると、ユーザーのエクスペリエンスが遅くなります。

元の質問:

node.js では、文字列を base64 png から base64 webp に変換する方法が必要です。

アプリケーションの性質上、文字列と言います。これらの特定の画像を保存してから変換した場合 (画像の「ファイル」を変換する npm モジュールがいくつかあります)、これらの画像は一時的で、ユーザーごとにオンザフライであると想定されるため、サーバーは画像でいっぱいになります。ユーザーは、ページを移動するたびに約 100 の新しい画像を取得します。

ノード キャンバスcanvas.toDataURL('image/webp')では、image/png のみがサポートされていません

4

2 に答える 2

0

これは完全に機能します：

sharp(canvas.toBuffer()).toFormat(sharp.format.webp).toBuffer(function(e,webpbuffer){
                    var webpDataURL='data:image/webp;base64,'+webpbuffer.toString('base64');
                    });

また、ファイルを保存する必要はありません。node-canvas でイメージを作成し、そのイメージをクライアントに送信できます。

于 2015-05-30T19:20:05.313 に答える