Node.js 快速画布到 webp答案

【问题标题】：Node.js quick canvas to webpNode.js 快速画布到 webp
【发布时间】：2015-08-12 18:18:51
【问题描述】：

如果你看这段代码，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

【问题讨论】：

标签： node.js base64 webp

【解决方案1】：

这很好用：

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

而且我不必保存任何文件来执行此操作。我可以使用 node-canvas 创建图像，然后将图像发送到客户端。

【讨论】：

不要使用这个建议！经过大量测试后，此方法比传输 png 慢，因为添加到 Web 套接字传输超时的额外转换时间会影响传输更大的 png

【解决方案2】：

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

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

【讨论】：