Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Image Transformation middleware 📷 #11

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Image Transformation middleware 📷 #11

wants to merge 9 commits into from

Conversation

blenderskool
Copy link
Owner

@blenderskool blenderskool commented Jul 31, 2022 •
edited
Loading

The image transformation middleware performs on-demand image transformations that are useful while consuming user-uploaded images on the web.
It is inspired by tools like Cloudinary and imgix and also leverages the power of existing middlewares in diode for caching, rate-limiting, etc.

Current experimental version of this middleware includes following transformations that can be applied with their respective query param:

  • width: w
  • height: h
  • fit: fit
  • image file format: fm
  • quality: q
  • color quantization: colorquant
  • smart crop strategy: crop

2nd Aug

  • blur: blur
  • saturation: sat
  • brightness: bright
  • contrast: cont
  • progressive jpegs: prog

11th Sept

  • masking: mask

...More to be added soon.

Example usage:

http://diode.local/api/v1/jdia90aDAKlBb3?w=512&q=50&fm=webp

This request does the following:

  • Sends a request to underlying origin endpoint for the image.
  • Makes the image's width to 512px while preserving aspect ratio.
  • Updates the quality of the image to 50. This helps with file size reduction by dropping some image quality.
  • Converts the image to webp, a better file format for serving images on the web.
  • If the API route has caching enabled, it will also cache the image in the redis store for the given amount of time.

Demo:

screen-capture.mp4

Performance:
Performance tests haven't been done yet. The middleware uses sharp module which internally uses libvips and claims to be really fast when compared to other libraries out there.

Other notable changes:

  • The API response middlewares pipeline has been refactored to use Buffers for storing data instead of pipelines as it is more compatible with operations performed by the middlewares in diode.
  • Package updates:
  • Bug fix: Trailing slash added to origin API url when making a request causing it to fail for some origin endpoints.

@vercel
Copy link

vercel bot commented Jul 31, 2022 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
diode ✅ Ready (Inspect) Visit Preview Sep 11, 2022 at 8:51AM (UTC)

@blenderskool
Upgrade next to 12.1, ioredis to 5, ioredis-mock to 8
9dd05b1 
Updates in ioredis-mock have fixed the issue that had caused
diode to use nextjs 11
@blenderskool
Fix trailing slash added at the end of the request URL
293054a
@blenderskool
Add mime as a dependency
f8d4a35
@blenderskool
Add more image transformation options
c68abf4 
Options that have been added:
- blur
- saturation
- brightness
- contrast
- progressive
@blenderskool
Refactor image transform middleware to work on original request
dfe24fb 
Before this change, `diode-image` query param was used to get the
image bypassing the original endpoint. This was against how rest
of the Diode worked and is not refactored to operate on the
response of original endpoint
@blenderskool
Add mask parameter
5e000aa 
`'circle'` and `'ellipse'` masks have been added using
compositing capabilities of sharp.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@blenderskool