Как я могу загрузить изображение из JavaScript в запросе на публикацию с одного экрана и перенести его на другой экран в Flask?

После долгих поисков по нескольким источникам я нашел способ отправить изображение, хранящееся в JavaScript, в запросе POST на другой экран, а также загрузить изображение непосредственно из памяти на другую HTML-страницу.

Сначала, чтобы отправить картинку из JavaScript, я создал форму с методом POST именно для этого изображения:

 <form action = "/CropperScreen" method = "POST" id = "ImageForm" enctype = "multipart/form-data">
            <input name = "imageFile" id = "imageFile" hidden type = "file"/>
            <input hidden type = "submit">
    </form>

После этого я получаю входной файл, отвечающий за отправку изображения, и сохраняю его в переменной:

const fileInput = document.querySelector('#imageFile');

Затем я заполняю входной файл файлом и информацией о файле:

            // Get your file ready
            const myFileContent = [fileURL];
            const myFileName = 'test.png';
            const myFile = new File(myFileContent, myFileName);

            // Create a data transfer object. Similar to what you get from a `drop` event as `event.dataTransfer`
            const dataTransfer = new DataTransfer();

            // Add your file to the file list of the object
            dataTransfer.items.add(myFile);

            // Save the file list to a new variable
            const fileList = dataTransfer.files;

            // Set your input `files` to the file list
            fileInput.files = fileList;

Наконец, я нахожу форму и отправляю ее с помощью кода JavaScript:

document.getElementById("ImageForm").requestSubmit();

Некоторые из этих работ были основаны на: https://dev.to/code_rabbi/programmatically-setting-file-inputs-in-javascript-2p7i

Теперь, чтобы отобразить его на другом HTML-экране, я сначала получаю его от перенаправленного действия, указанного в форме, и сохраняю изображение в переменной:

@app.route('/CropperScreen',methods=['GET','POST'])
def cropper_screen():
    if request.method == "POST":
        imageFile = request.files.get('imageFile', '')

Затем я создаю объект BYTESIO() и использую функцию save() в объекте «изображение», чтобы сохранить изображение в виде байтового буфера:

imageIO = io.BytesIO()
imageFile.save(imageIO)

Буфер преобразуется в поток байтов, преобразуется в ASCII и преобразуется в base64, который затем анализируется в библиотеке urllib. Резольт добавляется в специальный синтаксис uri и отправляется на HTML-страницу:

uri = 'data:image/png;base64,' + urllib.parse.quote(base64.b64encode(imageIO.getvalue()).decode('ascii'))

        return render_template('CropperScreen.html',uri=uri)

Наконец, на HTML-странице синтаксис uri используется в разделе «src» тега img следующим образом:

<img id = "image" src = "{{ uri }}">

Идея буфера и uri была основана на этом ответе: https://stackoverflow.com/a/70849754/17870878