Generate image editing modifiers for ImageKit.io

getImageKitModifiers.js

/*
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;