Как сжать BLOB-изображение, хранящееся в браузере, используя javascript или реагировать и загрузить на сервер

Question

Задание, выполненное мной

1. Выберите изображение с помощью ввода файла <input type="file" accept="image/*" multiple="multiple" />

2. Создание URL объекта с использованием url: URL.createObjectURL(file[0]). например, url = blob: http://0.0.0.0:5002/e468fb70-d597-4b17-bb3a-ec6272f2d7fe.

3. Отображение изображения на веб-странице с использованием <img src={ url } width="100px" height="100px" />

Теперь я хочу сделать ,

1. Чтение и сжатие изображения из URL = блоб: http://0.0.0.0:5002/e468fb70-d597-4b17-bb3a-ec6272f2d7fe

2. Загрузить сжатое изображение на сервер

Этот проект находится в реакции. Ваше предложение будет полезно для меня.

Answer 1

1. Считайте BLOB-объект как ArrayBuffer с помощью FileReader, затем нарисуйте его на холсте, затем сожмите и извлеките сжатый BLOB.

Исходный код

2. BLOB-объекты могут быть отправлены на сервер, как и любые другие данные в теле, для этого ничего особенного не требуется.