GithubHelp home page GithubHelp logo

bhalawaty / aws-lambda-edge-image-process Goto Github PK

View Code? Open in Web Editor NEW

This project forked from foamzou/aws-lambda-edge-image-process

0.0 1.0 0.0 11 KB

Best Practices for using Lambda@Edge to process images on AWS

Shell 1.25% Dockerfile 2.73% JavaScript 96.03%

aws-lambda-edge-image-process's Introduction

English | 简体中文

Best Practices for using Lambda@Edge to process images on AWS

Provides docker environment and code which process image. Welcome to star, fork or PR to improve the practice

What’s this

For the same image link, we may response different sizes of thumbnails according to different pages. Unfortunately, AWS does not directly provide such services. But it provides lambda@edge with CloudFront to handle this kind of demand. Therefore, I designed a set of solutions to achieve the requirements of image processing. This article contains instructions, design solutions and practical steps.

Using this solution, the client can splice parameters behind the original cdn link to obtain the thumbnail, add watermark and other processing requirements.

Parameter description

url format: https://cdn-domain/filename@<value1><param1>_<value2><param2>.outputFormat

example, https://d1xxxxxxxx.cloudfront.net/foamzou/image/4951f0e35a37e5190e78798dcfcad984.jpg@1020w_160h_0e_1l_70q.webp

Parameters

  • w: Width of thumb. 1-4096
  • h: Height of thumb. 1-4096
  • e: Policy about aspect ratio. 0: Keep the aspect ratio, base on long side(Default). 1: Keep the aspect ratio, base on short side. 2: Ignore aspect ratio, force resize with width and height.
  • l: Whether to process if the target thumbnail is larger than the original image.1: no processing; 0: will processing(Default)
  • p: Percent of the size (1-1000). Less than 100 means zoom out, and greater than 100 means zoom in. If the parameter p is used in combination with w and h, p will directly act on w and h (multiply by p%) to get the new w and h. For example, 100w_100h_200p has the same effect as 200w_200h. The default value is 100
  • q: Percent of quality (1-100) . Default: 80
  • r: Whether to response progressive jpeg. 0: not used (default), 1 used. The default is 0. This parameter will take effect only when the output format is jpg. Note: 1. Small size image are not recommended, because progressive jpeg will be larger than the original image; 2. If you can use webp, try to use webp;
  • .format: Be output format. Support jpg, png, webp. No need to add .format if you keep the original format

Notice

When the total area exceeds 4096px * 4096px, or the length of one side exceeds 4096px * 4, the image will not be scaled

Details of Solution and deployment steps

Ref: 《Best Practices for using Lambda@Edge to process images on AWS》

aws-lambda-edge-image-process's People

Contributors

foamzou avatar

Watchers

 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.