Python base64 in HTML - broken image

Question

I try to do:

take screenshot using python-mss
resize and then convert to base64
using JS load by ajax using python-flask request handler and paste the result to src attribute in img tag like 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)

What am I doing wrong? I think it's wrong decoding.

syfluqs · Accepted Answer · 2020-02-29 16:39:28Z

3

You are encoding the raw cv2 image data as base64, which your web browser won't understand. You need to encode the raw image data to jpg and then encode it.

# 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)

code snippet taken from here

answered Feb 29, 2020 at 16:39

syfluqs

6781 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Python base64 in HTML - broken image

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related