thumbor-client

A simple and efficient Thumbor client for TypeScript/JavaScript (works on node and browser).

Installation

# via npm
$ npm i thumbor-client

# via yarn
$ yarn add thumbor-client

# via bun
$ bun add thumbor-client

Simple usage

1import { createThumbor } from 'thumbor-client'
2
3const thumbor = createThumbor({
4    url: 'https://your-thumbor.com',
5    key: 'secret'
6})
7
8const imgUrl = thumbor
9    .fromUrl('https://cataas.com/cat')
10    .smartCrop(true)
11    .resize(300, 200)
12    .buildURL()
13
14console.log(imageUrl) 
15// https://your-thumbor.com/unsafe/300x200/smart/https://cataas.com/cat

Using from CDN

You can use thumbor-client from a CDN via a script tag:

1<script src="https://unpkg.com/thumbor-client/dist/thumbor-client.js"></script>

Here we are using unpkg, but you can also use any CDN that serves npm packages, for example jsdelivr or cdnjs. Of course, you can also download this file and serve it yourself.

When using thumbor-client from a CDN, there is no "build step" (bundler) involved. This makes the setup a lot simpler, and is suitable for enhancing static HTML or integrating with a backend framework. However, you won't be able to use frameworks.

Using the ES Module Build

Throughout the rest of the documentation, we will be primarily using ES modules syntax. Most modern browsers now support ES modules natively, so we can use thumbor-client from a CDN via native ES modules like this:

1<script type="module">
2  import { createThumbor } from 'https://unpkg.com/thumbor-client/dist/thumbor-client.js'
3
4  const thumbor = createThumbor({
5      url: 'https://your-thumbor.com',
6      key: 'secret'
7  })
8
9  const imgUrl = thumbor
10      .fromUrl('https://cataas.com/cat')
11      .smartCrop(true)
12      .resize(300, 200)
13      .buildURL()
14
15  console.log(imageUrl)
16  // https://your-thumbor.com/unsafe/300x200/smart/https://cataas.com/cat
17</script>

Enabling Import maps

In the above example, we are importing from the full CDN URL, but in the rest of the documentation you will see code like this:

1import { createThumbor } from 'thumbor-client'

We can teach the browser where to locate the thumbor-client import by using Import Maps:

1<script type="importmap">
2  {
3    "imports": {
4      "thumbor-client": "https://unpkg.com/thumbor-client/dist/thumbor-client.js"
5    }
6  }
7</script>
8
9<script type="module">
10    import { createThumbor } from 'thumbor-client'
11
12    const thumbor = createThumbor({
13        url: 'https://your-thumbor.com',
14        key: 'secret'
15    })
16
17    const imgUrl = thumbor
18            .fromUrl('https://cataas.com/cat')
19            .smartCrop(true)
20            .resize(300, 200)
21            .buildURL()
22
23    console.log(imageUrl)
24    // https://your-thumbor.com/unsafe/300x200/smart/https://cataas.com/cat
25</script>

LICENSE

MIT

Copyright

© 2023 azabroflovski