@outstem/image-handler-helper

Outreach Image Handler Javascript Library

This library aims to simplify the process of accessing images from the public image handler by streamlining and abstracting URL construction process.

Currently, there are the following methods that allow developers to quickly spawn an image URL and make simple edits.

Documentation

getImageURL(imageKey: string, imageEdits: ImageEditOptions, imageBucket: string)

Construct an URL for an image using the new image handler

• imageKey The S3 Key of the image
• imageEdits (optional) Any edits to perform on the image
• imageBucket (optional) The bucket where the image is located

getImageURLWithS3URL(S3URL: string, imageEdits: ImageEditOptions)

Get an image handler URL from an S3 URL. Like these ones:

https://bucket.s3.amazonaws.com/test/file.png?AWSAccessKeyId=AKIAZFD6JXZT3O6S2UBY&Signature=SOME_SIGNATURE&Expires=SOME_EXPIRE_DATE

https://bucket.s3.amazonaws.com/test/file.png

• url The S3 URL for the image
• edits (optional) The edits to perform on the image

Image Editing Options

There are many edits you can perform using the new image handler. They are usually passed in as the imageEdits argument.

{
  /**
   * Convert to 8-bit greyscale; 256 shades of grey.
   */
  grayscale?: boolean;
  /**
   * Flip the image about the vertical Y axis. This always occurs after rotation, if any. The use of `flip` implies the removal of the
   * EXIF Orientation tag, if any.
   */
  flip?: boolean;
  /**
   * Flop the image about the horizontal X axis. This always occurs after rotation, if any. The use of `flop` implies the removal of the
   * EXIF Orientation tag, if any.
   */
  flop?: boolean;
  /**
   * Produce the "negative" of the image. Use to see results.
   */
  negate?: boolean;
  /**
   * Merge alpha transparency channel, if any, with a background.
   *
   * Usually used for PNG files with transparent channels
   */
  flatten?: boolean;
  /**
   * Enhance output image contrast by stretching its luminance to cover the full dynamic range.
   *
   * You likely will not use
   */
  normalise?: boolean;
  /**
   * Tint the image using the provided chroma while preserving the image luminance. An alpha channel may be present and will be
   * unchanged by the operation.
   */
  tint?: RGB;
  /**
   * Resize the image to crop or compress image.
   */
  resize?: ResizeOptions;
  background?: RGBA;
  /**
   * Blur the image. Performs a Gaussian blur based on the radius provided.
   */
  blur?: number;
  /**
   * Rotate the output image by either an explicit angle.
   *
   * If an angle is provided, it is converted to a valid positive degree rotation.
   * For example, -450 will produce a 270deg rotation.
   */
  rotate?: number;
}

Continued Work & Contributions

• Test and add more SharpJS functionalities that are supported by the Image Handler
• Add additional Helpers for more ease of access.