Открытие изображения в PIL из JavaScript, Python Flask

Question

Здравствуйте уважаемые знатоки, при разработке своего веб приложения я столкнулся с неприятной проблемой. Мое приложение базируется на Flask. На веб странице генерируется <canvas> с изображением, при помощи JavaScript и мне нужно, чтобы при нажатии на кнопку, на той же странице изображение из этого канваса отправлялось в PIL для дальнейшей обработки. Я пытался использовать canvas.toDataURL() в JavaScript отправляя информацию на сервер через XHR:

JS

function handleSaveCropImage() {
    var savingImage = canvas.toDataURL("image/png");
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/p2', true);
    xhr.send(savingImage);
}

Python

@app.route('/p2', methods=['POST', 'GET'])
def p2():
    if request.method == 'POST':
        file = request.data
        print(file)
        # print(base64.b64decode(file + b'=='))

        bytes_file = decode_base64(file)

        # imageStream = io.BytesIO(base64.b64decode(file[22:]))
        # imageStream = io.BytesIO(bytes_file)

        imagePIL = Image.open(bytes_file)
        ...

Все, что в Python коде закомментировано - это мои попытки преобразовать полученные данные для понимания функцией Image.open(), но постоянно выдает ошибку (данные преобразуются не верно). Тогда я решил попробовать через canvas.toBlob(function(blob){return blob}, 'image/jpeg');, но тогда вообще никакая информация не поступает в request.data, как и в другие элементы request. Полагаю, что toBlob я делаю не правильно, но ничего лучше не нашел и не смог уже придумать.

Из всего выше сказанного поднимается вопрос - знаете ли вы, более эффективный способ передачи изображения на чистом JS в Python, чтобы PIL его нормально открывал или решение моей проблемы выше описанными методами?

Answer 1

РЕШЕНИЕ

Не могу сказать, что смог найти универсальное решение, НО если в JS отправлять на сервер не PNG а JPEG изображение то с кодировкой все отлично!

JS

function handleSaveCropImage() {
    var savingImage = canvas.toDataURL("image/jpeg");
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/p2', true);
    xhr.send(savingImage);
}

И потом спокойно декодируем в Python

if request.method == 'POST':
    file = request.data
    decode_file = base64.b64decode(file[22:]+b'=')
    imageStream = io.BytesIO(decode_file)
    imagePIL = Image.open(imageStream)

Профит!!

БЛОГ НА HUSL

Открытие изображения в PIL из JavaScript, Python Flask

Ответы (1 шт):