Javascript изменить размер изображения, чтобы уменьшить его размер перед загрузкой на сервер?

Question

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

Код на стороне клиента на броузере приведен ниже ( Я использую ReactJS и машинопись). Я хочу использовать инструменты, доступные в коде broswer (не хочу устанавливать библиотеку и должен связать весь код javascript с клиентом)

Я могу изменить их размер на сервере, но не хочу использовать больше вычислительной мощности на сервере. Есть ли способ изменить их размер на клиенте, чтобы уменьшить его размер?

Я не хочу использовать холст для их перерисовки, основная цель - уменьшить размер.

 <input type="file" accept="image/*" onChange={async (ev) => {
                    if (ev && ev.target && ev.target.files) {

                        const formData = new FormData();
                        formData.append("file", ev.target.files[0],  "file.jpg");

                        if(imageHTMLComponent) {
                            const imageReader = new FileReader();
                            imageReader.onload = (ev) => {
                                if( ev.target && typeof ev.target.result === "string") {
                                    test.setAttribute('src', ev.target.result);
                                }
                            }
                            imageReader.readAsDataURL(ev.target.files[0]);

                            const response = await fetch(`https://localhost:8000/test?token=${encodeURI('hello')}&picture=1`, {
                        }

                    }

                Preview of the image:
                <img ref={(ref) => {setImageHTMLComponent(ref)}} />

Answer 1

Согласно этой ссылке вы можете использовать встроенные функции JavaScript и HTML5 Canvas для изменения размера изображения на стороне клиента. Я не пробовал инструкции в этом уроке, но в прошлом я использовал HTML5 Canvas для создания движка 2D RPG, который изменял размеры изображений. Однако это руководство идет дальше и объясняет, как создать изображение для тех целей, о которых вы просите. Просматривая это руководство, оно также предлагает альтернативы, если ваш собственный браузер не поддерживает определенные функции, такие как "toBlob".