Javascript, изменение размера изображения и преобразование в base64

Я хочу изменить размер изображения и преобразовать его в base64 перед отправкой по сети. Это занимает так много времени, если изображение размером 10MB или больше, поэтому мне нужно сначала изменить его размер на передней панели, преобразовать его и затем отправить на сервер

html:

<div class="file__item ui-state-default current_ad current_ad_files">
       <img width="88px" height="88px" src="{{ photo.image.url }}" alt="">
       <input type="hidden" class="photo-base64" id="{{ photo.pk }}"
       value="{{ photo.get_base64_image }}" multiple>
       <a href="" class="file__delete" atr='sorok'></a>
</div>

js:

function convertToBase64(file, inputId) {
        var reader = new FileReader();
        reader.onload = function () {
            let base64String = reader.result.replace("data:", "")
                .replace(/^.+,/, "");
            $(`#${inputId}`).val(base64String)
        }
        reader.readAsDataURL(file);
    }

function getUploadedFileNode(file) {
        let randomId = getRandomID();
        return {
            inputId: randomId,
            node: `
            <div class="file__item ui-state-default file__item--sortable ui-sortable-handle">
                <img width="88px" height="88px" src="${URL.createObjectURL(file)}" alt="">
                <input type="hidden" class="photo-base64" id="${randomId}" value="" multiple>
                <a href="" class="file__delete"></a>
            </div>
            `
        }
    }

let addedFileNode = getUploadedFileNode(lastFile) // lastFile is an regular image from looping over multiupload
convertToBase64(lastFile, addedFileNode.inputId)

Этот вопрос очень актуален для меня сейчас, пожалуйста, помогите! Заранее большое спасибо!

PS: фронт написан на чистом javascript и jquery.

Вернуться на верх