Border and Padding

Image Operations / Image Border and Padding

On this page:
Intro ▾
{{activeSubMenu.text}} ▾

With the Pixaven Image API, you can easily add a border to your images. You may specify border size, color, corner radius and background color when corner radius is in use. You can also pad your images to create an empty space around your subject.

Image Border

To add a border to the image, include an additional border hash in your request JSON which accepts four parameters: size, color, radius and background.

{
    "border": {
        "size": 10,
        "color": "#ff0000",
        "radius": 5,
        "background": "#cccccc"
    }
}

Border Size and Color

In order to add a border to your images you must, at minimum, provide the border size which takes a positive integer and describes the thickness of the border and color parameter which takes a hex-encoded string in RGB, RRGGBB or AARRGGBB format.

Let's have a look at a simple example. Say you would like to add a gray (#59646c) border of 20px to your images:

{
    "border": {
        "size": 20,
        "color": "#59646c"
    }
}
Given the input image 750px × 300px
Add a 20px gray border around the image by setting "size" to 20 and "color" to #59646c
The resulting image is 750px × 300px with a gray border

Border Radius and Background Color

You may additionally pass a radius parameter which takes a positive integer and describes a corner radius which will be used when applying a border.

Say you would like to add a black (#000) border of 10px with 30px corner radius:

{
    "border": {
        "size": 10,
        "color": "#000",
        "radius": 30
    }
}

Because border-radius trims image pixels which fall out of the border itself, in each corner there is a blank space which by default is filled with transparent pixels or solid white color for image formats that do not support alpha-transparency. You can alter this behavior by specifying a background color which takes a hex-encoded string in RGB, RRGGBB or AARRGGBB format.

For example, to set the background color to navy blue #1974d2 for the above example:

{
    "border": {
        "size": 10,
        "color": "#000",
        "radius": 30,
        "background": "#1974d2"
    }
}

Image Padding

If you would like to pad your images to create an empty space around your subject, you may provide an additional padding hash with size parameter which takes a positive integer. The padded area will, by default, be filled with transparent pixels or solid white color for image formats that do not support alpha-transparency. You can alter this behavior by specifying a background color which takes a hex-encoded string in RGB, RRGGBB or AARRGGBB format.

For example, to pad the image by 40px and set the background color to a semi-transparent blue #50126ae7 (in AARRGGBB format) using PNG as the output format:

{
    "padding": {
        "size": 40,
        "background": "#50126ae7"
    },
    "output": {
        "format": "png"
    }
}
Given the input image 750px × 300px
Pad the image by 40px and set the background color to a semi-transparent blue #50126ae7
The resulting image is a PNG at 750px × 300px, padded by 40px, filled with semi-transparent navy blue color

Code Examples for Image Border and Padding

Below, you'll find examples of how to set Border and Padding from the Pixaven API:

<?php

/**
* Instantiate new `$pix` by calling a constructor
*/

$pix = new Pixaven\Pixaven('your-api-key');


/**
* Provide a publicly available image URL with fetch(string) method
* and apply a 10px black (#000) border to the image
*/

$pix
    ->fetch('https://www.website.com/image.jpg')
    ->border(array(
        'size' => 10,
        'color' => '#000'
    ))
    ->toJSON(function ($error, $meta) {
        if (!empty($error)) {
            throw new Exception($error);
        }

        /**
        * You'll find the full JSON metadata array within the `$meta` variable.
        * Remember to always check if the `success` property is set to `true`.
        */

        if ($meta['success'] == true) {
            print ($meta['output']['url']);
        } else {
            print ($meta['message']);
        }
    });
/**
* Module dependencies
*/

const Pixaven = require("pixaven");


/**
* Instantiate new `pix` by calling a constructor
*/

const pix = new Pixaven("your-api-key");


/**
* Provide a publicly available image URL with fetch(string) method
* and apply a 10px black (#000) border to the image
*/

pix
    .fetch("https://www.website.com/image.jpg")
    .border({
        size: 10,
        color: "#000"
    })
    .toJSON((err, meta) => {
        if (err) {
            return console.log(err);
        }

        /**
        * You'll find the full JSON metadata hash within the `meta` variable.
        * Remember to always check if the `success` property is set to `true`.
        */

        if (meta.success) {
            console.log(meta.output.url);
        } else {
            console.log(meta.message);
        }
    });
##
# Require dependencies

require "pixaven"


##
# Instantiate new `pix` by calling a constructor

pix = Pixaven.new("your-api-key")


##
# Provide a publicly available image URL with fetch(string) method
# and apply a 10px black (#000) border to the image

err, meta = pix
    .fetch("https://www.website.com/image.jpg")
    .border(
        size: 10,
        color: "#000"
    )
    .to_json

abort(err) if err


##
# You'll find the full JSON metadata hash within the `meta` variable.
# Remember to always check if the `success` property is set to `true`.

if meta["success"]
    puts meta["output"]["url"]
else
    puts meta["message"]
end
package main

import (
    "fmt"
    "github.com/pixaven/pixaven-go"
)

func main() {

    /**
    * Instantiate new `pix` by calling a constructor
    */

    pix, err := pixaven.NewClient("your-api-key")

    if err != nil {
        panic(err)
    }


    /**
    * Provide a publicly available image URL with Fetch(string) method
    * and apply a 10px black (#000) border to the image
    */

    meta, err := pix.
        Fetch("https://www.website.com/image.jpg").
        Border(pixaven.P{
            "size": 10,
            "color": "#000"
        }).
        ToJSON()

    if err != nil {
        panic(err)
    }


    /**
    * You'll find the full JSON metadata hash within the `meta` variable.
    * Remember to always check if the `success` property is set to `true`.
    */

    if meta["success"].(map[string]interface{})["success"].(bool) {
        fmt.Println(meta["output"].(map[string]interface{})["url"])
    } else {
        fmt.Println(meta["message"])
    }
}
##
# Import dependencies

from pixaven import pixaven


##
# Instantiate new `client` by calling a constructor

client = pixaven('your-api-key')


##
# Provide a publicly available image URL with fetch(string) method
# and apply a 10px black (#000) border to the image

err, meta = (
    client
        .fetch('https://www.website.com/image.jpg')
        .border({
            'size': 10,
            'color': '#000'
        })
        .toJSON()
)

if err is not None:
    raise StandardError(err)


##
# You'll find the full JSON metadata hash within the `meta` variable.
# Remember to always check if the `success` property is set to `true`.

if meta['success'] is True:
    print (meta['output']['url'])
else:
    print (meta['message'])
package com.pixaven.examples;

/**
* Import dependencies
*/

import static com.pixaven.OperationConfiguration.settings;
import com.pixaven.Pixaven;
import com.pixaven.Fetch;
import com.pixaven.Response;

public class BorderPadding {
    public static void main(String[] args) {

        /**
        * Instantiate new `pix` by calling a constructor
        */

        Pixaven pix = new Pixaven("your-api-key");

        /**
        * Provide a publicly available image URL with fetch(string) method
        * and apply a 10px black (#000) border to the image
        */

        final Fetch fetch = pix.fetch("https://www.website.com/image.jpg");

        fetch.border(
            settings()
                .set("size", 10)
                .set("color", "#000")
        );

        final Response response = fetch.toJson();

        /**
        * You'll find the full JSON metadata hash within the `Response#getMetadata()` property.
        * Remember to always check if the `Response#successful` property is set to `true`.
        */

        if (response.isSuccessful()) {
            System.out.println(response.getMetadata().getOutput().get("url"));
        } else {
            System.out.println(response.getMessage());
        }
    }
}

We use both proprietary and third-party cookies to improve your browsing experience and to provide you with a better service. By continuing to use this site you consent our use of cookies as described in our Cookie Policy×