Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generate image editing modifiers for ImageKit.io
/*
Usage:
import getImageKitModifierQueryString from "getImageKitModifiers.js";
const IMAGEKIT_CDN_ROOT = "https://ik.imagekit.io/my-app/";
const myImageKey = "image.jpg";
const modifierQueryString = getImageKitModifierQueryString({
width: 45,
height: 45,
progerssive: true,
focus: 'auto'
});
const fullUrl = IMAGEKIT_CDN_ROOT + myImageKey + modifierQueryString;
// -> "https://ik.imagekit.io/my-app/image.jpg?w-45,h-45,pr-true,fo-auto"
*/
function getImageKitModifiers({
width,
height,
aspectRatio,
crop, // maintain_ratio , force , at_least , at_max
cropMode, // resize , extract, pad_resize , pad_extract
focus, // center , top , left , bottom , right , top_left , top_right , bottom_left , bottom_right, auto
quality, // 0-100
format, // jpg , jpeg , png, auto
blur, // 1-100
grayscale, // Boolean
dpr, // 0.1 to 5
namedTransformation, // String
defaultImage, // String
progressive, // Boolean
lossless, // Boolean
trimEdges // 1-99
}) {
return "?tr=" + [
width ? ('w-' + width) : "",
height ? ('h-' + height) : "",
aspectRatio ? ('ar-' + aspectRatio.width + "-" + aspectRatio.height) : "",
crop ? ('c-' + crop) : "",
cropMode ? ('cm-' + cropMode) : "",
focus ? ('fo-' + focus) : "",
quality ? ('q-' + quality) : "",
format ? ('f-' + format) : "",
blur ? ('bl-' + blur) : "",
grayscale ? 'e-grayscale' : "",
dpr ? ('dpr-' + dpr) : "",
namedTransformation ? ('n-' + namedTransformation) : "",
defaultImage ? ('di-' + defaultImage) : "",
progressive ? 'pr-true' : "pr-false",
lossless ? 'lo-true' : "lo-false",
trimEdges ? ('t-' + trimEdges) : "",
].
filter(str => str.length > 0).
join(",")
}
export default getImageKitModifiers;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment