Learn With Champak | TensorFlow.js Vision Series

How Does an Image Become a Tensor?

Build a 3 x 3 colour image, convert it with TensorFlow.js, and understand every dimension of the resulting tensor.

Run the Live Program

What you will learn

1. Pixels
How red, green and blue values represent colour.
2. Tensors
How an image becomes structured numerical data.
3. Shape
Why the result has the shape [3, 3, 3].
4. Memory
Why tensors should be disposed after use.

The complete journey

Canvas image → RGB pixel values → Rank-3 tensor → Machine-learning input

A machine-learning model cannot examine colours in the way that we do. It receives numbers. In this lesson, TensorFlow.js becomes the bridge between the image that we see and the numerical tensor that a model can process.

Try the complete program

Press Convert Image to Tensor. Before pressing it, predict the shape, rank and number of values.

Open Full-Screen Project

How an image becomes numbers

A digital colour image is a rectangular grid of pixels. Each pixel normally contains three channel values in this order: Red, Green and Blue (RGB).

Red pixel
[255, 0, 0]
Green pixel
[0, 128, 0]
Blue pixel
[0, 0, 255]

Channel values range from 0 to 255. A value of 0 means no contribution from that channel; 255 means maximum intensity. Every pixel therefore becomes a list of three numbers.

Understand the program step by step

Step 1: Load TensorFlow.js

The library is loaded from a Content Delivery Network (CDN), making TensorFlow.js tensor and browser-image functions available to JavaScript.

Step 2: Create a 3 x 3 canvas

The canvas contains only nine source pixels. Cascading Style Sheets (CSS) enlarge it to 240 x 240 pixels, while image-rendering: pixelated keeps the individual pixels visible.

Step 3: Draw nine coloured pixels

Nested loops visit each row and column. fillRect(column, row, 1, 1) draws one source pixel at the current position.

Step 4: Convert pixels into a tensor

const imageTensor = tf.browser.fromPixels(canvas);

tf.browser.fromPixels(canvas) reads the canvas and creates a tensor containing the RGB values of all nine pixels.

Step 5: Release browser memory

imageTensor.dispose() releases the tensor after its information has been displayed. This is important in applications that repeatedly process images or video frames.

Checkpoint: read the tensor

Shape
[3, 3, 3]
Rank
3
Data type
int32
Total values
27

[3, 3, 3] means 3 rows x 3 columns x 3 colour channels. Therefore, the tensor contains 3 x 3 x 3 = 27 numbers.

Practice: learn by changing the program

  1. Change one colour and observe which RGB values should change.
  2. Change the image to 4 x 4 and predict its tensor shape and size.
  3. Add imageTensor.print() before dispose().
  4. Explain why a greyscale image may need only one channel.
  5. Normalize the values by dividing the tensor by 255.

Quick knowledge check

Why is the tensor rank 3?

Because it has three dimensions: height, width and colour channels.

What would be the shape of a 5 x 4 RGB image?

[5, 4, 3]: five rows, four columns and three colour channels.

Why call dispose()?

To release the tensor's memory when it is no longer needed.

Continue learning with Champak Roy

Learn TensorFlow.js, JavaScript, machine learning and computer vision by building small programs that make every idea visible.

Explore More Lessons

Programmer's Picnic | Learn With Champak | Varanasi