thumbor is an intelligent image service that has been open-sourced on GitHub. It supports on-demand cropping, resizing, applying filters, and optimizing images. If you have used object storage services, you may know that most object storage service providers also offer additional image processing services such as image cropping and watermarking. With thumbor, you can create your own image processing service similar to those provided by object storage service providers.

thumbor is developed using Python 3, and the official documentation provides various installation methods. In this article, I will share how to use Docker to set up an open-source image cropping service with thumbor.

Prerequisites & Installing Docker

If you haven't installed Docker, you can refer to my previous article on how to install Docker: Installing Docker and Common Docker Commands on Linux

It is also recommended to install Docker Compose for easier maintenance:

# Download docker-compose
curl -L "https://github.com/docker/compose/releases/download/1.25.5/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
# Add execute permission
chmod +x /usr/local/bin/docker-compose
# Create a symbolic link
ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose

Installing thumbor with Docker

The command provided in the official documentation is very simple. You just need one command to run Docker thumbor:

docker run -p 8888:80 minimalcompact/thumbor

After a successful run, you can access http://IP:8888/unsafe/275x0/https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png to crop the image. Here:

• 275 is the width (in pixels) of the cropped image
• 0 is the height of the cropped image. 0 means adaptive height
• The last part is the URL of the image to be cropped. In this case, it is the logo of Baidu

However, xiaoz does not recommend using the above command directly for normal use. Although it is simple, it lacks many custom parameter settings. Next, I will provide some parameters that I have used for your reference.

Installing thumbor with docker-compose

To facilitate future maintenance, it is recommended to use docker-compose for installation. First, create a directory mkdir thumbor.

Then, create a thumbor configuration file in this directory, named thumbor.conf. Here are the parameters I have used:

# Maximum width for cropping. The cropped image will not exceed this width (in pixels). The default is 0 (unlimited).
MAX_WIDTH = 1200
# Maximum height for cropping. The cropped image will not exceed this height (in pixels). The default is 0 (unlimited).
MAX_HEIGHT = 800
# Minimum width for cropping. The cropped image will not be smaller than this width (in pixels). The default is 1.
MIN_WIDTH = 50
# Minimum height for cropping. The cropped image will not be smaller than this height (in pixels). The default is 1.
MIN_HEIGHT = 50
# Allowed image sources for cropping. Supports regular expressions and multiple images.
ALLOWED_SOURCES = ['.+\.baidu\.com', '.+\.bmp\.ovh']
# Quality of the cropped image. The default is 80.
QUALITY = 80
# Number of seconds the image should remain in the browser cache. It is directly related to the Expires and Cache-Control headers.
MAX_AGE = 7 * 24 * 60 * 60
# A much lower expiration time for the image cache will be helpful when images fail or are delayed in detection and are queued. This way, the browser will request the correct image faster.
MAX_AGE_TEMP_IMAGE = 60
# The storage engine for storing the cropped images. The example below stores them in local storage for caching purposes.
RESULT_STORAGE = 'thumbor.result_storages.file_storage'
# Expiration time for the original images.
STORAGE_EXPIRATION_SECONDS = 864000
# Expiration time for the cropped images.
RESULT_STORAGE_EXPIRATION_SECONDS = 864000
# Location to store the cropped images.
RESULT_STORAGE_FILE_STORAGE_ROOT_PATH = '/tmp/thumbor/result_storage'
# Enable result caching (caching of cropped images).
RESULT_STORAGE_STORES_UNSAFE = True

thumbor has many other configurations. If you are interested, you can refer to the official documentation: https://thumbor.readthedocs.io/en/latest/configuration.html

Next, create a docker-compose.yml file in the thumbor directory with the following content:

version: '3.3'
services:
    thumbor:
        ports:
            - '8888:80'
        restart: always
        container_name: thumbor
        volumes:
            - './thumbor.conf:/app/thumbor.conf'
            - './result_storage:/tmp/thumbor/result_storage'
            - './storage:/tmp/thumbor/storage'
        image: minimalcompact/thumbor

Then run the command docker-compose up -d to start the container. Now you can continue to use the method mentioned above to crop images. You can access http://IP:8888/unsafe/275x0/https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png

Nginx Reverse Proxy

After deploying the above method, you can access it using IP + port, which is not suitable for production. You can use Nginx reverse proxy to access it using a domain name. Here is an example configuration:

server {
        listen 80;
        server_name yourdomain.com;

        access_log /data/wwwlogs/yourdomain.com_nginx.log combined;

        location / {
                proxy_http_version 1.1;
                proxy_set_header Connection "";
                #chunked_transfer_encoding off;
        proxy_pass http://127.0.0.1:8888;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

You can also configure anti-leech rules in Nginx based on your actual situation. Refer to: Setting Up Image Anti-Leech (Whitelist and Blacklist) in Nginx

Summary

• thumbor provides various installation methods. Deploying with Docker is simple and easy to maintain.
• Customize thumbor parameters according to your own scenarios for production use.
• Nginx reverse proxy can be used for domain name access and anti-leech restrictions.

• thumbor official website: http://www.thumbor.org/
• thumbor documentation: https://thumbor.readthedocs.io/en/latest/
• thumbor project on GitHub: https://github.com/thumbor/thumbor