Scale-to

You can scale your image to a specific pixel width or height. Note that scaling is proportional.

About image scaling

Scaling an image usually means resizing, but by the same amount horizontally and vertically. Scaling an image is probably one of the most common processing operation that applications use. It involves the process of creating and iterating through the pixels of a target image, and sampling areas of a source image to choose what color to implement for each pixel (to create new or merge existing pixels).

The sampling algorithm chosen affects the target color and can dramatically alter the result. Different samplers are usually chosen based upon the use case - For example NearestNeigbor is often used for fast, low quality thumbnail generation, Lanczos for high quality thumbnails due to it’s sharpening effect, and Spline for high quality enlargement due to it’s smoothing effect.

With our API we use Bicubic as it is a very robust algorithm offering good quality output when both reducing and enlarging images.

What parameters we use?

The input parameter is either the new width or height that you want to scale the image to. Take a look to the figure below that we are going to use in an example. It has the dimensions:

  • width: 800 pixels.
  • height: 800 pixels.
Diagram focal point cropping parameters figure woman

The scale-to command scales the image to any pixel width or height proportionally. To achieve proportional scaling, a scaling factor is calculated which is used for scaling the other parameter (width/height) according with the one which was given. In other words the scaling keeps the aspect ratio of the image, i.e. the ratio of its width to its height.

In the above example, the scaling factor is simply 800/800 = 1.0, so the output width and height will be the same regardless of input parameters.

You can use the SDK to do request to our API. Let’s show examples about how you can use scaling to transform your images.

Scale-to basic example

Here we will show you how you can send a request to the API that resizes an image.

scale_to_basic.js
import { LUX_API, Toilmore } from '@shimmercat/toilmore-sdk';
import fs from "fs";
import { Readable } from "stream";

let toilmore = new Toilmore(
    {
        'api_config': LUX_API,

        'api_token': 'xxxx-xxxx',   // <-- Use a valid API token here.

        'domain': 'domain.com'      // <-- Use a domain connected to the token here.
    });


let adjustments = {
    "shifter": {
        "steps": [
            {
                "scale-to": {
                    "width": 200
               }
            }
        ]
    }
}

let force_processing = false;

let result_promise =  toilmore.optimize_with_precursor(
    "costume.jpg",
    "prjpg",
    force_processing,
    adjustments
);

result_promise.then((result) => {
        // `result` can contain a short status string or null if the image
        // could not be optimized.
        store_optimized_image(result);
    },
    (err) => {
        console.log('Optimized images is not ready yet. Waiting 10 seconds...');
        // Let's wait a bit
        setTimeout(() => {
            store_optimized_image(result);
        }, 10);
    }
);

function store_optimized_image(result) {
    let w = fs.createWriteStream("./costume__w200.jpg");
    result.pipe(w);
}

Let’s suppose you want to run the script above with this image below:

Image of costume 800x800 pixels

You should put the costume.jpg image above and the scale_to_basic.js on the same directory, install the SDK as we explain SDK, and then run:

$ node scale_to_basic.js

Once you get the optimized image you will get the costume__w200.jpg version of this image like so:

Image of costume resized to 200x200 pixels

In this example we resized the image to 200x200 pixels, and used the same file format as the original image, jpg. You can see at our lux API doc, that you can get optimized images for any of the precursor_name: webp0, prjpg, pngzo, jp2o0, avifo0.

Updated: