Serverless-Image-Resizer is an image processing service that runs on AWS Lambda and S3.
Put simply, Serverless-Image-Resizer works by requesting an image file from S3 and applying image processing functions to that image. Image processing functions are sent as query parameters in the request URL. Serverless-Image-Resizer first checks to see if the requested image (including effects) is stored in S3. If it is, then the cached version is returned. If it is not, then the processing functions are applied to the original image, and the resulting image is cached in S3 and sent back to the requester.
The original image on the left has been vertically resized to 300 px and has had a blur of radius 0
and sigma 3 applied to create the image on the right. The URL to perform this effect would be
https://API-URL.com/path/to/image.jpg?h=300&b=0x3
.
Original | Edited |
---|---|
![]() |
![]() |
This project relies on AWS + The Serverless Framework to deploy and manage your service. If it is not already, install serverless globally:
$ npm install -g serverless
You will need an AWS account to deploy this service. If you do not already have one, sign up at https://aws.amazon.com
You will need AWS credentials to programmatically deploy your service from the commandline. Follow the Serverless AWS Credentials documentation to get setup.
There are two ways to get the project code, choose from one of the options:
- Clone the project and deploy from that project directory
- npm install the module and incorporate it into your own project
$ git clone https://github.com/nicholasgubbins/Serverless-Image-Resizer.git && cd Serverless-Image-Resizer
$ git checkout $(git describe --tags `git rev-list --tags --max-count=1`) # checkout latest release
$ npm i # or $ yarn
In your project directory, npm install the node module and the browserify serverless plugin:
$ npm install --save serverless-image-resizer
$ npm install --save-dev serverless-plugin-browserify
You can change where the function handlers live by editing functions.FUNCTION_NAME.handler
in
serverless.yml
, but using the paths that are there now, you would use serverless-image-resizer
by creating the files below:
// in functions/resizeImage/index.js
const { resizeImage } = require('serverless-image-resizer');
module.exports.handler = resizeImage.handler;
// in functions/getImage/index.js
const { getImage } = require('serverless-image-resizer');
module.exports.handler = getImage.handler;
You will also need to copy serverless.yml
to the top level of your project directory.
In serverless.yml
change provider.environment.BUCKET
to be the name of your S3 bucket.
Using serverless, deploy the service from the top level of the project:
$ sls deploy
Currently, there is no way to configure Binary Support using serverless (related serverless issue). For now we can set this manually using the AWS Console:
- Open the AWS Console
- Click the API Gateway Service
- Click on your service in the left sidebar
- Click "Binary Support"
- Click the "Edit" button on the right side of the page
- Add
*/*
to the text input and click "Save" - Click on your service in the left sidebar
- The "Actions" dropdown button should have an orange dot next to it, click on the "Actions" button.
- Click on "Deploy API" in the dropdown menu
- Select the "dev" service (or another service if you have configured one)
- Click the "Deploy" button
Once you've reach this point your service is ready to use.
You can run $ sls info
to print out the details about your service. You should see one "endpoint"
that has a GET
method. Copy this URL and paste it into your browser. Replace {proxy+}
with a
path to one of your images in S3 (omitting the BUCKET_NAME
defined in serverless.yml
). For
example:
https://LAMBDA-ID.execute-api.eu-west-1.amazonaws.com/dev/path/to/image.png
Serverless-Image-Resizer supports the following query params:
Parameter | Description | Format | Example |
---|---|---|---|
w | width | number | ?w=150 |
h | height | number | ?h=200 |
w&h | crop | number | ?w=150&h=200 |
f | filter | string | ?q=Point |
q | quality | number | ?q=2 |
m | max | number | ?m=3 |
b | blur | numberxnumber | ?b=0x7 |
For example:
https://LAMBDA-ID.execute-api.eu-west-1.amazonaws.com/dev/path/to/image.png?w=100&h=200&b=0x3
AWS Lambda
supports node 6.10.2
so that should be used during development. If you have nvm
installed you can run $ nvm use
to use the version in the .nvmrc
file.
This project uses the eslint-config-airbnb linting configuration. To run eslint execute the lint command:
$ npm run lint
Tests are written and executed using Jest. To write a test,
create a FILE_NAME.spec.js
file and Jest will automatically run it when you execute the test
command:
$ npm test
$ npm run test:watch # to test as you develop
$ npm run test:coverage # to test code coverage
Note that npm run test:coverage
will create a coverage
folder that is gitignored.