ImageFLY: On-the-fly image transformations

An Azure Function App using TypeScript for on-the-fly image transformations. View the blog post for more information.

^ Thanks DALL·E for the "High quality photo of a fly riding a space rocket"

This repo can be found at the following remotes:

1. GitHub: desholmes/imagefly
2. Azure DevOps: DesHolmes/_git/imagefly

The example function app uses https://dholmes.co.uk/img/ as the ORIGIN:

1. Original Image: dholmes.co.uk/img/docker-tagging.png (PNG, 453kb, ~51ms)
2. ImageFly webp (defaults): imagefly.dholmes.co.uk/docker-tagging.png (58kb, ~38ms)
3. ImageFly jpeg (format:jpeg, quality:30): imagefly.dholmes.co.uk/docker-tagging.png?format=jpeg&quality=30 (48kb, ~35ms)

Note: The example response times provided are based on a warmed up cache, initial response times will be slower.

See the full list of supported query params in the Usage section below.

System Overview

It's recommended to use ImageFLY with an Azure CDN to reduce the number of requests to the function app, and improve performance.

Usage

GET: /api/v1/image/{imagePath}

• Transforms and image based on the ORIGIN environment variable and the imagePath route parameter
• Query Params:
  • format: string: The format of the image; Supports: jpeg, png, webp (Default: webp)
  • quality: number: The quality of the image, Supports: 0-100 (Defaults: 50)

Returns: A transformed image, or a 404 if the image is not found.

Example: Returns format: webp, quality:30: imagefly.dholmes.co.uk/docker-tagging.png?format=webp&quality=30

GET: /api/v1/health-check

• Health check route
• Request URL GET: /api/v1/health-check

Used by monitoring to check system health.

Example response:

{
  "error": false,
  "message": "Service is available"
}

---

Development

Prerequisites

1. An installation of Node.js v18.12.1 (npm v8.19.2)
2. An installation of Azure Functions Core Tools v4
3. An installation of VSCode with the following extensions:
   1. Spelling Checker
   2. ESLint
   3. Prettier
4. A working knowledge of:
   1. Azure Functions (and the VsCode extension is installed)
   2. Node.js
   3. TypeScript

Getting Started

1. Review and complete the Prerequisites above
2. Copy ./local.settings-template.json to ./local.settings.json and replace the required environment variables
3. npm i: Install dependencies
4. npm run start:dev: Start the local DEV environment
5. Press CTRL+c to stop the local DEV environment

Environment Variables

Name	Description
LIMITER_TOKENS	number: Optional - The number of tokens to allow per LIMITER_INTERVAL (Default: 150)
LIMITER_INTERVAL	string: Optional - The interval (Default: hour)
ORIGIN	string: Required - The origin of the image source.
AzureWebJobs.v1HeathCheck.Disabled	boolean: Optional - To disable the v1HeathCheck function
AzureWebJobs.v1Image.Disabled	boolean: Optional - To disable the v1Image function

Commands

Command	Description
npm start	Starts the Function App in Azure func start
npm start:dev	Starts a local dev environment by running npm start and npm run watch concurrently
npm run build	Create a build tsc
npm run watch	Watch and create a build tsc tsc -w
npm run audit	Runs npm audit --production --audit-level=critical to check for known vulnerabilities
npm run lint	Run eslint eslint --max-warnings=0 --ext=ts,json ./
npm run lint:fix	Run eslint with fix arg eslint --max-warnings=0 --fix --ext=ts,json ./

Credits

• Des Holmes: Technical Leadership & Product Development
  • About Blog
  • Skills & knowledge: Technical Leadership, Technical Direction, Technical Delivery, Product Development, SaaS, DevOps, Azure Public Cloud
  • Job Titles: CTO, VP Engineering, Head of DevOps, Technical Product Owner
  • Example Projects: Development standards, DevOps, CI/CD, React, docker, Cost Management
  • Contact: LinkedIn Twitter
• sharp: Fast image transformation library
• limiter: Rate limiter
• ChatGPT: For the moral support
• GitHub Copilot: For populating the boring stuff