Open a 'PNG' file, then numpy, then base64, but image not shown?

Question

Try to do some image processing, load an image to show on Graph, but nothing shown. Win10 / Python 3.7.6 / PySimpleGUI 4.16.0 / Numpy 1.18.1

I Load an image by PIL.Image, convert it to numpy array, then to base64, DrawImage in Graph, but show nothing. I had been work on it for serveral times and all OK. checked it for couple hours, but nothing help. Can someone help me to figure out where I missed or wrong ?

Something I found,

1. im open, im.show() OK
2. im.shape is correct, for example (200, 150, 3) for an 150 (width) x 200 (height) x RGB image.
3. im_np shown different data, it seems OK.
4. im_64 shown the byte string
5. draw is None, it should be a id.
6. with filename option set for DrawingImage, it is OK

I need to using numpy for some image process here, so conversion is required.

import base64
import numpy as np
import PySimpleGUI as sg
from PIL import Image

filename = 'D:/Disk.png'
im = Image.open(filename)
width, height = im.size
im_np = np.array(im)    # It is necesary for future process
im_64 = base64.b64encode(im_np)

def Graph(key):
    return sg.Graph(im.size, graph_bottom_left=(0, 0),
                    graph_top_right=(width, height), key=key)

layout = [[Graph('GRAPH')]]
window = sg.Window('Graph', layout=layout, finalize=True)

draw = window.FindElement('GRAPH').DrawImage(
    data=im_64, location=(width/2, height/2))           # It failed
    # filename=filename, location=(width/2, height/2))  # It working well

while True:

    event, values = window.read()

    if event == None:
        break

window.close()

Answer 1

You need to pass the PNG "as binary" encoded base64, not numpy array encoded as base64.

It's not so clear from PySimpleGUI documentation , but when passing data as base64, the data is not the raw data as base64, but the image file content as base64.

• Read PNG file as binary file:

   with open(filename, 'rb') as binary_file: #Read image file as binary data data = binary_file.read()

• Encode the binary representation as base64:

   im_64 = base64.b64encode(data)

• Pass im_64 as data :

   draw = window.FindElement('GRAPH').DrawImage( data=im_64, location=(width/2, height/2)) # Works

---

Here is a code sample:

import base64
import numpy as np
import PySimpleGUI as sg
from PIL import Image

#filename = 'D:/Disk.png'
filename = 'chelsea.png'

with open(filename, 'rb') as binary_file:
    #Read image file as binary data
    data = binary_file.read()

im = Image.open(filename)
width, height = im.size
im_np = np.array(im)    # It is necesary for future process
#im_64 = base64.b64encode(im_np)

# Encode the PNG binary representation 
im_64 = base64.b64encode(data)

def Graph(key):
    return sg.Graph(im.size, graph_bottom_left=(0, 0),
                    graph_top_right=(width, height), key=key)

layout = [[Graph('GRAPH')]]
window = sg.Window('Graph', layout=layout, finalize=True)

draw = window.FindElement('GRAPH').DrawImage(
    data=im_64, location=(width/2, height/2))          # Works
    #filename=filename, location=(width/2, height/2))  # It working well

while True:

    event, values = window.read()

    if event == None:
        break

window.close()

---

In case you want to display im_np , you may use the solution from the following post .

• Write im_np as PNG image to string:

   im_pil = Image.fromarray(im_np) with io.BytesIO() as output: im_pil.save(output, format="PNG") data = output.getvalue() im_64 = base64.b64encode(data)

---

Result: