Изменение размера изображения на стороне клиента с помощью JavaScript перед загрузкой

Изменение размера изображения на стороне клиента дает несколько преимуществ перед его загрузкой на сервер. Это снижает нагрузку на сервер, ускоряет рендеринг страниц и обеспечивает лучший пользовательский опыт.

Возможно ли изменение размера изображения на стороне клиента с помощью JavaScript?

Да, это возможно изменение размера изображений на стороне клиента с помощью JavaScript. Существуют алгоритмы с открытым исходным кодом, которые позволяют изменять размер без использования Flash.

Алгоритм изменения размера изображения на стороне клиента

Один из таких алгоритмов доступен на GitHub: https: //gist.github.com/dcollien/312bce1270a5f511bf4a. Он включает версии как на ES6, так и на обычном JavaScript, которые можно встроить в любое веб-приложение.

Пример использования

Чтобы использовать алгоритм:

1. Вставьте предоставленный код JavaScript на свою веб-страницу.
2. Определите входные данные для выбора файла и укажите тег изображения для отображения изображения с измененным размером.
3. В прослушивателе событий onchange для входных данных вызвать функцию изменения размера, предоставляемую алгоритмом. Укажите нужные размеры и функцию обратного вызова.
4. Функция обратного вызова получит большой двоичный объект измененного размера и флаг, указывающий, было ли изменение размера успешным.
5. Используйте возвращенный большой двоичный объект, чтобы установить атрибут src объекта тег изображения для предварительного просмотра изображения с измененным размером.

Функции

• Поддерживает как ES6, так и стандартный JavaScript.
• Автоматически определяет возможности браузера и применяет полифилы для оптимальной совместимости.
• Игнорирует анимированные изображения GIF для сохранения их целостности.