Image serving and manipulation
Created by Eran Sandler (@erans) | http://eran.sandler.co.il | © 2018
Thumbla is a powerful microservice for image processing and manipulation. It provides secure access to images stored in private locations like cloud storage buckets, along with extensive image transformation capabilities.
You can pull the latest Docker image from DockerHub:
docker pull erans/thumbla:latest
SVG files are vector-based graphics that can be scaled to any dimensions. Since Thumbla needs to apply image manipulations, SVG files must first be rasterized (converted to PNG format).
To control the rasterization size, append dimensions to the SVG URL using this syntax:https://example.com/i/pics/subpath_inside_bucket%2Fmyfile.svg|{W},{H}/output:f=jpg
The parameters {W}
and {H}
specify the width and height in pixels for the rasterized output. For proportional scaling, use -1 for the dimension you want automatically calculated. For example:
https://example.com/i/pics/subpath_inside_bucket%2Fmyfile.svg|300,-1/output:f=jpg
This will rasterize the SVG at 300 pixels wide while maintaining the original aspect ratio.
If no dimensions are specified, Thumbla will use the SVG’s default size, which is typically quite small.
With AWS S3 and Google Storage support you can allow access to only a specific folder within a private bucket.
HTTP/S - fetches files from HTTP/S URLs
images.example.com
only URLs that has this hostname will be fetches, others will be rejected.restrictPaths - an array of restricted paths that this instance of the fetcher will retrieve image from from. For example, if the restrictPaths is set to /img/
only URLs with that path will be fetched, others will be rejected.
restrictHosts and restrictPaths can be combined to restrict a certain host and a certain path, for example.
AWS S3 - fetches files from an AWS S3 bucket
secretAccessKey - the access key secret. Not needed if you are using IAM roles
To fetch from S3 buckets use URLs in the format of:http://s3-aws-region.amazonaws.com/bucket/path/file
Google Storage - fetches files from a Google Storage bucket
background
if the machine running Thumbla has access to that (or all buckets), otherwise set to file
file
Azure Blob Storage - fetches files from an Azure Blob Storage bucket
DigitalOcean Spaces - fetches files from a DigitalOcean Spaces bucket
Cloudflare R2 - fetches files from a Cloudflare R2 bucket
Fetched images can then be manipulated via manipulators such as:
The face crop manipulator automatically detects and focuses on faces in images while preserving the original aspect ratio. Since faces naturally draw human attention more than other image elements, this feature excels at creating engaging thumbnails and focused images that highlight the people in your photos.
The following facial detection services are supported:
Below is a demonstration of the face cropping process. The blue rectangles indicate detected faces, while the yellow rectangle shows the final crop area:
After cropping, the final image looks like this:
For a complete configuration example, refer to config-example.yml
.
The configuration file consists of two main components:
fetchers
- Defines the image source configurations. This section contains all required parameters for accessing different image sources, such as cloud storage credentials and HTTP/S access restrictions.
paths
- Specifies which URL paths are available on the server. You can configure multiple paths and map them to different fetchers, enabling a single server to retrieve images from various cloud services. All paths must end with a forward slash (/
) since Thumbla appends additional URL segments for request processing.
The URL structure follows a pattern that combines the configured path, source file location, and any image manipulations. Here’s how it works:
For a basic image request with a configured path /i/pics/
using an AWS S3 fetcher:https://example.com/i/pics/path%2Fto%2Fimage.jpg/output:f=jpg
The middle segment contains the URL-encoded path to your image within the bucket. For example, path%2Fto%2Fimage.jpg
represents path/to/image.jpg
. When using an HTTP fetcher, this can be a complete URL (as long as it’s properly encoded).
To apply image manipulations, add them as additional path segments:
Single manipulation (resize to 350px width):https://example.com/i/pics/path%2Fto%2Fimage.jpg/resize:w=350/output:f=jpg
Multiple manipulations (rotate then resize):https://example.com/i/pics/path%2Fto%2Fimage.jpg/rotate:a=35/resize:w=350/output:f=jpg
In the last example, the image is first rotated 35 degrees, then resized to 350px width while maintaining the aspect ratio. Manipulators are applied in the order they appear in the URL.
kubectl create configmap thumbla-config --from-file=thumbla.yml
You can then mount thumbla-config
as a volume inside your container and point to it using an environment varaible THUMBLACFG
. For example:
apiVersion: v1
kind: ReplicationController
metadata:
name: thumbla
spec:
replicas: 1
template:
metadata:
labels:
app: thumbla
spec:
containers:
- name: thumbla
image: erans/thumbla:latest
volumeMounts:
-
name: config-volume
mountPath: /etc/config
env:
-
name: THUMBLACFG
value: "/etc/config/thumbla.yml"
-
name: PORT
value: "8000"
ports:
- containerPort: 8000
volumes:
- name: config-volume
configMap:
name: thumbla-config
The above configuration will mount thumbla-config
map onto /etc/config
inside the container. The environment variable THUMBLACFG
points to the config file thumbla.yml
under /etc/config
(the mounted volume).