Render RGBA для PNG в чистом JavaScript?

Скажем, у меня есть элемент canvas, и мне нужно повернуть изображение на холсте в PNG или JPEG. Конечно, я могу просто использовать canvas.toDataURL, но проблема в том, что мне нужно сделать это двадцать раз в секунду, а canvas.toDataURL - очень медленно - настолько медленный, что процесс захвата пропускает кадры, потому что браузер занят преобразованием в PNG.

Моя идея - вызвать context.getImageData(...), который, очевидно, намного быстрее, и отправить возвращенный CanvasPixelArray веб-рабочему, который затем обработает необработанные данные изображения в PNG или JPEG. Проблема в том, что я не могу получить доступ к native canvas.toDataURL из веб-рабочего, поэтому вместо этого мне нужно прибегнуть к чистому JavaScript. Я попытался найти библиотеки, предназначенные для Node.js, но те написаны на С++. Существуют ли библиотеки в чистом JavaScript, которые будут передавать необработанные данные изображения в PNG или JPEG?

Ответы

Ответ 1

Я смог написать свой собственный PNG-кодер, который поддерживает как RGB, так и палитру в зависимости от количества цветов. Он предназначен для работы в качестве веб-рабочего. Я открываю его как usain-png.

Ответ 2

Было несколько портов JavaScript libpng, в том числе pnglets (очень старый), data: demo и PNGlib.

PNG spec сама по себе довольно проста - самая сложная часть, которую вы можете иметь, заключается в том, чтобы реализовать простой кодер PNG, получая ZLIB (для которых также существует множество независимых реализаций JavaScript).

Ответ 3

На самом деле компилятор С++ для JavaScript называется Emscripten.

Кто-то сделал порт libpng, который вы можете проверить.