Skip to content

πŸŒ† A dependency-free query string builder for Imgix in TypeScript.

License

Notifications You must be signed in to change notification settings

Hackdoor-io/imgix

Repository files navigation

Build Status Codecov npm bundle size npm npm

Query builder for Imgix.

Installation

npm i -S @hackdoor/imgix
#or
yarn add @hackdoor/imgix

Usage

import Imgix from '@hackdoor/imgix'

const imgix = new Imgix('https://my-imgix-server-url.com')
const myImage = imgix
  .build()
  .width(300)
  .height(500)
  .fit('crop')
  .get('/my-image-path')

console.log(myImage)
// => "https://my-imgix-server-url.com/my-image-path?fit=crop&w=300&h=500"

Methods Legenda

Available Methods

Currently available methods. Let's pretend whe have the following Imgix instance:

import Imgix from '@hackdoor/imgix'

const imgix = new Imgix('https://my-endpoint.imgix.net')

Converting S3 URL to Imgix Url

import Imgix from '@hackdoor/imgix'

const imgix = new Imgix('https://my-endpoint.imgix.net')
const myImage = imgix
  .build()
  .width(300)
  .height(500)
  .fit('crop')
  .fromS3('https://my-s3-bucket.s3.amazonaws.com/foo/bar/baz.png')

console.log(myImage)
// => "https://my-endpoint.imgix.net/foo/bar/baz.png?w=500&h=600&fit=crop"

Adjustments

A number between -100 and 100

imgix.brightness(50)

A number between -100 and 100

imgix.contrast(50)

A number between -100 and 100

imgix.exposure(50)

A number between -100 and 100

imgix.gamma(50)

A number between -100 and 0

imgix.highlight(-50)

A number between 0 and 359

imgix.hueShift(50)

A boolean value

imgix.invert(true)

A number between -100 and 100

imgix.saturation(50)

A number between 0 and 100

imgix.shadow(50)

A number between 0 and 100

imgix.sharpen(50)

A number between -100 and 100

imgix.unsharpMask(50)

A number between -100 and 100

imgix.unsharpMaskRadius(50)

A number between -100 and 100

imgix.vibrance(50)

Blending

A string representing an hex color (#000) or an image url (https://example.com/img.jpg)

imgix.blend('#F500F0')

One of the following values: top, middle, bottom, left, center, right

imgix.blendAlign('top')

One of the following values: top, middle, bottom, left, center, right, faces

imgix.blendCrop('faces')

Size

A string in the form of W:H (width, height)

imgix.aspectRatio('16:9')

A number

imgix.width(1920)

A number

imgix.height(1080)

Format

A string, one of: gif, jp2, jpg, json, jxr, pjpg, mp4, png, png8, png32, webm, webp

imgix.format('png')

A number between 0 and 100

imgix.quality(75)

Rotation

A string, one of: v, h and vh

imgix.flip('v')

A number between 1 and 8 or 90, 180, 270

imgix.orient(90)

A number between 0 and 359

imgix.rotation(180)

Color Palette

A number between 0 and 16

imgix.colors(5)

A string, one of: css, json

imgix.palette('json')

A string, one of: compress, enhance, format, redeye

imgix.auto('compress')

License

FSF

Licensed under the GPLv3 license.