Вы можете сделать это полностью на стороне клиента с помощью Canvas API, чтобы изображение никогда не покидало браузер пользователя.
Общий подход:
1. Считайте файл PNG с помощью элемента .
2. Загрузите его в объект изображения.
3. Нарисуйте изображение на холсте.
4. Экспортируйте холст в формате WebP с помощью Canvas.toBlob() или Canvas.toDataURL("image/webp").
Это сохраняет конфиденциальность пользовательских данных, позволяет избежать обработки на стороне сервера и хорошо работает в современных браузерах, поддерживающих WebP.
Логика высокого уровня:
- FileReader считывает изображение
- Image.onload рисует его на холсте
- Canvas.toBlob выводит файл WebP
Я создал небольшой инструмент, предназначенный только для браузера, который использует именно этот подход с использованием обработки на стороне клиента. Раскрытие информации: это мой собственный проект. Я добавил ссылку в первый комментарий для всех, кто хочет увидеть работающий пример.
Раскрытие информации: я создал небольшой конвертер только для браузера, который использует тот же подход Canvas на стороне клиента. Пример реализации: https://toolbly.com/file-converters/png-to-webp
Подробнее здесь: https://stackoverflow.com/questions/798 ... -them-to-a
