Image Viewer in Go

2025-12-20

Image viewer

So while surfing and wasting time on the YouTube platform, I came across this video by Daniel Hirsch’s channel. He built the image viewer in pure C(the language of God’s or something like that), using SDL/SDL2 GUI library. For the image format of PPM.

After seeing the whole video, I thought that wasn’t to hard now was it? Why not make one myself in Go. Just for fun. This is will also teach me about the image file’s that I was wondering about for sometime. So here is the blog of me just doing that.

GUI part

For the GUI part of the image viewer project, We will be using the Fyne library that helps in making the native applications in pure Go. Let’s first just write the code that will just open a window of 500 X 500 with the text Hello World written on it.

1
package main
2

3
import (
4
    "fyne.io/fyne/v2"
5
    "fyne.io/fyne/v2/app"
6
    "fyne.io/fyne/v2/widget"
7
)
8

9
func main() {
10
    a := app.New()
11
    w := a.NewWindow("Hello World")
12

13
    w.SetContent(widget.NewLabel("Hello World!"))
14
    w.Resize(fyne.NewSize(float32(500), float32(500)))
15
    w.ShowAndRun()
16
}

Run this code, and you output should be something like this output image . If your code is taking some time in compiling, that is fine because fyne takes the time compiling first time and the next subsequent compiles will be faster because of caching.

Parsing the Image file

Now onto the main meat of the image viewer. What image viewer does (based on my understanding) is that it reads the image file data, and then print the each pixel onto the GUI. So the image viewer reads the image file, checks the image format type, check the width and height of the image provided in the image, and then reads the pixel data of the row and column.

In this blog article we will be tackling with the PPM image file type, which is the easiest to parse I would say. You can read the of the file here.

In easy words, I will sum it up here:

The first line will be the filetype, either P3 or P6 followed by linefeed(‘\n’ char or 10 on ASCII chart).
There can be any amount of comment lines starting with ’#’ character, ending with linefeed(we have to ignore them).
The Second line will be the two number separated by space telling the width and height of the image in pixels.
The Third line will be the number representing the max value of the color(max value will be 255).
The Fourth line and after that will be the pixel data in RGB format, first number will tell the Red color data, next one Green and last one will tell about Blue color.

The P3 tell us that the pixel data will be in ASCII form, and P6 will tell that pixel data will be in Binary form.

Let’s see the example of the PPM P3 image type.

1
            p3image.ppm                     Decoding  the image
2
 +---------------------------------+
3
 | P3                              |    <- Image type
4
 | # This is a comment             |    <- Comment (ignore this)
5
 | 4 4                             |    <- Width and Height of image
6
 | 255                             |    <- Max pixel color value
7
 | 0 0 255 0 0 255 0 0 255 0 0 255 |    <- R G B value of a row and column
8
 | 255 0 0 255 0 0 255 0 0 255 0 0 |
9
 | 0 0 255 0 0 255 0 0 255 0 0 255 |
10
 | 255 0 0 255 0 0 255 0 0 255 0 0 |
11
 +---------------------------------+

Let’s make basic structure, Our code will take one parameter that will be PPM image file name.

1
package main
2

3
func main() {
4
    filePath := os.Args[1]
5
    parseImage(filePath)
6
}

–

1
package main
2

3
import (
4
    "fmt"
5
    "os"
6
    "path/filepath"
7

8
    "fyne.io/fyne/v2/app"
9

10
    "github.com/Vikuuu/go-image-viewer/imageutil/bmp"
11
    "github.com/Vikuuu/go-image-viewer/imageutil/ppm"
12
)
13

14
func parseImage(fp string) {
15
    fileName := filepath.Base(fp)
16
    ext := filepath.Ext(fileName)
17

18
    myApp := app.New()
19
    win := myApp.NewWindow(fileName)
20
    file, err := os.OpenFile(fp, os.O_RDONLY, 0o755)
21
    if err != nil {
22
        fmt.Fprintf(os.Stderr, "error: %v", err)
23
    }
24
    defer file.Close()
25
    switch ext {
26
    case ".ppm":
27
        ppm.ParsePPM(file, &win)
28
    default:
29
        fmt.Fprintln(os.Stdout, "Parser for this file not implemented")
30
    }
31
    win.ShowAndRun()
32
}

In the parseImage function, we will be taking the filepath. We will open the file, create the new application in the fyne and pass the *os.File and the fyne.Window to the ParsePPM function. Here we will be checking the extension of the file and then call to the appropriate image parser, so that we can extend it for other image types also.

Make new package in the root directory of your project, named imageutil/ppm, and create the file named parser.go

1
package ppm
2

3
import (
4
    "bufio"
5
    "fmt"
6
    "os"
7
    "strings"
8

9
    "fyne.io/fyne/v2"
10
    "fyne.io/fyne/v2/canvas"
11
)
12

13
func ParsePPM(f *os.File, win *fyne.Window) {
14
    // create a new reader on the file
15
    reader := bufio.NewReader(f)
16
    // read the first line containing P3 or P6
17
    fileType, err := reader.ReadString('\n')
18
    if err != nil {
19
        fmt.Fprintln(os.Stderr, err)
20
    }
21
    fileType = strings.TrimSpace(fileType)
22
    // width and height for the window
23
    var winW, winH int
24
    // iamge canvas that will show the image on the window
25
    imgCanvas := &canvas.Image{}
26
    switch line {
27
    case "P3":
28
        w, h, img := parseP3(reader)
29
        imgCanvas = canvas.NewImageFromImage(img)
30
        winW, winH = w, h
31
    case "P6":
32
        w, h, img := parseP6(reader)
33
        imgCanvas = canvas.NewImageFromImage(img)
34
        winW, winH = w, h
35
    default:
36
        fmt.Fprintln(os.Stderr, "File is not PPM image file")
37
    }
38

39
    (*win).SetContent(imgCanvas)
40
  (*win).Resize(fyne.NewSize(float32(winW), float32(winH)))
41
}

P6 PPM image parser

First we will be creating parser for the P6 image type, because it is easier. Till now we have read the first line and confirmed that the metadata for the PPM P6 file type is correct. Now we will be reading the rest of the file data.

1
package ppm
2

3
import (
4
    "color"
5
    "image"
6
    "io"
7
    "strconv"
8
)
9

10
func ParseP6(reader *bufio.Reader) (w, h int, img *image.RGBA) {
11
    // read second line
12
    var line string
13
    var err error
14
    for {
15
        line, err = reader.ReadString('\n')
16
        if err != nil {
17
            fmt.Fprintf(os.Stderr, "error reading the Dimensions line of PPM p6 file: %v\n", err)
18
        }
19
        // if the line is not comment break the loop
20
        if line[0] != '#' {
21
            break
22
        }
23
    }
24

25
    // width and height data is like this (250 250\n)
26
    // convert it into the slice
27
    dimensions := strings.Split(line, " ")
28
    // convert the string type into int type
29
    tempW, err := strconv.Atoi(strings.TrimSpace(dimensions[0]))
30
    if err != nil {
31
        fmt.Fprintf(os.Stderr, "%v\n", err)
32
    }
33
    // convert the string type into int type
34
    tempH, err := strconv.Atoi(strings.TrimSpace(dimensions[1]))
35
    if err != nil {
36
        fmt.Fprintf(os.Stderr, "%v\n", err)
37
    }
38

39
    // read third line that contains the max pixel value(e.g - 255)
40
    var maxPixelValStr string
41
    for {
42
        maxPixelValStr, err = reader.ReadString('\n')
43
        if err != nil {
44
            fmt.Fprintf(os.Stderr, "%v\n", err)
45
        }
46
        if maxPixelValStr[0] != '#' {
47
            break
48
        }
49
    }
50
    maxPixelValStr = strings.TrimSpace(maxPixelValStr)
51
    maxPixelVal, err := strconv.Atoi(maxPixelValStr)
52

53
    factor := uint8(255 / maxPixelVal)
54

55
    w = int(tempW)
56
    h = int(tempH)
57
    // Here we are creating an image type, with the width and height
58
    // of the image with the parsed w and h. Setting its starting point
59
    // to x=0, y=0
60
    img = image.NewRGBA(image.Rect(0, 0, w, h))
61
    for i := range h {
62
        for y := range w {
63
            // make a slice a byte of size 3, storing the RGB
64
            // value of the pixel
65
            colors := make([]byte, 0, 3)
66
            for len(colors) < 3 {
67
                // Read the byte from the reader that has the
68
                // pixel data, and append that data to the
69
                // colors slice
70
                c, err := reader.ReadByte()
71
                if err != nil {
72
                    if errors.Is(err, io.EOF) {
73
                        break
74
                    }
75
                    fmt.Fprintf(os.Stderr, "error: %v\n", err)
76
                }
77
                colors = append(colors, c)
78
            }
79
            // Set the value of x, y with the pixel value
80
            // that we parsed
81
            img.SetRGBA(y, i, color.RGBA{
82
                R: colors[0] * factor,
83
                G: colors[1] * factor,
84
                B: colors[2] * factor,
85
                A: 255,
86
            })
87
        }
88
    }
89

90
    // return the width, height of the image
91
    // and the image type that we built
92
    return w, h, img
93
}

This is a big function, but what it does is simple.

Ignores the comments.
It reads the dimension of the image(width and height).
Reads the maximum pixel value used. We need to scale the pixel data value.
Runs the loop and read the pixel value and builds the image from it.

We need the factor value and multiply it with the pixel color value. Suppose the max color value is 15. We need to scale that value to the 255. So the factor will be 17.

You can download a sample PPM P6 image from here. Run your code and pass the image path to it, and you should see the window open and see the image that you saw on the landing of the blog.

P3 PPM image parser

Now for the P3 PPM image. We need a little improvisation, because the pixel data is in the ASCII form not the binary form. And there can be multiple whitespaces between the pixel data. So for this we are going to create our own scanner, that will scan the pixel data and give us the integer value. I think we can do this by using the bufio scanner, but I am going to built it anyways for learning purpose. Here is the code just doing that.

1
package imageutil
2

3
import (
4
    "strconv"
5
    "unicode"
6
)
7

8
type Scanner struct {
9
    input        []byte
10
    position     int  // current position in input
11
    readPosition int  // current reading position
12
    ch           byte // current character
13
}
14

15
func NewScanner(input []byte) *Scanner {
16
    s := &Scanner{input: input}
17
    s.readChar() // Initialize first Character
18
    return s
19
}
20

21
// Read the next character
22
func (s *Scanner) readChar() {
23
    if s.readPosition >= len(s.input) {
24
        s.ch = 0
25
    } else {
26
        s.ch = s.input[s.readPosition]
27
    }
28
    s.position = s.readPosition
29
    s.readPosition++
30
}
31

32
// Skip all the whitespace character
33
func (s *Scanner) skipWhitespace() {
34
    for s.ch == ' ' || s.ch == '\n' || s.ch == '\r' || s.ch == '\t' {
35
        s.readChar()
36
    }
37
}
38

39
// Gives the next number in the scanner
40
func (s *Scanner) NextNumber() uint8 {
41
    s.skipWhitespace()
42
    b := s.readNumber()
43
    num, err := strconv.Atoi(string(b))
44
    if err != nil {
45
        panic("error: " + err.Error())
46
    }
47
    return uint8(num)
48
}
49

50
func (s *Scanner) readNumber() []byte {
51
    position := s.position
52
    for isDigit(s.ch) {
53
        s.readChar()
54
    }
55
    return s.input[position:s.position]
56
}
57

58
func isDigit(b byte) bool {
59
    return unicode.IsDigit(rune(b))
60
}

This code expert is mainly from my blog post of writing a lexer, you can read it here if you want. Now we will be using this in our P3 parser. The logic and code will be the same, but we will using after our scanner when we will move to reading the pixel data.

1
func ParseP3(reader *bufio.Reader) (w, h int, img *image.RGBA) {
2
    var line string
3
    var err error
4
    // read second line
5
    for {
6
        line, err = reader.ReadString('\n')
7
        if err != nil {
8
            fmt.Fprintf(os.Stderr, "error reading the Dimensions line of PPM p3 file: %v\n", err)
9
        }
10
        if line[0] != '#' {
11
            break
12
        }
13
    }
14

15
    dimensions := strings.Split(line, " ")
16
    tempW, err := strconv.Atoi(strings.TrimSpace(dimensions[0]))
17
    if err != nil {
18
        fmt.Fprintf(os.Stderr, "%v\n", err)
19
    }
20
    tempH, err := strconv.Atoi(strings.TrimSpace(dimensions[1]))
21
    if err != nil {
22
        fmt.Fprintf(os.Stderr, "%v\n", err)
23
    }
24

25
    // read third line (255)
26
    var maxPixelValStr string
27
    for {
28
        maxPixelValStr, err = reader.ReadString('\n')
29
        if err != nil {
30
            fmt.Fprintf(os.Stderr, "%v\n", err)
31
        }
32
        if maxPixelValStr[0] != '#' {
33
            break
34
        }
35
    }
36
    maxPixelValStr = strings.TrimSpace(maxPixelValStr)
37
    maxPixelVal, err := strconv.Atoi(maxPixelValStr)
38

39
    factor := uint8(255 / maxPixelVal)
40

41
    w = int(tempW)
42
    h = int(tempH)
43
    img = image.NewRGBA(image.Rect(0, 0, w, h))
44

45
    // Read all the data left in the reader
46
    input, err := io.ReadAll(reader)
47
    if err != nil {
48
        fmt.Fprintf(os.Stderr, "error: %v\n", err)
49
    }
50

51
    // Create the new scanner for the data read from the reader
52
    colorScanner := imageutil.NewScanner(input)
53
    for i := range h {
54
        for j := range w {
55
            colors := make([]uint8, 0, 3)
56
            for len(colors) < 3 {
57
                c := colorScanner.NextNumber()
58
                colors = append(colors, c)
59
            }
60
            img.SetRGBA(j, i, color.RGBA{
61
                R: colors[0] * factor,
62
                G: colors[1] * factor,
63
                B: colors[2] * factor,
64
                A: 255,
65
            })
66
        }
67
    }
68

69
    return w, h, img
70
}

Creating the scanner helped minimizing the code in the main parsing function and keep it same as the parsing P6.

And voila. We have our own image viewer in Go. Yippee.

Afterword

In this blog post,

We created an image viewer application for PPM image file type.
It helped us in understanding the image file types a little better.

GitHub Code Link - here

I have also built the parser for the Bitmap image file, maybe next part will be on that. Stay Tuned.

Just know this,

Reinvent the wheel, so that you can learn how to invent wheel

– a nobody

#go

#system-tools

#image-parser

#image-viewer