You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Pixelbin Core SDK helps you integrate Pixelbin with your Frontend JS Application.
Installation
npm install @pixelbin/core --save
Usage
Setup
// Import the Pixelbin classimportPixelbinfrom"@pixelbin/core";// Create your instanceconstpixelbin=newPixelbin({cloudName: "demo",zone: "default",// optional});
Transform and Optimize Images
// Import transformationsimportPixelbin,{transformations}from"@pixelbin/core";constEraseBg=transformations.EraseBg;constBasic=transformations.Basic;// Create a new instance. If you have't (see above for the details)constpixelbin=newPixelbin({/*...*/});// Create EraseBg.bg transformationlett1=EraseBg.bg();// Create resize transformationconstt2=Basic.resize({height: 100,width: 100});// create a new imageconstdemoImage=pixelbin.image("path/to/image");// File Path on Pixelbin// Add the transformations to the imagedemoImage.setTransformation(t1.pipe(t2));// Get the image urlconsole.log(demoImage.getUrl());// output// https://cdn.pixelbin.io/v2/your-cloud-name/z-slug/erase.bg()~t.resize(h:100,w:100)/path/to/image
// Pixelbin is available in the browser as `Pixelbin` on the window objectconstpixelbin=newPixelbin({cloudName: "demo",zone: "default"});// create an image with the pixelbin objectconstimage=pixelbin.image("demoImage.jpeg");// create a transformationlett=Pixelbin.transformations.Basic.resize({height: 100,width: 100});// add Transformations to the imageimage.setTransformation(t);// get the urlimage.getUrl();// output// https://cdn.pixelbin.io/v2/demo/default/t.resize(h:100,w:100)/demoImage.jpeg
Upload images to pixelbin
The SDK provides a upload utility to upload images directly from the browser with a presigned url.
signedDetails can be generated with the Pixelbin Backend SDK @pixelbin/admin.
options (Object)
Additional options for fine-tuning the upload process. Default: { chunkSize: 1 * 1024 * 1024, maxRetries: 2, concurrency: 3 }
chunkSize (Number)
Size of each chunk to upload. Default is 1 megabyte. Recommended chunk size for 3g network - upto 5kb, 4g network - 500kb to 1MB, 5g network - 1MB to 2MB
maxRetries (Number)
Maximum number of retries if an upload fails. Default is 2 retries.
concurrency (Number)
Number of concurrent chunk upload tasks. Default is 3 concurrent chunk uploads.
returns: Promise
On Success, Promise will either have no response on success if you use v1 signed URL or with file metadata when using v2 signed URL (Recommended)
property
description
example
orgId (Number)
Organization id
5320086
type (String)
file
name (String)
name of the file
testfile.jpeg
path (String)
Path of containing folder.
/path/to/image.jpeg
fileId (String)
id of file
testfile.jpeg
access (String)
Access level of asset, can be either public-read or private
public-read
tags (Array)
Tags associated with the file.
["tag1", "tag2"]
metadata (Object)
Metadata associated with the file.
{"source:"", "publicUploadId":""}
format (String)
file format
jpeg
assetType (String)
type of asset
image
size (Number)
file size
37394
width (Number)
file width
720
height (Number)
file height
450
context (Object)
contains the file metadata and other contexts of file
Generate the presignedUrl with the backend sdk. click here.
Use the response object as is with the upload api as shown below.
constfileInput=document.getElementById("fileInput");// the signed url and fields can be generated and served with @pixelbin/adminconsthandleFileInputEvent=function(e){constfile=e.target.files[0];Pixelbin.upload(file,signedDetails,{chunkSize: 2*1024*1024,maxRetries: 1,concurrency: 2,}).then((res)=>console.log("Uploaded Successfully. Response: ",res)).catch((err)=>console.log("Error while uploading"));};fileInput.addEventListener("change",handleFileInputEvent);
Utilities
Pixelbin provides url utilities to construct and deconstruct Pixelbin urls.
constobj={cloudName: "your-cloud-name",zone: "z-slug",version: "v2",transformations: [],filePath: "",worker: true,workerPath: "resize:h100,w:200/folder/image.jpeg",baseUrl: "https://cdn.pixelbin.io",};consturl=Pixelbin.utils.objToUrl(obj);// obj is as shown above// url// https://cdn.pixelbin.io/v2/your-cloud-name/z-slug/wrkr/resize:h100,w:200/folder/image.jpeg
Transformation
A transformation is an operation or a list of operations that can be performed on an image. Please refer list of supported transformations for details.
// import a resize transformationimportPixelbin,{transformations}from"@pixelbin/core";const{ resize }=transformations.Basic;// create the resize transformationconstt=resize({height: 100,width: 100});
Multiple transformations can be chained by using and on the created transformation object
// import a resize transformationimportPixelbin,{transformations}from"@pixelbin/core";const{ resize, flip }=transformations.Basic;// create the basic transformationsconstt1=resize({height: 100,width: 100});constt2=flip();constt3=t1.pipe(t2);
Image
Image class represents an image on Pixelbin.
//To use the url translation worker feature, call image method on the pixelbin object whilst passing `worker` as true;constimage=pixelbin.image("path/to/image",{worker: true});
//To create an Image, call image method on the pixelbin object;constimage=pixelbin.image("path/to/image");
Transformations can be set on an image by using setTransformation on the image object.
image.setTransformation(t);
Note: Transformations won't be applied to the worker URLs generated from the SDK.
To get the url of the image with the applied transformations, use the getUrl on the image object.