Convert between Image and Base64 in Qt and Python

Introduction

For the transmission of image, there are two common ways: one way is to transmit binary file directly, and another way is to transmit image data with base64 encoding. This post will focus on the base64 method.

Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format. A set of 64 characters chosen to represent the 64 digit values for the base varies between implementations. Data with Base64 encoding is unreadable for human, it’s widely used to transmit image/text in the HTTP environment.

Base64 encoding and Data URL come together, here is an example Data URL for a jpeg image:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAogAAOPU..............wcomhgbU1kULyQ17rEjetgpY

Base64 encoding is supported by the most framework and language, both Qt and Python have good support on it. I will show you how to do the convert between image and base64 data in Qt and Python, and how to send image data from HTML/Javascript.

Convert Between Image and Base64 in Qt

#include "qbuffer.h"

QString imageToBase64(const QImage &image)
{
    QByteArray data;
    QBuffer buffer(&data);
    image.save(&buffer, "JPG");
    data = data.toBase64();
    QString dataString = QString(data); // depend whether you need QString
    return dataString;
}

QImage base64ToImage(const QString &dataString)
{
    QByteArray data = dataString.toUtf8();
    QImage image;
    image.loadFromData(QByteArray::fromBase64(data));
    return image;
}

Convert Between Image and Base64 in Python

import re
import base64
from io import BytesIO
from PIL import Image

#  Convert base64 to Pillow image
def base64_to_pil(data_base64):
    data = re.sub('^data:image/.+;base64,', '', data_base64)
    buffer = BytesIO(base64.b64decode(data))
    pil_image = Image.open(buffer)
    return pil_image

# Convert numpy image (RGB) to base64 string
def np_to_base64(img_np):
    image = Image.fromarray(img_np.astype('uint8'), 'RGB')
    buffer = BytesIO()
    image.save(buffer, format="JPG")
    data_base64 = u"data:image/jpg;base64," + base64.b64encode(buffer.getvalue()).decode("ascii")
    return data_base64

Send Base64 Image from HTML/Javascript

Image encoded with Base64 can be embedded in HTML by using the <img> tag. The <img> tag has a src attribute and contains the Data URL of the image.

Assume that there is an image displayed in the webpage, here is the HTML snippet code:

<img id="image-example" src="/assets/images/example.jpg"/>

You can send the image using Fetch API with Javascript, see the following code.

var imageExample = document.getElementById("image-example");

// use src attribute to get base64 string
const imageBase64 = imageExample.src;

console.log(imageBase64) // data:image/jpeg;base64,/9j/4AAQSkZJRgABAogA.......wcgbU1kULyQ17rEjetgpY

// post image(base64) to server
fetch("http://your.server.ip/apixxx/", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({"image": imageBase64})
    // you can retrieve the base64 data in server side using request.json["image"] in python
})
  .then(
    // do somthing
  )
  .catch(err => {
    // handle error
  })