Category: Tutorial

Prerequisite: Basic Python

There are plenty of formats to choose from when it comes to saving an image. This time I will choose .PNG format because it’s widely used and supports transparency.

The pillow library is a great choice for this task. Its Image module supports converting a numpy array into a wide range of image formats, including .PNG format.

The official website of pillow

To install pillow, run this command in terminal

1
pip install pillow

Next is the NumPy library. This library also plays a crucial role in my ML journey. This time I am only going to use its array object.

Now I have everything needed for today’s goal. But before that, I’d like to explain how the image is going to be saved in a bit more detail.

First of all, let’s get back to the grid system. Within a grid, there are pixels. Most importantly, each pixel stores one color. In this case, the pixels are aligned in such a way that it forms a 2D image.

This system can be perfectly converted into a “2D array” with each item in the array storing one color. Here comes something confusing. Each color is stored as a list. So instead like previously what we have discussed

1
# Example (Don't copy)
2
# Decimal code
3
 R    G    B
4
(255, 255, 255)

or

1
# Example (Don't copy)
2
# Hex code
3
 R G B
4
#FFFFFF

Now it’s

1
# Example (Don't copy)
2
# List
3
 R    G    B
4
[255, 255, 255]

so basically it turns into a list of 3 integers, with each integer representing a color value.

The next thing is to create a numpy array. In this case, we want a square 2D array with the length of grid. However, below I’ve created a 3D array instead.

1
from vcolorpicker import getColor
2
from vcolorpicker import rgb2hex
3
import tkinter as tk
4
import numpy as np
5

6
base_height = 800
7
base_width = 600
8
theme_color = '#383838'
9
canvas_len = 512
10
outline_width = 2
11
grid_len = 16
12
sqsize = canvas_len / grid_len
13
color = '#FFFFFF'
14
arr = np.zeros([grid_len, grid_len, 3], dtype=np.uint8)

This is because each element is a list of 3 integers, to be more precise, 3 unsigned 8-bit integers. Imagine we have three grids stack on the top of each other.

An alternative way to understand this is to imagine a 8 by 8 by 3 Rubik’s cube. Each piece contains a single number ranged from [0, 255]

Notice that an element in the array is not a piece; an element is 1 by 1 by 3 whereas a piece is 1 by 1 by 1, which means that an element is a stack of 3 pieces, representing a full RGB code.

To modify the array according to index, i.e.

1
# Example (Don't copy)
2
arr[row, col] = [255, 255, 255]

Now go back to the canvas initialization for loop, add the above statement to fill the array with integer 255, which is equivalent to setting the entire canvas to color white.

1
for row in range(grid_len):
2
    for col in range(grid_len):
3
        x0 = row * sqsize + 3
4
        y0 = col * sqsize + 3
5
        rect = OnePixel(canvas, row, col,
6
                        x0, y0, sqsize, 'gray', outline_width)
7
        arr[row, col] = [255, 255, 255]

Now it’s a good time to visit another old friend, OnePixel. Here, I modified its set_color() function so that arr will be updated whenever a pixel is painted. In this way, array can track every pixel on the canvas.

1
from vcolorpicker import getColor
2
from vcolorpicker import rgb2hex
3
from vcolorpicker import hex2rgb
4
import tkinter as tk
5
import numpy as np
6

7
class OnePixel:
8
    def __init__(self, m_canvas, pixel_row, pixel_col,
9
                 start_x, start_y, size, outline, width):
10
        self.canvas = m_canvas
11
        self.id = self.canvas.create_rectangle((start_x,
12
                                                start_y,
13
                                                start_x + size,
14
                                                start_y + size),
15
                                               fill="white",
16
                                               outline=outline,
17
                                               width=width)
18
        self.canvas.tag_bind(self.id, "<ButtonPress-1>", self.set_color)
19
        self.row = pixel_row
20
        self.col = pixel_col
21

22
    def set_color(self, event=None):
23
        self.canvas.itemconfig(self.id, fill=color)
24
        m_rgb = hex2rgb(color[1:])
25
        arr[self.row, self.col] = [m_rgb[0], m_rgb[1], m_rgb[2]]

Finally, to save arr as .PNG format.

1
from vcolorpicker import getColor
2
from vcolorpicker import rgb2hex
3
from vcolorpicker import hex2rgb
4
from PIL import Image
5
import tkinter as tk
6
import numpy as np
7

8
base_height = 800
9
base_width = 600
10
theme_color = '#383838'
11
canvas_len = 512
12
outline_width = 2
13
grid_len = 16
14
sqsize = canvas_len / grid_len
15
color = '#FFFFFF'
16
arr = np.zeros([grid_len, grid_len, 3], dtype=np.uint8)
17

18

19
def save_arr_as_png():
20
    modified_arr = np.rot90(arr, k=1)
21
    modified_arr = np.flip(modified_arr, axis=0)
22
    image = Image.fromarray(modified_arr)
23
    image.save("talpia.png")

Notice that if you forgot to add the first two lines in the function, you will get a result flipped in the diagonal line. For example

You drew this.

However, it would be saved like this, so be sure to add those two lines.

1
button3 = tk.Button(base,
2
                    text='save',
3
                    command=save_arr_as_png)
4
button3.config(width=2, height=1)
5
button3.place(x=base_width / 2 - 200, y=700)

After saving, get

Awesome!

Find the code on my GitHub page, under the part_3 directory.

💗 If you liked this blog, consider following me on GitHub.

🍯 Happy Coding 🍯