The Get Pronto SDK provides a powerful, chainable API for transforming images. You can resize, crop, apply effects, and optimize images for different use cases.
To transform an image, use the transform() method from the images API:
import GetProntoClient from "@getpronto-io/getpronto-sdk";
const client = new GetProntoClient({
apiKey: "YOUR_API_KEY"
});
// Start a transformation chain
const transformer = client.images.transform("file_id");All transformation methods can be chained together. The transformations are applied in the order they are specified.
Resize the image to specified dimensions
| Name | Type | Description |
|---|---|---|
| width | number | Target width in pixels (1-5000) |
| height | number | Target height in pixels (1-5000) |
| fit | string | How the image should fit: 'cover' (default), 'contain', 'fill', 'inside', 'outside' |
// Resize to 800x600 using contain mode
client.images
.transform(fileId)
.resize(800, 600, "contain")Returns: ImageTransformer
Set the output quality for JPEG and WebP images
| Name | Type | Description |
|---|---|---|
| value | number | Quality value (1-100) |
// Set quality to 90%
client.images
.transform(fileId)
.quality(90)Returns: ImageTransformer
Apply Gaussian blur to the image
| Name | Type | Description |
|---|---|---|
| value | number | Blur radius (0.3-1000) |
// Apply blur with radius 5
client.images
.transform(fileId)
.blur(5)Returns: ImageTransformer
Apply sharpening to the image
// Apply sharpening
client.images
.transform(fileId)
.sharpen()Returns: ImageTransformer
Convert the image to grayscale
// Convert to grayscale
client.images
.transform(fileId)
.grayscale()Returns: ImageTransformer
Rotate the image by specified degrees
| Name | Type | Description |
|---|---|---|
| degrees | number | Rotation angle (-360 to 360) |
// Rotate 90 degrees clockwise
client.images
.transform(fileId)
.rotate(90)Returns: ImageTransformer
Add a border to the image
| Name | Type | Description |
|---|---|---|
| width | number | Border width in pixels |
| color | string | Border color in hex format (with or without #) |
// Add a 5px red border
client.images
.transform(fileId)
.border(5, "FF0000")Returns: ImageTransformer
Crop the image to specified dimensions
| Name | Type | Description |
|---|---|---|
| x | number | Starting X coordinate |
| y | number | Starting Y coordinate |
| width | number | Crop width |
| height | number | Crop height |
// Crop a 500x500 square from position (100,100)
client.images
.transform(fileId)
.crop(100, 100, 500, 500)Returns: ImageTransformer
Set the output format of the image
| Name | Type | Description |
|---|---|---|
| type | string | Output format (jpg, png, webp, etc) |
// Convert to WebP format
client.images
.transform(fileId)
.format("webp")Returns: ImageTransformer
After configuring your transformations, you can either:
toURL() to get a URL for the transformed imagetransform() to get the transformed image data as a BlobGenerate a URL for an image with multiple transformations
// Get a URL for a resized, optimized thumbnail
const thumbnailUrl = await client.images
.transform(fileId)
.resize(300, 200)
.quality(90)
.format("webp")
.toURL();
console.log("Transformed URL:", thumbnailUrl);Get the transformed image data as a Blob
// Get the transformed image data
const imageBlob = await client.images
.transform(fileId)
.resize(800, 600)
.grayscale()
.quality(85)
.transform();
// Use with an image element
const imageUrl = URL.createObjectURL(imageBlob);
imageElement.src = imageUrl;Apply multiple transformations in sequence
const processedImage = await client.images
.transform(fileId)
.crop(100, 100, 800, 600) // Crop first
.rotate(90) // Then rotate
.resize(400, 300) // Then resize
.grayscale() // Convert to grayscale
.quality(85) // Set quality
.format("webp") // Convert to WebP
.transform(); // Get the final imageContinue exploring our documentation with these related topics: