@slicknode/image-transform

Slicknode Image Transform Handler for Express

Resizes and transforms images for Slicknode GraphQL servers, backed by AWS S3 (compatible) image storage. It consists of a handler that can be added to any express server to generate the images and a function to generate secure unguessable URLs to the thumbnails.

Features

• Image Resizing
• Image Cropping
• Image Flipping (vertically + horizontally)
• Smart image cropping (to prevent cutting off faces and image focus areas)

Installation

Install NPM package

yarn add @slicknode/image-transform

Usage

Mount the image handler somewhere in your express app:

import express from 'express';
import {imageHandler} from '@slicknode/image-transform';

const app = express();
app.use('/images', imageHandler({
  // S3 bucket name where source images are stored
  bucket: 'my-s3-bucket',

  // Secret to secure thumbnail URLs
  secret: 'xyz-some-secret',

  // S3 bucket where resized images are cached
  cacheBucket?: 'my-image-cache-bucket',

  // AWS S3 Client Configuration
  // If not provided, credentials etc. will be loaded from environment, IAM
  clientConfig?: AWS.S3.Types.ClientConfiguration;
}));
// ...

To generate a URL to a transformed image:

import { getUrl } from '@slicknode/image-transform';

const imageUrl = getUrl({
  // URL to the image transform server (or CDN that sits in front of the image handler)
  endpoint: 'http://example.com/images',

  // Secret key to generate URLs, needs to match secret configured in image handler
  secret: 'secretkeyxyz',

  // Width of the generated image
  width: 10,

  // Height of the generated image
  height: 20,

  // Storage key inside of the S3 bucked
  image: 'some/image.jpg',

  // Resize method, other options "FIT", "SMART"
  resizeMethod: ImageResizeMethod.CROP,
});

Testing

To run the test suite:

yarn test

Build

Create a production build:

yarn build