https://github.com/notwoods/thumbor-es
TypeScript Thumbor client for Node, Deno, Bun, & browsers
https://github.com/notwoods/thumbor-es
deno image-processing nodejs thumbor typescript
Last synced: 5 months ago
JSON representation
TypeScript Thumbor client for Node, Deno, Bun, & browsers
- Host: GitHub
- URL: https://github.com/notwoods/thumbor-es
- Owner: NotWoods
- License: apache-2.0
- Created: 2024-07-13T07:18:22.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-08T06:05:47.000Z (over 1 year ago)
- Last Synced: 2024-10-14T08:20:56.394Z (over 1 year ago)
- Topics: deno, image-processing, nodejs, thumbor, typescript
- Language: TypeScript
- Homepage: https://jsr.io/@notwoods/thumbor-es
- Size: 40 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# thumbor-es
_TypeScript Thumbor client for Node, Deno, Bun, & browsers_
[](https://jsr.io/@notwoods/thumbor-es)
TypeScript client for the
[Thumbor image service](https://github.com/globocom/thumbor) which allows you to
build URIs in an expressive fashion using a fluent API.
This library is fully compatible with all JS runtimes (using the
[Web Cryptography API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)).
It's heavily based on Square's [Pollexor](https://github.com/square/pollexor)
library for Java.
Documentation for the different options and filters can be found in the JSDoc
and [on JSR](https://jsr.io/@notwoods/thumbor-es/doc/filters).
## Installation
```sh
# deno
deno add jsr:@notwoods/thumbor-es
# npm
npm install thumbor-es
```
## Examples
```ts
// Without encryption:
const url = await buildThumborUrl({ image: "http://example.com" });
// With encryption:
const url = await buildThumborUrl({ image: "http://example.com", key: "key" });
```
```ts
const url = await buildThumborUrl({
image: "http://example.com/image.png",
resize: { width: 48, height: 48 },
});
// Produces: /unsafe/48x48/example.com/image.png
const url = await buildThumborUrl({
image: "http://example.com/image.png",
crop: { top: 10, left: 10, bottom: 90, right: 90 },
resize: { width: 40, height: 40 },
smart: true,
});
// Produces: /unsafe/10x10:90x90/smart/40x40/example.com/image.png
const url = await buildThumborUrl({
image: "http://example.com/image.png",
crop: { top: 5, left: 5, bottom: 195, right: 195 },
resize: { width: 95, height: 95 },
align: { horizontal: "bottom", vertical: "right" },
});
// Produces: /unsafe/5x5:195x195/right/bottom/95x95/example.com/image.png
const url = await buildThumborUrl({
image: "http://example.com/image.png",
resize: { width: 200, height: 100 },
filters: [
roundCorner(10),
watermark(
await buildThumborUrl({
image: "http://example.com/overlay1.png",
resize: { width: 200, height: 100 },
}),
),
watermark(
await buildThumborUrl({
image: "http://example.com/overlay2.png",
resize: { width: 50, height: 50 },
}),
{ x: 75, y: 25 },
),
quality(85),
],
});
// Produces: /unsafe/200x100/filters:round_corner(10,255,255,255):watermark(/unsafe/200x100/example.com/overlay1.png,0,0,0):watermark(/unsafe/50x50/example.com/overlay2.png,75,25,0):quality(85)/example.com/background.png
```
## Comparison to other libraries
thumbor-es has a JavaScript-style API with an options object, unlike other older
libraries using Java-style builder classes. It's also built with the latest
browsers in mind, and is tinier, faster, and has 100% test coverage.