A helper library for building imgproxy URLs.
npm i --save @bitpatty/imgproxy-url-builder
You can simply import the param builder and chain your transformations.
For a list of available transformations visit the API documentation page.
import pb from '@bitpatty/imgproxy-url-builder';
// Just the transformer params
// Returns rot:90/bl:10
pb().rotate(90).blur(10).build();
// The transformer params with the target image
// Returns /-/rot:90/bl:10/czM6Ly9teWJ1Y2tldC9teWltYWdlLnBuZw
pb().rotate(90).blur(10).build({
path: 's3://mybucket/myimage.png',
});
// You can disable path encoding by setting 'plain' to true
// Returns /-/rot:90/bl:10/plain/s3://mybucket/myimage.png
pb().rotate(90).blur(10).build({
plain: true,
path: 's3://mybucket/myimage.png',
});
// To sign your URL provide the key and salt
// The path is required to sign your URL!
// Returns /TXf2QXtZkU-ULvrg0pLDqJlWUb7XdHkXD0h6NFWD-mo/rot:90/bl:10/czM6Ly9teWJ1Y2tldC9teWltYWdlLnBuZw
pb()
.rotate(90)
.blur(10)
.build({
path: 's3://mybucket/myimage.png',
signature: {
key: 'a91bdcda48ce22cd7d8d3a0eda93',
salt: 'a91bdcda48ce22cd7d8d3a0eda93',
},
});
// To automatically prepend the imgproxy URL
// provide it as the 'baseUrl' setting
// Returns https://my-imgproxy-instance.example.com/-/rot:90/bl:10/czM6Ly9teWJ1Y2tldC9teWltYWdlLnBuZw
pb().rotate(90).blur(10).build({
path: 's3://mybucket/myimage.png',
baseUrl: 'https://my-imgproxy-instance.example.com',
});
// You can clone the current configuration for templating / reuse
const template = pb().rotate(90);
const copy = template.clone();
// To remove a modifier, use the `unset` function
const t = pb().rotate(90).blur(10);
t.unset('rotate');
// ... Or you can replace the previous setting by calling the
// modifier again
const t = pb().rotate(90).blur(10); // rotate: 90, blur: 10
t.rotate(34); // rotate: 34, blur: 10
Defines the brightness, contrast, and saturation.
pb().adjust({
brightness: 100, // optional
contrast: 0.8, // optional
saturation: 0.9 // optional
});
Automatically rotates the image based on the EXIF orientation parameter.
pb().autoRotate();
Fills the image background with the specified color.
pb().background('ff0000');
pb().background({
r: 255,
g: 0,
b: 0
});
Adds alpha channel to background.
pb().backgroundAlpha(0.4);
Applies a gaussian blur filter to the image.
pb().blur(10);
Detects objects of the provided classes and blurs them.
pb().blurDetections({
sigma: 10,
classNames: ['face']
});
Adjusts the brightness of an image.
pb().brightness(-100);
Adds a cache buster to the imgproxy params.
pb().cacheBuster("abcdef123");
Adjust contrast of the resulting image.
pb().contrast(0.3);
Crops the image.
pb().crop({
width: 100, // optional
height: 50, // optional
gravity: { // optional
type: GravityType.CENTER, // required
offset: { // optional
x: 20, // required
y: 20 // required
}
}
})
Use a single frame of animated images.
pb().disableAnimation();
Multiplies the dimensions according to the specified factor.
pb().dpr(18);
Detects objects of the provided classes and draws their bounding boxes.
pb().drawDetections({
classNames: ["face"]
});
If the source image has an embedded thumbnail, imgproxy will use the embedded thumbnail instead of the main image.
pb().enforceThumbnail();
Enlarges the image if it is smaller than the given size.
pb().enlarge();
Returns a 404 if the expiration date is reached.
pb().expires(new Date());
pb().expires(1661431326);
Extends the image if it is smaller than the given size.
pb().extend();
pb().extend({
gravity: {
type: GravityType.NORTH // required
offset: { // optional
x: 10; // required
y: 20; // required
}
}
});
Sets a custom fallback image by specifying its URL.
pb().fallbackImageUrl('https://example.com');
Sets the filename for the Content-Disposition header.
pb().fileName('filename.png');
Specifies the resulting image format.
pb().format('png');
Sets the desired quality for each format.
pb().formatQuality({
jpeg: 100,
png: 50,
// ...
});
Places a gradient on the processed image.
pb().gradient({
opacity: 1, // required
color: 'ababab', // optional
direction: 'up', // optional
start: 0.0, // optional
stop: 0.7 // optional
});
Sets the gravity.
pb().gravity({
type: GravityType.NORTH // required
offset: { // optional
x: 10, // required
y: 20 // required
}
});
Allows redefining JPEG saving options.
pb().jpegOptions({
progressive: boolean, // optional
noSubsample: boolean, // optional
trellisQuant: boolean, // optional
overshootDeringing: boolean, // optional
optimizeScans: boolean, // optional
quantizationTable: 7 // optional
});
Preserve the copyright info while stripping metadata.
pb().keepCopyright();
Limits the file size to the specified number of bytes.
pb().maxBytes(10);
Defines the minimum height of the resulting image.
pb().minHeight(100);
Defines the minimum width of the resulting image.
pb().minWidth(100);
Applies the specified padding to the image.
pb().pad({
top: 100, // optional (Note: sets all other sides if not set explicitly)
right: 100, // optional
bottom: 10, // optional
left: 10 // optional
});
When source image supports pagination (PDF, TIFF) or animation (GIF, WebP), this option allows specifying the page to use.
pb().page(10);
Apply the pixelate filter to the resulting image.
pb().pixelate(5);
Allows redefining PNG saving options.
pb().pngOptions({
interlaced: true, // optional
quantize: false, // optional
quantization_colors: 10 // optional
});
Sets one or many presets to be used by the imgproxy.
pb().preset('mypreset');
pb().preset(['preset1', 'preset2']);
Redefines the quality of the resulting image.
pb().quality(80);
Returns a raw unprocessed and unchecked source image
pb().raw();
Resizes the image.
pb().resize({
type: ResizeType.AUTO, // optional
width: 100, // optional
height: 50 // optional
});
Defines the algorithm that imgproxy will use for resizing.
pb().resizingAlgorithm(ResizingAlgorithm.NEAREST));
Returns attachment in the Content-Disposition header.
pb().returnAttachment();
Rotates the image by the specified angle.
pb().rotate(90);
Adjust saturation of the resulting image.
pb().saturation(0.3);
Applies a sharpen filter to the image.
pb().sharpen(3);
Skip the processing of the listed formats.
pb().skipProcessing(['png', 'svg']);
Strips the color profile from the image.
pb().stripColorProfile();
Strips the metadata from the image.
pb().stripMetadata();
Prepend a <style> node with the provided CSS styles to the <svg> node of a source SVG image.
pb().style('fill:red;width:30px;');
pb().style({
fill: 'red';
width: '30px'
});
Trims the image background.
pb().trim({
threshold: 10, // required
color: 'ffffff', // optional
equal: { // optional
horizontal: true, // optional
vertical: true // optional
}
});
Allows redefining unsharpening options.
pb().unsharpen({
mode: UnsharpeningMode.AUTO, // optional
weight: 11, // optional
dividor: 24 // optional
});
Redefines the second used for the thumbnail.
pb().videoThumbnailSecond(3);
Places a watermark on the processed image.
pb().watermark({
opacity: 0.8, // required
position: WatermarkPosition.REPLICATE // optional
scale: 2 // optional
});
pb().watermark({
opacity: 1.0,
scale: 1,
position: WatermarkPosition.WEST // optional
offset: { // optional
x: 10, // optional
y: 10 // optional
}
})
Adds a shadow to the watermark.
pb().watermarkShadow(10);
Defines the desired width and height of the watermark. imgproxy always uses fit resizing type when resizing watermarks and enlarges them when needed.
pb().watermarkSize({
width: 30, // required
height: 30 // required
});
Generate an image from the provided text and use it as a watermark.
pb().watermarkText("my watermark");
Use the image from the specified URL as a watermark.
pb().watermarkUrl('https://example.com');
Multiply the image dimensions according to the specified factors.
pb().zoom(3);
Generated using TypeDoc