Node.js быстро холст WebP

Question

Если вы посмотрите на этот код 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'); 

Как я узнал о многих попытках преобразовать PNG-изображение base64 в webp из png, это просто плохая скорость.

webp будет идеальным размером для транспортировки через websockets быстро. Если webp не поддерживается, я бы отказался от png, и у пользователя будет более медленный опыт.

---

Оригинал Вопрос:

В node.js мне нужен способ, чтобы преобразовать строку из base64 PNG в base64 WebP.

Я говорю строку из-за природы моего приложения. Если бы я сохранил эти конкретные изображения, тогда их преобразовать (есть некоторые модули npm, которые преобразуют файлы изображений), мой сервер будет заполнен изображениями, так как эти изображения предполагается временными и «на лету» для каждого пользователя, каждый пользователь получает новые около 100 новых изображений, когда они перемещают страницу.

В узле холст canvas.toDataURL('image/webp') не поддерживается только изображение/PNG

Answer 1

Первый экспорт в качестве изображения/PNG, а затем преобразовать в WebP. Нет другого пути, если вы сами не создадите nodeJS своими собственными модификациями (сложный!). Чтобы преобразовать png-изображение в webp, используйте библиотеку, например https://github.com/lovell/sharp или https://github.com/Intervox/node-webp, и очистите исходное изображение после завершения преобразования.

В настоящее время только Chrome поддерживает экспорт содержимого холста непосредственно в webp.

Answer 2

Это отлично работает:

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

И у меня нет, чтобы сохранить файлы, чтобы сделать это. Я могу создать изображение с холстом узла, а затем отправить изображение клиенту.