Git Product home page Git Product logo

serverless-image-processor's Introduction

serverless-image-processor

Build Status Coverage Status Greenkeeper badge code style: prettier NSP Status Maintainability License

This is a Serverless starter for an image processing lambda. It will create a Cloudfront Distribution, an API Gateway, a image source Bucket and a Lambda function. It's based on the phenomenal sharp image manipulation and conversion library.

Request flow is:
User -> Cloudfront -> API Gateway -> Lambda

Demo

test.png test.jpg test.gif https://d1tk3y1sqx2xzp.cloudfront.net/test.png?width=200 https://d1tk3y1sqx2xzp.cloudfront.net/test.jpg?width=200 https://d1tk3y1sqx2xzp.cloudfront.net/test.gif?width=200

Supported formats

Input: image/jpeg, image/png, image/gif
Output: image/jpeg, image/png, image/webp

Query params

export interface QueryParams {
  /**
   * The width/height of the output image.
   * If you specify only one dimension (width or height) the image will be scaled respecting the ratio.
   * If you specify both the image will be croped to the center if possible.
   * If nothing is specified the width will default to 1920.
   * Allowed values: 1 - 5000
   */
  width?: number;
  height?: number;

  /**
   * Do not enlarge the output image if the input image width or height are already less than the required dimensions. 
   * Default: true
   */
  withoutEnlargement?: boolean;

  /**
   * Preserving aspect ratio, resize the image to the maximum width or height specified then embed on a background of the exact width and height specified.
   * Default: false
   */
  embed?: boolean;

  /**
   * Sets the background for embed mode.
   * Accepts every string format which is accepted by https://www.npmjs.com/package/color.
   * Default: black
   */
  background?: string;

  /**
   * Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to the width and height specified.
   * Both width and height must be provided via resize otherwise the behaviour will default to crop.
   * Default: false
   */
  max?: boolean;

  /**
   * Converts the input image to jpg.
   * Default: false
   */
  jpg?: boolean;

  /**
   * Converts the input image to webp.
   * Default: false
   */
  webp?: boolean;

  /**
   * Specifies the output quality for jpg and webp.
   * Allowed values: 1 - 100
   * Default: 75
   */
  quality?: number;

  /**
   * Specifies if the output is a progressive image.
   * Only for jpg and png output.
   * Default: true
   */
  progressive?: boolean;

  /**
   * Blur the image.
   * Needs a value between 0.3 and 100 representing the sigma of the Gaussian mask, where sigma = 1 + radius / 2.
   * Keep in mind higher values will be very slow.
   */
  blur?: number;

  /**
   * If true the output image will be normalized to enhance
   * contrast by stretching its luminance to cover the full dynamic range.
   * Default: false
   */
  normalize?: boolean;
}

Local development

  1. $ yarn
  2. $ yarn start

That's it! :)

The start command will spin up an offline version of an API Gateway and a local S3 server (via serverless-offline). After this you can query some test images (test.gif, test.jpg and test.png) via http://localhost:3000.

Contributing

Please feel free to open issues or create PRs. :)
Just run the test suites (yarn test and yarn test:e2e) and create new tests for added features. Also make sure you run yarn lint (and yarn lint:fix) to check for code style issues. Notice: the end to end tests may fail on your setup. I work on this :/

A note on updating sharp

sharp is fixed at version 0.20.1. If you plan to upgrade please follow this guide and place the output in the compiled/ folder.

Credits

Example photos by Adi Constantin, Michael DePetris, Blake Connally on Unsplash

serverless-image-processor's People

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.