Измените размер изображений на стороне клиента с помощью svelte.js

Вы начали свой следующий большой проект, в нем есть функция, позволяющая пользователям загружать изображения, ваша команда согласилась назвать его Ultragram (вы сможете судить о моей нехватке креативности позже).

Ultragram - это здорово, у вас есть пользователи, и все довольны.

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

Что, если бы вы могли сэкономить место для хранения, полосу пропускания и улучшить общую производительность приложения? Оказывается, можно! путем сжатия файлов изображений на стороне клиента. Помните, что меньшие размеры файлов также означают меньшие счета от вашего облачного провайдера.

Загруженные файлы будут пережеваны вашим клиентским приложением, а сжатая версия будет отправлена на сервер.

Давай сделаем это!

Создать приложение Svelte

Прежде всего, давайте создадим изящное приложение.

npx degit sveltejs/template ultragram
cd ultragram && yarn
#Or if you are using npm
npx degit sveltejs/template ultragram
cd ultragram && npm install

Зависимости

Мы собираемся использовать замечательный пакет npm, который использует холст для изменения размера ваших изображений на стороне клиента, он был назван… держись за свои шляпы…, react-image-file-resizer !. И да, я тоже знаю, что это странно, но работает! Мы собираемся использовать его со стройным.

Установите его с помощью следующей команды:

yarn add react-image-file-resizer axios
#Or if you are using npm
npm add react-image-file-resizer axios

Для запросов POST нам понадобятся аксиомы.

Если вы используете компактный REPL, вы можете столкнуться с некоторым странным поведением после импорта пакета, я рекомендую использовать вашу локальную среду с VSCode, Atom или любым другим редактором, который вам подходит.

Стартовый проект

Все объяснено в приведенном ниже фрагменте, вставьте его в свой App.svelte.

Это было легко, да?