• This repository has been archived on 11/May/2021
  • Stars
    star
    105
  • Rank 328,196 (Top 7 %)
  • Language
    TypeScript
  • License
    Apache License 2.0
  • Created about 7 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

AWS Lambda image processor

serverless-image-processor

Build Status Coverage Status Greenkeeper badge code style: prettier 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;
}

Deployment

If you want to deploy this project to AWS please have a look at this documentation https://serverless.com/framework/docs/providers/aws/guide/quick-start/
It should give you a very good starting point.

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

More Repositories

1

rust-for-node-developers

An introduction to the Rust programming language for Node developers.
Rust
1,764
star
2

component-check

A quick introduction to exploring how components can be created in several frameworks.
465
star
3

dwatch

Manage your docker containers, images and networks in a nice and clean way.
TypeScript
147
star
4

react-with-typescript

Small examples which show how React can be used with TypeScript
TypeScript
90
star
5

e2e-check

A simple overview about current E2E testing solutions for web apps.
TypeScript
37
star
6

spring-security-jwt

JWT support for spring-security
Java
30
star
7

rest-schemagen

Jersey add-on for dynamic link and schema building
Java
17
star
8

factcast

This project is archived. A friendly fork can be found at https://github.com/factcast/factcast/
Java
14
star
9

ws

scripts for building web projects
TypeScript
13
star
10

less-plugin-bower-resolve

Import Less files from Bower packages
JavaScript
11
star
11

rest-hateoas-client

Java
8
star
12

test-clock

A windable clock for tests.
Java
8
star
13

frontend-unit-tests-examples

How to write unit tests in our current frontend stack.
TypeScript
5
star
14

default-immutables

Default-Styles and Helper-Classes for common use cases of Immutables.
Java
5
star
15

how-to-debug-javascript

To console.log or to not console.log?
HTML
4
star
16

jsonhoist

Library for chained JSON Transformation (for instance Up-/Down-casting) according to a ruleset stored in a repository.
Java
4
star
17

sqs-utils

Java
3
star
18

reform

3
star
19

reflection

Java
2
star
20

functionaljava-demo

Java
2
star
21

json-schema

Configurable JSON schema generation. Rewrite of JSON schema component of rest-schemagen.
Kotlin
2
star
22

react-remove-props-loader

Webpack loader for removing React props or JSX attributes in TypeScript/JavaScript code.
TypeScript
2
star
23

cycle-live-edit-starter

A starter template which shows how to get live editing features for CSS, HTML and JS in a Cycle.js application.
JavaScript
2
star
24

ddd-applied

eventsourced DDD example implementation
Kotlin
2
star
25

mercateo-spring-boot-starter-hornetq-cluster

mercateo-spring-boot-starter-hornetq-cluster
Java
2
star
26

import-inject-loader

Overwrite your dependencies with mocks and custom implementations.
JavaScript
2
star
27

rest-jersey-utils

Java
2
star
28

counter-component-with-react-mobx-fela

This an example which shows how you can create a component with React, MobX and Fela.
TypeScript
1
star
29

typedocs

Generate documentation for TypeScript projects.
TypeScript
1
star
30

rest-schemagen-spring

Spring configuration for common.rest.schemagen
Java
1
star
31

github-node-client-demo

JavaScript
1
star
32

sb-status

Ops tool to retrieve Health Status of a running Boot Application as well as its maven version
Java
1
star
33

live-edit-starter

A starter template which shows how to get live editing features for CSS, HTML and JS.
JavaScript
1
star
34

rest-demo-feature

Java
1
star