Python base64 in HTML - изображение разорвано

Question

Я пытаюсь сделать:

• сделать снимок экрана с помощью python -mss
• изменить размер и затем преобразовать в base64
• с помощью JS загрузить с помощью ajax используя python - flask обработчик запроса и вставьте результат в атрибут sr c в теге img, например data:image/png;base64,{{base64}}

HTML result:

get_base64_screenshot.py

import mss, cv2, base64
import numpy as np

MSS = mss.mss()

# screenshot
frame_bytes = MSS.grab(MSS.monitors[2])

# BGRA -> RGB
frame_array = np.array(frame_bytes)
frame_array = np.flip(frame_array[:, :, :3], 2)

# resize
frame_resized = cv2.resize(frame_array, (640, 360), interpolation = cv2.INTER_CUBIC)

# base64
frame_base64 = base64.b64encode(frame_resized)

Что я делаю не так? Я думаю, что это неправильное декодирование.

Answer 1

Вы кодируете необработанные данные изображения cv2 как base64, которые ваш веб-браузер не поймет. Вам необходимо кодировать необработанные данные изображения в jpg, а затем кодировать его.

# resize
frame_resized = cv2.resize(frame_array, (640, 360), interpolation = cv2.INTER_CUBIC)

encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), 90]
result, frame_encoded = cv2.imencode('.jpg', frame_resized, encode_param)

# base64
frame_base64 = base64.b64encode(frame_encoded)

фрагмент кода, взятый из здесь