Show Large Image Using Scrollbar In Python

I would like to display an image using tkinter (Python 3). The image is very long. Therefore, I would like to add a vertical scrollbar. This is what I have tried: (based on this qu

Solution 1:

If you want a Scrollable image widget then the best way would be to create a class of Scrollable Image that'll arrange and look nicer to your code. So I created a class for the same and also added bind <MouseWheel> so one can scroll through their mouse to view the image more conveniently.

---

Here is the code sample

import tkinter

classScrollableImage(tkinter.Frame):
    def__init__(self, master=None, **kw):
        self.image = kw.pop('image', None)
        sw = kw.pop('scrollbarwidth', 10)
        super(ScrollableImage, self).__init__(master=master, **kw)
        self.cnvs = tkinter.Canvas(self, highlightthickness=0, **kw)
        self.cnvs.create_image(0, 0, anchor='nw', image=self.image)
        # Vertical and Horizontal scrollbars
        self.v_scroll = tkinter.Scrollbar(self, orient='vertical', width=sw)
        self.h_scroll = tkinter.Scrollbar(self, orient='horizontal', width=sw)
        # Grid and configure weight.
        self.cnvs.grid(row=0, column=0,  sticky='nsew')
        self.h_scroll.grid(row=1, column=0, sticky='ew')
        self.v_scroll.grid(row=0, column=1, sticky='ns')
        self.rowconfigure(0, weight=1)
        self.columnconfigure(0, weight=1)
        # Set the scrollbars to the canvas
        self.cnvs.config(xscrollcommand=self.h_scroll.set, 
                           yscrollcommand=self.v_scroll.set)
        # Set canvas view to the scrollbars
        self.v_scroll.config(command=self.cnvs.yview)
        self.h_scroll.config(command=self.cnvs.xview)
        # Assign the region to be scrolled 
        self.cnvs.config(scrollregion=self.cnvs.bbox('all'))
        self.cnvs.bind_class(self.cnvs, "<MouseWheel>", self.mouse_scroll)

    defmouse_scroll(self, evt):
        if evt.state == 0 :
            self.cnvs.yview_scroll(-1*(evt.delta), 'units') # For MacOS
            self.cnvs.yview_scroll(int(-1*(evt.delta/120)), 'units') # For windowsif evt.state == 1:
            self.cnvs.xview_scroll(-1*(evt.delta), 'units') # For MacOS
            self.cnvs.xview_scroll(int(-1*(evt.delta/120)), 'units') # For windows

---

How to use the class?

Treat ScrollableImage class as a widget of Tkinter and use just like you use any other Tkinter widget as every other widget is a class on their own if you see the source code of tkinter.

There are different ways through which you can use ScrollableImage.

1. Save the above code to a new <name>.py( for ex: "scrollimage.py" ) file as a package in the same directory and then import into your main class like from scrollimage import ScrollableImage and then use it as a normal widget.

2. Or you can keep the ScrollableImage class at the top after the imports of your main file and use it just like normal.

Example:

import tkinter as tk
# Import the package if saved in a different .py file else paste # the ScrollableImage class right after your imports.from scrollimage import ScrollableImage   

root = tk.Tk()

# PhotoImage from tkinter only supports:- PGM, PPM, GIF, PNG format.# To use more formats use PIL ImageTk.PhotoImage
img = tk.PhotoImage(file="logo.png")

image_window = ScrollableImage(root, image=img, scrollbarwidth=6, 
                               width=200, height=200)
image_window.pack()

root.mainloop()

---

The bind <MouseWheel> needs some modifications on windows like divide event.delta by 120. On macOS no modifications needed. And on X11 you need to bind both <Button-4>, <Button-5> and also divide event.delta by 120.

• Tkinter Mousewheel Binding

  For more details on bind <MouseWheel> and how it works on different platforms can check the above link.

• Best way to structure Tkinter application.

  You can refer to the above link to read in detail about how you can apply oops in Tkinter properly. When you use OOPs you can always inherit any widget of Tkinter and modify it to make new widgets and useful classes that'll help you to make an application with Tkinter better.

Solution 2:

Set the scroll region of the canvas after you draw the image:

canvas.create_image(0, 0, image=img, anchor="nw")
canvas.config(scrollregion=canvas.bbox(tkinter.ALL))

Solution 3:

Put the line:

canvas.config(scrollregion=canvas.bbox(tkinter.ALL))

after:

canvas.create_image(0,0,image=img, anchor="nw")

or canvas does not include image in scrollregion.