Using The BlurHash Algorithm With A TypeScript Azure Function

^ That’s a BlurHash’d image, not a UFO 😄

TLDR;

Here’s an Open Source repo containing an Azure Function written in TypeScript to encode and decode images using the BlurHash algorithm.

It’s hosted under blurhash.dholmes.co.uk, with a demo on the homepage, and an API, see usage docs below.

Background

The demand for high-quality images has never been greater. However, with higher quality comes larger file sizes, which can make loading times slow and frustrating for users. This is where the BlurHash algorithm comes in.

BlurHash is a compact representation of a placeholder image that can be used to quickly display a preview of the actual image while it’s being loaded. This technique is especially useful for applications and websites that display many images at once, such as social media platforms or online marketplaces.

Usage

GET: /api/v1/blur-hash

• Decodes a BlurHash and return a jpeg with the specified dimensions
• Request URL GET: /api/v1/blur-hash
  • Required URL Params:
    • blurhash: blurhash for the image
    • width: Width of the decoded image
    • height: Height of the decoded image

Returns a jpeg based on the URL params if the BlurHash is valid.

Example error response (400):

{
  "error": true,
  "message": "The blurhash is invalid - blurhash length mismatch: length is 18 but it should be 28"
}

POST: /api/v1/blur-hash

• Encodes an image and returns a BlurHash
• Request URL POST: /api/v1/blur-hash
  • Required Body Param:
    • imageUrl: URL for the image

Returns BlurHash if the URL is valid and publicly accessible.

Example request body:

{
    "imageUrl": "http://dholmes.co..uk/blog/getting-a-perfect-google-lighthouse-score/"
}

Example error response (404):

{
  "error": true,
  "message": "imageUrl <imageUrl> could not be loaded"
}

Remotes for the API repo:

1. GitHub - desholmes/blurhash.dholmes.co.uk
2. Azure DevOps - DesHolmes/blurhash.dholmes.co.uk

Popular related posts for Azure, Azure DevOps and CI/CD:

• Azure DevOps Pipelines: Frontend Code Quality Checks
• GitHub Actions: Frontend Code Quality Checks
• GitLab CI/CD: Frontend Code Quality Checks
• 5 steps to reduce your React app CI/CD build minutes