URL Structure
The PixelBin CDN URL that is used to transform or deliver assets has the following structures.
https://cdn.pixelbin.io/v2/{CLOUD_NAME}/{PATTERN}/{FILE_PATH}
https://cdn.pixelbin.io/v2/{CLOUD_NAME}/wrkr/{FILE_PATH}
https://cdn.pixelbin.io/v2/{CLOUD_NAME}/{ZONE_SLUG}/{PATTERN}/{FILE_PATH}
https://cdn.pixelbin.io/v2/{CLOUD_NAME}/{ZONE_SLUG}/wrkr/{FILE_PATH}
Each PixelBin CDN URL is a Zone URL. If a PixelBin CDN URL does not have the ZONE_SLUG
parameter, that means that it is a Default Zone URL.
Parameters
{CLOUD_NAME}Unique ID of an organization. It is created when a user creates an organization. To learn more about the organization and the associated cloud name, click here.
{PATTERN}The pattern parameter corresponds to the transformations that need to be applied to the input file. You can apply a single transformation or a combination of transformations, add-ons and presets. Learn more.
If the original
keyword is used in place of the pattern, the returned file will be the original asset without any modifications.
The relative path of the file from the root folder of the storage along with the extension.
{ZONE_SLUG}Unique ID of a zone if using external storage to deliver a file.
wrkr
PixelBin CDN URLs with wrkr
parameter are Zone URLs that have their URL Translation Worker set.
Optional Parameters
A user can add additional query parameters at the end of the CDN URL to customize the returned output. These are optional and not mandatory.
f_auto
- automatic delivery of the best file option supported by the browser and available at the time of the request, based on the Accept header and other parameters, if any. Go to Format optimization to learn more about how to use it.dpr
- Acronym for Device Pixel Ratio. DPR is used to provide the best image resolutions possible to a user's device. It is based on the density of pixels in the viewing device. Go to Device Pixel Ratio to learn more about it.preview
- Use this to only view the image on the browser.download
- Use this to directly download the output image. It has more priority over thepreview
optional parameter.
CDN Response
A user will get a
200
response status code with the output file in the response body if no error occurs and the transformation is over if any is applied.A user will get a
202
response status code with a JSON message as shown below if no error occurs but the applied transformation is still not over.{"message": "Your transformation request is still being processed. It will finish soon and be made available on the same URL."}
The user can again refresh the CDN URL to check the results. If the applied transformation is complete, then the URL will return the image otherwise it will still return
202
status until the transformation is over.A user will get a
TransformationJobError
JSON object if any occurs in the applied transformations. The JSON object will have the appropriate error message to debug the issue.
Transformation Pattern
Single Transformation
A single transformation pattern can be either a basic/ml transformation, an add-on or a preset used in a CDN URL.
Each transformation has a name
, an identifier
and params
to configure the applied transformation.
For a preset, the identifier
will be p
and the name
will be the name of the preset. A preset will have no params
.
Let's take a look at the URL of this image uploaded to PixelBin: The same image is resized to a height of 200px and a width of 200px.
- Resize with height 100px and width 100px
- Original
- URL
- React
- JavaScript
- Node.js
- Python
- Golang
- Kotlin
- C#
- PHP
<PixelBinImage
url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg"
/>
import Pixelbin from "@pixelbin/core";
const obj = {
cloudName: "dummy-cloudname",
zone: "FIDrmb",
version: "v2",
transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"200"},{"key":"w","value":"200"}]}],
filePath: "images/transformation/basic-default.jpeg",
baseUrl: "https://cdn.pixelbin.io",
};
const url = Pixelbin.default.utils.objToUrl(obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg
const Pixelbin = require("@pixelbin/admin");
const obj = {
cloudName: "dummy-cloudname",
zone: "FIDrmb",
version: "v2",
transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"200"},{"key":"w","value":"200"}]}],
filePath: "images/transformation/basic-default.jpeg",
baseUrl: "https://cdn.pixelbin.io",
};
const url = Pixelbin.url.objToUrl(obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg
from pixelbin.utils.url import obj_to_url
obj = {
"cloudName": "dummy-cloudname",
"zone": "FIDrmb",
"version": "v2",
"transformations": [{"name":"resize","plugin":"t","values":[{"key":"h","value":"200"},{"key":"w","value":"200"}]}],
"filePath": "images/transformation/basic-default.jpeg",
"baseUrl": "https://cdn.pixelbin.io",
}
url = obj_to_url(obj)
# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg
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": "resize", "values": []map[string]interface{}{ {"key": "h", "value": "200"},{"key": "w", "value": "200"},}},
},
"filePath": "images/transformation/basic-default.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.resize(h:200,w:200)/images/transformation/basic-default.jpeg
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 = "resize", values = hashMapOf( "h" to "200","w" to "200"), )
),
filePath = "images/transformation/basic-default.jpeg",
baseUrl = "https://cdn.pixelbin.io"
)
val url = Utils.objToUrl(obj)
}
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg
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-default.jpeg",
zone: "FIDrmb",
baseUrl: "https://cdn.pixelbin.io",
transformations: new List<UrlTransformation>() {
new UrlTransformation(plugin: "t", name: "resize", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "h" }, { "value", "200" } }, new Dictionary<string, string>() { { "key", "w" }, { "value", "200" } }} )
}
);
string url = Url.ObjToUrl(obj);
}
}
}
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg
<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;
$obj = [
"cloudName" => "dummy-cloudname",
"zone" => "FIDrmb",
"version" => "v2",
"options" => [],
"transformations" => [
["plugin" => "t", "name" => "resize", "values" => [ [ "key" => "h", "value" => "200" ], [ "key" => "w", "value" => "200" ], ], ],
],
"filePath" => "images/transformation/basic-default.jpeg",
"baseUrl" => "https://cdn.pixelbin.io",
];
$url = Url::obj_to_url($obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)/images/transformation/basic-default.jpeg
?>
- URL
- React
- JavaScript
- Node.js
- Python
- Golang
- Kotlin
- C#
- PHP
<PixelBinImage
url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg"
/>
import Pixelbin from "@pixelbin/core";
const obj = {
cloudName: "dummy-cloudname",
zone: "FIDrmb",
version: "v2",
transformations: [],
filePath: "images/transformation/basic-default.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-default.jpeg
const Pixelbin = require("@pixelbin/admin");
const obj = {
cloudName: "dummy-cloudname",
zone: "FIDrmb",
version: "v2",
transformations: [],
filePath: "images/transformation/basic-default.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-default.jpeg
from pixelbin.utils.url import obj_to_url
obj = {
"cloudName": "dummy-cloudname",
"zone": "FIDrmb",
"version": "v2",
"transformations": [],
"filePath": "images/transformation/basic-default.jpeg",
"baseUrl": "https://cdn.pixelbin.io",
}
url = obj_to_url(obj)
# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg
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-default.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-default.jpeg
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-default.jpeg",
baseUrl = "https://cdn.pixelbin.io"
)
val url = Utils.objToUrl(obj)
}
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg
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-default.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-default.jpeg
<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;
$obj = [
"cloudName" => "dummy-cloudname",
"zone" => "FIDrmb",
"version" => "v2",
"options" => [],
"transformations" => [
],
"filePath" => "images/transformation/basic-default.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-default.jpeg
?>
Notice how the pattern changes from original
to t.resize(h:200,w:200)
indicating that the resize transformation has been applied and the image has been resized to 200x200 pixels.
The transformation t.resize(h:200,w:200)
can be separated as follows:
t
- Identifierresize
- Nameh:200
- Paramh
with value200
w:200
- Paramw
with value200
Chained Transformations
You can perform a series of transformations sequentially on an image by combining multiple basic/ml transformations, add-ons, and presets. Some transformations are dependent on the sequence they're carried out in.
Each transformation is separated by using a tilde(~)
symbol.
Let us see some examples.
- Resize and Extend
- Resize, Blur and Extend
- Original
- URL
- React
- JavaScript
- Node.js
- Python
- Golang
- Kotlin
- C#
- PHP
<PixelBinImage
url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg"
/>
import Pixelbin from "@pixelbin/core";
const obj = {
cloudName: "dummy-cloudname",
zone: "FIDrmb",
version: "v2",
transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"300"},{"key":"w","value":"200"}]},{"name":"extend","plugin":"t","values":[{"key":"t","value":"20"},{"key":"r","value":"20"},{"key":"b","value":"20"},{"key":"l","value":"20"},{"key":"bc","value":"deb887"}]}],
filePath: "images/transformation/basic-default.jpeg",
baseUrl: "https://cdn.pixelbin.io",
};
const url = Pixelbin.default.utils.objToUrl(obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg
const Pixelbin = require("@pixelbin/admin");
const obj = {
cloudName: "dummy-cloudname",
zone: "FIDrmb",
version: "v2",
transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"300"},{"key":"w","value":"200"}]},{"name":"extend","plugin":"t","values":[{"key":"t","value":"20"},{"key":"r","value":"20"},{"key":"b","value":"20"},{"key":"l","value":"20"},{"key":"bc","value":"deb887"}]}],
filePath: "images/transformation/basic-default.jpeg",
baseUrl: "https://cdn.pixelbin.io",
};
const url = Pixelbin.url.objToUrl(obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg
from pixelbin.utils.url import obj_to_url
obj = {
"cloudName": "dummy-cloudname",
"zone": "FIDrmb",
"version": "v2",
"transformations": [{"name":"resize","plugin":"t","values":[{"key":"h","value":"300"},{"key":"w","value":"200"}]},{"name":"extend","plugin":"t","values":[{"key":"t","value":"20"},{"key":"r","value":"20"},{"key":"b","value":"20"},{"key":"l","value":"20"},{"key":"bc","value":"deb887"}]}],
"filePath": "images/transformation/basic-default.jpeg",
"baseUrl": "https://cdn.pixelbin.io",
}
url = obj_to_url(obj)
# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg
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": "resize", "values": []map[string]interface{}{ {"key": "h", "value": "300"},{"key": "w", "value": "200"},}},,
{"plugin": "t", "name": "extend", "values": []map[string]interface{}{ {"key": "t", "value": "20"},{"key": "r", "value": "20"},{"key": "b", "value": "20"},{"key": "l", "value": "20"},{"key": "bc", "value": "deb887"},}},
},
"filePath": "images/transformation/basic-default.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.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg
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 = "resize", values = hashMapOf( "h" to "300","w" to "200"), ),
TransformationObj( plugin = "t", name = "extend", values = hashMapOf( "t" to "20","r" to "20","b" to "20","l" to "20","bc" to "deb887"), )
),
filePath = "images/transformation/basic-default.jpeg",
baseUrl = "https://cdn.pixelbin.io"
)
val url = Utils.objToUrl(obj)
}
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg
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-default.jpeg",
zone: "FIDrmb",
baseUrl: "https://cdn.pixelbin.io",
transformations: new List<UrlTransformation>() {
new UrlTransformation(plugin: "t", name: "resize", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "h" }, { "value", "300" } }, new Dictionary<string, string>() { { "key", "w" }, { "value", "200" } }} ),
new UrlTransformation(plugin: "t", name: "extend", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "t" }, { "value", "20" } }, new Dictionary<string, string>() { { "key", "r" }, { "value", "20" } }, new Dictionary<string, string>() { { "key", "b" }, { "value", "20" } }, new Dictionary<string, string>() { { "key", "l" }, { "value", "20" } }, new Dictionary<string, string>() { { "key", "bc" }, { "value", "deb887" } }} )
}
);
string url = Url.ObjToUrl(obj);
}
}
}
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg
<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;
$obj = [
"cloudName" => "dummy-cloudname",
"zone" => "FIDrmb",
"version" => "v2",
"options" => [],
"transformations" => [
["plugin" => "t", "name" => "resize", "values" => [ [ "key" => "h", "value" => "300" ], [ "key" => "w", "value" => "200" ], ], ],
["plugin" => "t", "name" => "extend", "values" => [ [ "key" => "t", "value" => "20" ], [ "key" => "r", "value" => "20" ], [ "key" => "b", "value" => "20" ], [ "key" => "l", "value" => "20" ], [ "key" => "bc", "value" => "deb887" ], ], ],
],
"filePath" => "images/transformation/basic-default.jpeg",
"baseUrl" => "https://cdn.pixelbin.io",
];
$url = Url::obj_to_url($obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:20,b:20,l:20,bc:deb887)/images/transformation/basic-default.jpeg
?>
- URL
- React
- JavaScript
- Node.js
- Python
- Golang
- Kotlin
- C#
- PHP
<PixelBinImage
url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg"
/>
import Pixelbin from "@pixelbin/core";
const obj = {
cloudName: "dummy-cloudname",
zone: "FIDrmb",
version: "v2",
transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"200"},{"key":"w","value":"200"}]},{"name":"blur","plugin":"t","values":[{"key":"s","value":"2"}]},{"name":"extend","plugin":"t","values":[{"key":"bt","value":"replicate"}]}],
filePath: "images/transformation/basic-default.jpeg",
baseUrl: "https://cdn.pixelbin.io",
};
const url = Pixelbin.default.utils.objToUrl(obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg
const Pixelbin = require("@pixelbin/admin");
const obj = {
cloudName: "dummy-cloudname",
zone: "FIDrmb",
version: "v2",
transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"200"},{"key":"w","value":"200"}]},{"name":"blur","plugin":"t","values":[{"key":"s","value":"2"}]},{"name":"extend","plugin":"t","values":[{"key":"bt","value":"replicate"}]}],
filePath: "images/transformation/basic-default.jpeg",
baseUrl: "https://cdn.pixelbin.io",
};
const url = Pixelbin.url.objToUrl(obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg
from pixelbin.utils.url import obj_to_url
obj = {
"cloudName": "dummy-cloudname",
"zone": "FIDrmb",
"version": "v2",
"transformations": [{"name":"resize","plugin":"t","values":[{"key":"h","value":"200"},{"key":"w","value":"200"}]},{"name":"blur","plugin":"t","values":[{"key":"s","value":"2"}]},{"name":"extend","plugin":"t","values":[{"key":"bt","value":"replicate"}]}],
"filePath": "images/transformation/basic-default.jpeg",
"baseUrl": "https://cdn.pixelbin.io",
}
url = obj_to_url(obj)
# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg
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": "resize", "values": []map[string]interface{}{ {"key": "h", "value": "200"},{"key": "w", "value": "200"},}},,
{"plugin": "t", "name": "blur", "values": []map[string]interface{}{ {"key": "s", "value": "2"},}},,
{"plugin": "t", "name": "extend", "values": []map[string]interface{}{ {"key": "bt", "value": "replicate"},}},
},
"filePath": "images/transformation/basic-default.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.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg
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 = "resize", values = hashMapOf( "h" to "200","w" to "200"), ),
TransformationObj( plugin = "t", name = "blur", values = hashMapOf( "s" to "2"), ),
TransformationObj( plugin = "t", name = "extend", values = hashMapOf( "bt" to "replicate"), )
),
filePath = "images/transformation/basic-default.jpeg",
baseUrl = "https://cdn.pixelbin.io"
)
val url = Utils.objToUrl(obj)
}
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg
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-default.jpeg",
zone: "FIDrmb",
baseUrl: "https://cdn.pixelbin.io",
transformations: new List<UrlTransformation>() {
new UrlTransformation(plugin: "t", name: "resize", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "h" }, { "value", "200" } }, new Dictionary<string, string>() { { "key", "w" }, { "value", "200" } }} ),
new UrlTransformation(plugin: "t", name: "blur", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "s" }, { "value", "2" } }} ),
new UrlTransformation(plugin: "t", name: "extend", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "bt" }, { "value", "replicate" } }} )
}
);
string url = Url.ObjToUrl(obj);
}
}
}
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg
<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;
$obj = [
"cloudName" => "dummy-cloudname",
"zone" => "FIDrmb",
"version" => "v2",
"options" => [],
"transformations" => [
["plugin" => "t", "name" => "resize", "values" => [ [ "key" => "h", "value" => "200" ], [ "key" => "w", "value" => "200" ], ], ],
["plugin" => "t", "name" => "blur", "values" => [ [ "key" => "s", "value" => "2" ], ], ],
["plugin" => "t", "name" => "extend", "values" => [ [ "key" => "bt", "value" => "replicate" ], ], ],
],
"filePath" => "images/transformation/basic-default.jpeg",
"baseUrl" => "https://cdn.pixelbin.io",
];
$url = Url::obj_to_url($obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:200,w:200)~t.blur(s:2)~t.extend(bt:replicate)/images/transformation/basic-default.jpeg
?>
- URL
- React
- JavaScript
- Node.js
- Python
- Golang
- Kotlin
- C#
- PHP
<PixelBinImage
url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg"
/>
import Pixelbin from "@pixelbin/core";
const obj = {
cloudName: "dummy-cloudname",
zone: "FIDrmb",
version: "v2",
transformations: [],
filePath: "images/transformation/basic-default.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-default.jpeg
const Pixelbin = require("@pixelbin/admin");
const obj = {
cloudName: "dummy-cloudname",
zone: "FIDrmb",
version: "v2",
transformations: [],
filePath: "images/transformation/basic-default.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-default.jpeg
from pixelbin.utils.url import obj_to_url
obj = {
"cloudName": "dummy-cloudname",
"zone": "FIDrmb",
"version": "v2",
"transformations": [],
"filePath": "images/transformation/basic-default.jpeg",
"baseUrl": "https://cdn.pixelbin.io",
}
url = obj_to_url(obj)
# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg
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-default.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-default.jpeg
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-default.jpeg",
baseUrl = "https://cdn.pixelbin.io"
)
val url = Utils.objToUrl(obj)
}
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg
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-default.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-default.jpeg
<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;
$obj = [
"cloudName" => "dummy-cloudname",
"zone" => "FIDrmb",
"version" => "v2",
"options" => [],
"transformations" => [
],
"filePath" => "images/transformation/basic-default.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-default.jpeg
?>
Example
Imagine that we want to produce an optimized placeholder image for a thumbnail. To do that, we will first resize the image to 100x100 pixels, then blur it, and lastly convert the output to webp
format.
Let us go over each step.
Set the dimensions to
100px
to resize the picture.t.resize(h:100,w:100)
Apply blur using a
2
sigma value.t.blur(s:2)
Change format to
webp
. The image size can be reduced while retaining visual quality by switching the format towebp
.t.toFormat(f:webp)
These three steps are combined by PixelBin into a chain, with a tilde ~
sign separating each step.
t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)
- Placeholder Thumbnail
- Original
- URL
- React
- JavaScript
- Node.js
- Python
- Golang
- Kotlin
- C#
- PHP
<PixelBinImage
url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg"
/>
import Pixelbin from "@pixelbin/core";
const obj = {
cloudName: "dummy-cloudname",
zone: "FIDrmb",
version: "v2",
transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"100"},{"key":"w","value":"100"}]},{"name":"blur","plugin":"t","values":[{"key":"s","value":"2"}]},{"name":"toFormat","plugin":"t","values":[{"key":"f","value":"webp"}]}],
filePath: "images/transformation/seaplane.jpg",
baseUrl: "https://cdn.pixelbin.io",
};
const url = Pixelbin.default.utils.objToUrl(obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg
const Pixelbin = require("@pixelbin/admin");
const obj = {
cloudName: "dummy-cloudname",
zone: "FIDrmb",
version: "v2",
transformations: [{"name":"resize","plugin":"t","values":[{"key":"h","value":"100"},{"key":"w","value":"100"}]},{"name":"blur","plugin":"t","values":[{"key":"s","value":"2"}]},{"name":"toFormat","plugin":"t","values":[{"key":"f","value":"webp"}]}],
filePath: "images/transformation/seaplane.jpg",
baseUrl: "https://cdn.pixelbin.io",
};
const url = Pixelbin.url.objToUrl(obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg
from pixelbin.utils.url import obj_to_url
obj = {
"cloudName": "dummy-cloudname",
"zone": "FIDrmb",
"version": "v2",
"transformations": [{"name":"resize","plugin":"t","values":[{"key":"h","value":"100"},{"key":"w","value":"100"}]},{"name":"blur","plugin":"t","values":[{"key":"s","value":"2"}]},{"name":"toFormat","plugin":"t","values":[{"key":"f","value":"webp"}]}],
"filePath": "images/transformation/seaplane.jpg",
"baseUrl": "https://cdn.pixelbin.io",
}
url = obj_to_url(obj)
# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg
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": "resize", "values": []map[string]interface{}{ {"key": "h", "value": "100"},{"key": "w", "value": "100"},}},,
{"plugin": "t", "name": "blur", "values": []map[string]interface{}{ {"key": "s", "value": "2"},}},,
{"plugin": "t", "name": "toFormat", "values": []map[string]interface{}{ {"key": "f", "value": "webp"},}},
},
"filePath": "images/transformation/seaplane.jpg",
"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.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg
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 = "resize", values = hashMapOf( "h" to "100","w" to "100"), ),
TransformationObj( plugin = "t", name = "blur", values = hashMapOf( "s" to "2"), ),
TransformationObj( plugin = "t", name = "toFormat", values = hashMapOf( "f" to "webp"), )
),
filePath = "images/transformation/seaplane.jpg",
baseUrl = "https://cdn.pixelbin.io"
)
val url = Utils.objToUrl(obj)
}
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg
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/seaplane.jpg",
zone: "FIDrmb",
baseUrl: "https://cdn.pixelbin.io",
transformations: new List<UrlTransformation>() {
new UrlTransformation(plugin: "t", name: "resize", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "h" }, { "value", "100" } }, new Dictionary<string, string>() { { "key", "w" }, { "value", "100" } }} ),
new UrlTransformation(plugin: "t", name: "blur", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "s" }, { "value", "2" } }} ),
new UrlTransformation(plugin: "t", name: "toFormat", values: new List<Dictionary<string, string>>() { new Dictionary<string, string>() { { "key", "f" }, { "value", "webp" } }} )
}
);
string url = Url.ObjToUrl(obj);
}
}
}
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg
<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;
$obj = [
"cloudName" => "dummy-cloudname",
"zone" => "FIDrmb",
"version" => "v2",
"options" => [],
"transformations" => [
["plugin" => "t", "name" => "resize", "values" => [ [ "key" => "h", "value" => "100" ], [ "key" => "w", "value" => "100" ], ], ],
["plugin" => "t", "name" => "blur", "values" => [ [ "key" => "s", "value" => "2" ], ], ],
["plugin" => "t", "name" => "toFormat", "values" => [ [ "key" => "f", "value" => "webp" ], ], ],
],
"filePath" => "images/transformation/seaplane.jpg",
"baseUrl" => "https://cdn.pixelbin.io",
];
$url = Url::obj_to_url($obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:100,w:100)~t.blur(s:2)~t.toFormat(f:webp)/images/transformation/seaplane.jpg
?>
- URL
- React
- JavaScript
- Node.js
- Python
- Golang
- Kotlin
- C#
- PHP
<PixelBinImage
url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg"
/>
import Pixelbin from "@pixelbin/core";
const obj = {
cloudName: "dummy-cloudname",
zone: "FIDrmb",
version: "v2",
transformations: [],
filePath: "images/transformation/seaplane.jpg",
baseUrl: "https://cdn.pixelbin.io",
};
const url = Pixelbin.default.utils.objToUrl(obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg
const Pixelbin = require("@pixelbin/admin");
const obj = {
cloudName: "dummy-cloudname",
zone: "FIDrmb",
version: "v2",
transformations: [],
filePath: "images/transformation/seaplane.jpg",
baseUrl: "https://cdn.pixelbin.io",
};
const url = Pixelbin.url.objToUrl(obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg
from pixelbin.utils.url import obj_to_url
obj = {
"cloudName": "dummy-cloudname",
"zone": "FIDrmb",
"version": "v2",
"transformations": [],
"filePath": "images/transformation/seaplane.jpg",
"baseUrl": "https://cdn.pixelbin.io",
}
url = obj_to_url(obj)
# url
# https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg
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/seaplane.jpg",
"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/seaplane.jpg
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/seaplane.jpg",
baseUrl = "https://cdn.pixelbin.io"
)
val url = Utils.objToUrl(obj)
}
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg
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/seaplane.jpg",
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/seaplane.jpg
<?php
require 'vendor/autoload.php';
use Pixelbin\Utils\Url;
$obj = [
"cloudName" => "dummy-cloudname",
"zone" => "FIDrmb",
"version" => "v2",
"options" => [],
"transformations" => [
],
"filePath" => "images/transformation/seaplane.jpg",
"baseUrl" => "https://cdn.pixelbin.io",
];
$url = Url::obj_to_url($obj);
// url
// https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/seaplane.jpg
?>
Using presets, you can save your often-used chained transformations with a user-friendly name.
Click here to know more.
Transforming Images using URL
The following video demonstrates how to transform your images on the go using PixelBin's URL parameters.