Flatten an image

Flatten transformation allows users to merge all visible layers of an image into a single layer. Users can merge an alpha transparency channel, if any, with a background, then remove the alpha channel. However, it is important to note that flattening an image is a destructive process, as it removes the individual layers and makes it more difficult to edit or modify the image later on.

After the image is flattened, it has the same appearance it had before. The difference is that all of the image contents are in a single layer without transparency. If there are any areas which are transparent through all of the layers of the original image, the background color is visible.

This operation makes significant changes to the structure of the image. It is normally only necessary when you would like to save an image in a format which does not support levels or transparency (an alpha channel).

---

Params

Background (b)

The background color for the image.

Uses a hex value to determine the background color. The default value is black.

Original Image

URL

https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic_chair.jpeg?v=1744646821354

React

<PixelBinImage
    url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic_chair.jpeg?v=1744646821354"
/>

JavaScript

import Pixelbin from "@pixelbin/core";

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [],
    filePath: "images/transformation/basic_chair.jpeg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.default.utils.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic_chair.jpeg?v=1744646821354

Node.js

const Pixelbin = require("@pixelbin/admin");

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [],
    filePath: "images/transformation/basic_chair.jpeg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.url.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic_chair.jpeg?v=1744646821354

Python

from pixelbin.utils.url import obj_to_url

obj = {
    "cloudName": "dummy-cloudname",
    "zone": "FIDrmb",
    "version": "v2",
    "transformations": [],
    "filePath": "images/transformation/basic_chair.jpeg",
    "baseUrl": "https://cdn.pixelbin.io",
}

url = obj_to_url(obj)

# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic_chair.jpeg?v=1744646821354

Golang

package main

import (
 "fmt"
 "github.com/pixelbin-dev/pixelbin-go/v2/sdk/utils/url"
)

func main() {
    obj := map[string]interface{}{
        "cloudName": "dummy-cloudname",
        "zoneSlug": "FIDrmb",
        "version": "v2",
        "transformations": []map[string]interface{}{
            
        },
        "filePath": "images/transformation/basic_chair.jpeg",
        "baseUrl": "https://cdn.pixelbin.io",
        "options": map[string]interface{}{},
    }

    urlstring, err := url.ObjToUrl(obj)

    if err != nil {
        fmt.Println(err)
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic_chair.jpeg?v=1744646821354

Kotlin

import com.pixelbin.url.UrlObj
import com.pixelbin.Utils
import com.pixelbin.transformation.TransformationObj

fun main(){
    val obj = UrlObj(
        cloudName = "dummy-cloudname",
        zone = "FIDrmb",
        version = "v2",
        transformation = arrayListOf(
            
        ),
        filePath = "images/transformation/basic_chair.jpeg",
        baseUrl = "https://cdn.pixelbin.io"
    )

    val url = Utils.objToUrl(obj)
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic_chair.jpeg?v=1744646821354

C#

using System;
using System.Collections.Generic;
using System.IO;
using Pixelbin.Utils;

namespace ExampleNamespace
{
    class ExampleClass
    {
        static void Main(string[] args)
        {
            UrlObj obj = new UrlObj(
                version: "v2",
                cloudName: "dummy-cloudname",
                filePath: "images/transformation/basic_chair.jpeg",
                zone: "FIDrmb",
                baseUrl: "https://cdn.pixelbin.io",
                transformations: new List<UrlTransformation>() {
                    
                }
            );

            string url = Url.ObjToUrl(obj);
        }
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic_chair.jpeg?v=1744646821354

PHP

<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;

$obj = [
    "cloudName" => "dummy-cloudname",
    "zone" => "FIDrmb",
    "version" => "v2",
    "options" => [],
    "transformations" => [
        
    ],
    "filePath" => "images/transformation/basic_chair.jpeg",
    "baseUrl" => "https://cdn.pixelbin.io",
];

$url = Url::obj_to_url($obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic_chair.jpeg?v=1744646821354
?>

Flatten

URL

https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.flatten(b:219653)/images/transformation/basic_chair.jpeg?v=1744646821354

React

<PixelBinImage
    url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.flatten(b:219653)/images/transformation/basic_chair.jpeg?v=1744646821354"
/>

JavaScript

import Pixelbin from "@pixelbin/core";

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [{"name":"flatten","plugin":"t","values":[{"key":"b","value":"219653"}]}],
    filePath: "images/transformation/basic_chair.jpeg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.default.utils.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.flatten(b:219653)/images/transformation/basic_chair.jpeg?v=1744646821354

Node.js

const Pixelbin = require("@pixelbin/admin");

const obj = {
    cloudName: "dummy-cloudname",
    zone: "FIDrmb",
    version: "v2",
    transformations: [{"name":"flatten","plugin":"t","values":[{"key":"b","value":"219653"}]}],
    filePath: "images/transformation/basic_chair.jpeg",
    baseUrl: "https://cdn.pixelbin.io",
};

const url = Pixelbin.url.objToUrl(obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.flatten(b:219653)/images/transformation/basic_chair.jpeg?v=1744646821354

Python

from pixelbin.utils.url import obj_to_url

obj = {
    "cloudName": "dummy-cloudname",
    "zone": "FIDrmb",
    "version": "v2",
    "transformations": [{"name":"flatten","plugin":"t","values":[{"key":"b","value":"219653"}]}],
    "filePath": "images/transformation/basic_chair.jpeg",
    "baseUrl": "https://cdn.pixelbin.io",
}

url = obj_to_url(obj)

# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.flatten(b:219653)/images/transformation/basic_chair.jpeg?v=1744646821354

Golang

package main

import (
 "fmt"
 "github.com/pixelbin-dev/pixelbin-go/v2/sdk/utils/url"
)

func main() {
    obj := map[string]interface{}{
        "cloudName": "dummy-cloudname",
        "zoneSlug": "FIDrmb",
        "version": "v2",
        "transformations": []map[string]interface{}{
            {"plugin": "t", "name": "flatten", "values": []map[string]interface{}{ {"key": "b", "value": "219653"},}},
        },
        "filePath": "images/transformation/basic_chair.jpeg",
        "baseUrl": "https://cdn.pixelbin.io",
        "options": map[string]interface{}{},
    }

    urlstring, err := url.ObjToUrl(obj)

    if err != nil {
        fmt.Println(err)
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.flatten(b:219653)/images/transformation/basic_chair.jpeg?v=1744646821354

Kotlin

import com.pixelbin.url.UrlObj
import com.pixelbin.Utils
import com.pixelbin.transformation.TransformationObj

fun main(){
    val obj = UrlObj(
        cloudName = "dummy-cloudname",
        zone = "FIDrmb",
        version = "v2",
        transformation = arrayListOf(
            TransformationObj( plugin = "t", name = "flatten", values = hashMapOf( "b" to "219653"), )
        ),
        filePath = "images/transformation/basic_chair.jpeg",
        baseUrl = "https://cdn.pixelbin.io"
    )

    val url = Utils.objToUrl(obj)
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.flatten(b:219653)/images/transformation/basic_chair.jpeg?v=1744646821354

C#

using System;
using System.Collections.Generic;
using System.IO;
using Pixelbin.Utils;

namespace ExampleNamespace
{
    class ExampleClass
    {
        static void Main(string[] args)
        {
            UrlObj obj = new UrlObj(
                version: "v2",
                cloudName: "dummy-cloudname",
                filePath: "images/transformation/basic_chair.jpeg",
                zone: "FIDrmb",
                baseUrl: "https://cdn.pixelbin.io",
                transformations: new List<UrlTransformation>() {
                    new UrlTransformation(plugin: "t", name: "flatten", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "b" }, { "value", "219653" } }} )
                }
            );

            string url = Url.ObjToUrl(obj);
        }
    }
}

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.flatten(b:219653)/images/transformation/basic_chair.jpeg?v=1744646821354

PHP

<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;

$obj = [
    "cloudName" => "dummy-cloudname",
    "zone" => "FIDrmb",
    "version" => "v2",
    "options" => [],
    "transformations" => [
        ["plugin" => "t", "name" => "flatten", "values" => [ [ "key" => "b", "value" => "219653" ], ], ],
    ],
    "filePath" => "images/transformation/basic_chair.jpeg",
    "baseUrl" => "https://cdn.pixelbin.io",
];

$url = Url::obj_to_url($obj);

// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.flatten(b:219653)/images/transformation/basic_chair.jpeg?v=1744646821354
?>