PySimpleGUI Graph Displaying an image directly

Question

I am trying to use Pysimplegui and its "graph" component to make an app such that the user can draw polygons on an image using the app. Here is a part of my code:

layout = [[sg.Graph(
    canvas_size=(length, width),
    graph_bottom_left=(0, 0),
    graph_top_right=(length, width),
    key="-GRAPH-",
    change_submits=True,  # mouse click events
    background_color='lightblue',
    drag_submits=True), ],]
window = sg.Window("draw rect on image", layout, finalize=True)
graph = window["-GRAPH-"]

Here length and width refers to the size of image I have. The only way which I know how to display the image is via graph.draw_image(path, location=(0,width)), where the path is the location of an png file.

My question is: Is there a way to display an image in graph that uses directly the image and not a path. (i.e. If I have an nd numpy array that represents an image, is it possible for me to directly make it show up in the canvas rather than first save as png then load the location?). Is it possible to avoid any kind of saving at all?

Intuitively, the method graph.draw_image reads the path and opens the image and then displays. There should be a method to avoid any saving and make graph directly display an image.

score 2 · Accepted Answer · answered Dec 24 '21 at 16:41

You can use option data here, but you need to convert image from array to data first.

def draw_image(self, filename=None, data=None, location=(None, None)):

Places an image onto your canvas.  It's a really important method for this element as it enables so much

:param filename: if image is in a file, path and filename for the image. (GIF and PNG only!)
:type filename:  (str)
:param data:     if image is in Base64 format or raw? format then use instead of filename
:type data:      str | bytes
:param location: the (x,y) location to place image's top left corner
:type location:  (int, int) | Tuple[float, float]
:return:         id returned from tkinter that you'll need if you want to manipulate the image
:rtype:          int | None

The data in array maybe just value for RGBA, no image format, like PNG. So I convert it from array to PIL.Image, then save it to data use io.BytesIO

Example code

from io import BytesIO
from PIL import Image
import numpy as np
import PySimpleGUI as sg

def array_to_data(array):
    im = Image.fromarray(array)
    with BytesIO() as output:
        im.save(output, format="PNG")
        data = output.getvalue()
    return data

font = ("Courier New", 11)
sg.theme("DarkBlue3")
sg.set_options(font=font)

im = Image.open("D:/Fandom.png")
array = np.array(im, dtype=np.uint8)
data = array_to_data(array)

width, height = 640, 480

layout = [[sg.Graph(
    canvas_size=(width, height),
    graph_bottom_left=(0, 0),
    graph_top_right=(width, height),
    key="-GRAPH-",
    change_submits=True,  # mouse click events
    background_color='lightblue',
    drag_submits=True), ],]
window = sg.Window("draw rect on image", layout, finalize=True)
graph = window["-GRAPH-"]
graph.draw_image(data=data, location=(0, height))

while True:

    event, values = window.read()
    if event in (sg.WINDOW_CLOSED, 'Exit'):
        break
    print(event, values)

window.close()

Thank you very much! This works for one single image. By the way, is it possible to do this a bit faster? That is, if I have like 200 arrays representing 200 images, running the method will take a while. — 温泽海, Dec 25 '21 at 17:15
Multithread or multiprocessing may work, but you need to find the answer by yourself, like https://stackoverflow.com/questions/26294013/can-i-accelerate-python-file-method-read-by-parallelism — Jason Yang, Dec 25 '21 at 17:22
Do you think it is possible to avoid any kind of saving at all? — 温泽海, Dec 25 '21 at 17:33
It only work if the image is already in the required format, like base64, PNG, GIF and PPM/PGM formats. — Jason Yang, Dec 25 '21 at 18:40
Care to elaborate? I indeed have cases which the image is in these formats. I just want to do anything I can to avoid saving. — 温泽海, Dec 26 '21 at 20:14

PySimpleGUI Graph Displaying an image directly

1 Answers1