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，但它确实模拟了 canvas 元素

我认为我需要的是围绕这个画布做一个包装

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')中不支持仅图像/PNG

4

2 回答 2

1

先导出为image/png，再转成webp。除非您通过自己的修改自己构建 nodeJS（很复杂！），否则没有其他方法。要将 png 图像转换为 webp，请使用https://github.com/lovell/sharp或https://github.com/Intervox/node-webp之类的库，并在转换完成后清理源图像。

目前，只有 Chrome 支持将画布内容直接导出到 webp。

于 2015-05-30T12:19:32.723 回答
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 回答