https://github.com/imgeng/imageengine-helpers
https://github.com/imgeng/imageengine-helpers
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/imgeng/imageengine-helpers
- Owner: imgeng
- Created: 2021-08-05T09:09:19.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-01T01:41:29.000Z (5 months ago)
- Last Synced: 2025-01-01T10:03:41.329Z (5 months ago)
- Language: TypeScript
- Size: 102 KB
- Stars: 0
- Watchers: 4
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A tiny set of helpers and TS types for building [ImageEngine](https://imageengine.io) query URLs for your distribution.
These set of utilities only make sense if you want to use an object to declare your [directives](https://support.imageengine.io/hc/en-us/articles/360058880672-directives) for when retrieving assets from an ImageEngine distribution.
Install it with:
`npm install @imageengine/imageengine-helpers`
View on [npm](https://www.npmjs.com/package/@imageengine/imageengine-helpers)
Types:
```
export type IEFormat =
"png" |
"gif" |
"jpg" |
"bmp" |
"webp" |
"jp2" |
"svg" |
"mp4" |
"jxr" |
"avif"
"jxl" ;
export type IEFit =
"stretch" |
"box" |
"letterbox" |
"cropbox" |
"outside" ;
export interface IEDirectives {
width?: number; // the intrinsic width of the final image
height?: number; // the intrinsic height of the final image
auto_width_fallback?: number; // if WURFL device detection should be tried with a
// fallback value in case it fails
scale_to_screen_width?: number; // 0-100 float
crop?: [number, number, number, number]; // [width, height, left, top]
format?: IEFormat; // the output format
fit?: IEFit; // the image fit in relation to the provided width/height
compression?: number; // 0-100
sharpness?: number; // 0-100
rotate?: number; // -360-360
inline?: true; // convert image to dataURL
keep_meta?: true; // keep EXIF image data
no_optimization?: true; // don't apply IE optimizations
force_download?: true;
max_device_pixel_ratio: 2.1; // 1-4 float
};
```
For instance:
```js
import { build_IE_url, build_IE_directives, build_IE_query_string } from "imageengine-helpers";
let directives: IEDirectives = {
width: 400,
height: 200,
fit: "cropbox",
compression: 10,
inline: true,
format: "png",
force_download: true,
max_device_pixel_ratio: 2.1
};
let source_url: string = "https://my_ie_distribution.imgeng.io/path/to_asset1.jpg";
let final_url: string = build_IE_url(source_url, directives);
/*
"https://my_ie_distribution.imgeng.io/path/to_asset1.jpg?imgeng=/w_400/h_200/m_cropbox/cmpr_10/in_true/f_png/dl_true"
*/
let directives_string: string = build_IE_directives(directives);
/*
"/w_400/h_200/m_cropbox/cmpr_10/in_true/f_png/dl_true"
*/
let query_string: string = build_IE_query_string(directives);
/*
"?imgeng=/w_400/h_200/m_cropbox/cmpr_10/in_true/f_png/dl_true"
*/
```