@img-src/sdk

Developer-friendly & type-safe Typescript SDK specifically catered to leverage @img-src/sdk API.

Summary

img-src API: Image processing and delivery API.

A serverless image processing and delivery API built on Cloudflare Workers with parameter-driven image transformation and on-demand transcoding.

Features

• Image Upload: Store original images in R2 with SHA256-based deduplication
• On-Demand Transformation: Resize, crop, and convert images via URL parameters
• Format Conversion: WebP, AVIF, JPEG, PNG output formats
• Path Organization: Organize images into folders with multiple paths per image
• CDN Caching: Automatic edge caching for transformed images

Authentication

Authenticate using API Keys with imgsrc_ prefix. Create your API key at https://img-src.io/settings

Rate Limiting

• Free Plan: 100 requests/minute
• Pro Plan: 500 requests/minute

Rate limit headers are included in all responses.

Table of Contents

• @img-src/sdk
  • Features
  • Authentication
  • Rate Limiting
  • SDK Installation
  • Requirements
  • SDK Example Usage
  • Authentication
  • Available Resources and Operations
  • Standalone functions
  • Pagination
  • File uploads
  • Retries
  • Error Handling
  • Server Selection
  • Custom HTTP Client
  • Debugging

SDK Installation

The SDK can be installed with either npm, pnpm, bun or yarn package managers.

NPM

npm add @img-src/sdk

PNPM

pnpm add @img-src/sdk

Bun

bun add @img-src/sdk

Yarn

yarn add @img-src/sdk

[!NOTE] This package is published with CommonJS and ES Modules (ESM) support.

Requirements

For supported JavaScript runtimes, please consult RUNTIMES.md.

SDK Example Usage

Upload and Transform Images

import { Imgsrc } from "@img-src/sdk";
import { openAsBlob } from "node:fs";

// Create API key at https://img-src.io/settings
const client = new Imgsrc({
  bearerAuth: process.env["IMGSRC_API_KEY"],
});

async function main() {
  // Upload an image
  const file = await openAsBlob("./photo.jpg");
  const uploaded = await client.images.uploadImage({
    file,
    targetPath: "photos/2024",
  });
  console.log("Uploaded:", uploaded.url);

  // Access with transformations via CDN
  // https://img-src.io/i/{username}/photos/2024/photo.webp?w=800&h=600&fit=cover&q=85

  // List images
  const images = await client.images.listImages({ limit: 20 });
  console.log(`Total: ${images.total} images`);
}

main();

Authentication

Per-Client Security Schemes

This SDK supports the following security scheme globally:

| Name | Type | Scheme | | ------------ | ---- | ----------- | | bearerAuth | http | HTTP Bearer |

To authenticate with the API the bearerAuth parameter must be set when initializing the SDK client instance.

Create your API key at https://img-src.io/settings.

import { Imgsrc } from "@img-src/sdk";

const client = new Imgsrc({
  bearerAuth: process.env["IMGSRC_API_KEY"],
});

async function main() {
  const images = await client.images.listImages({ limit: 10 });
  console.log(images);
}

main();

Available Resources and Operations

Images

• uploadImage - Upload image
• listImages - List images
• searchImages - Search images
• getImage - Get image metadata
• deleteImage - Delete image
• createSignedUrl - Create signed URL
• deleteImagePath - Delete image path

Presets

• listPresets - List presets
• createPreset - Create preset
• getPreset - Get preset
• updatePreset - Update preset
• deletePreset - Delete preset

Settings

• getSettings - Get user settings
• updateSettings - Update user settings

Usage

• getUsage - Get usage statistics

Standalone functions

All the methods listed above are available as standalone functions. These functions are ideal for use in applications running in the browser, serverless runtimes or other environments where application bundle size is a primary concern. When using a bundler to build your application, all unused functionality will be either excluded from the final bundle or tree-shaken away.

To read more about standalone functions, check FUNCTIONS.md.

• imagesCreateSignedUrl - Create signed URL
• imagesDeleteImage - Delete image
• imagesDeleteImagePath - Delete image path
• imagesGetImage - Get image metadata
• imagesListImages - List images
• imagesSearchImages - Search images
• imagesUploadImage - Upload image
• presetsCreatePreset - Create preset
• presetsDeletePreset - Delete preset
• presetsGetPreset - Get preset
• presetsListPresets - List presets
• presetsUpdatePreset - Update preset
• settingsGetSettings - Get user settings
• settingsUpdateSettings - Update user settings
• usageGetUsage - Get usage statistics

Pagination

Some of the endpoints in this SDK support pagination. To use pagination, you make your SDK calls as usual, but the returned response object will also be an async iterable that can be consumed using the for await...of syntax.

Here's an example of one such pagination call:

import { Imgsrc } from "@img-src/sdk";

const imgsrc = new Imgsrc({
  bearerAuth: process.env["IMGSRC_API_KEY"],
});

async function run() {
  const result = await imgsrc.images.listImages(50, 0, "blog/2024");

  for await (const page of result) {
    console.log(page);
  }
}

run();

File uploads

Certain SDK methods accept files as part of a multi-part request. It is possible and typically recommended to upload files as a stream rather than reading the entire contents into memory. This avoids excessive memory consumption and potentially crashing with out-of-memory errors when working with very large files. The following example demonstrates how to attach a file stream to a request.

[!TIP]

Depending on your JavaScript runtime, there are convenient utilities that return a handle to a file without reading the entire contents into memory:

• Node.js v20+: Since v20, Node.js comes with a native openAsBlob function in node:fs.
• Bun: The native Bun.file function produces a file handle that can be used for streaming file uploads.
• Browsers: All supported browsers return an instance to a File when reading the value from an <input type="file"> element.
• Node.js v18: A file stream can be created using the fileFrom helper from fetch-blob/from.js.

import { Imgsrc } from "@img-src/sdk";

const imgsrc = new Imgsrc({
  bearerAuth: process.env["IMGSRC_API_KEY"],
});

async function run() {
  const result = await imgsrc.images.uploadImage({
    targetPath: "blog/2024",
  });

  console.log(result);
}

run();

Retries

Some of the endpoints in this SDK support retries. If you use the SDK without any configuration, it will fall back to the default retry strategy provided by the API. However, the default retry strategy can be overridden on a per-operation basis, or across the entire SDK.

To change the default retry strategy for a single API call, simply provide a retryConfig object to the call:

import { Imgsrc } from "@img-src/sdk";

const imgsrc = new Imgsrc({
  bearerAuth: process.env["IMGSRC_API_KEY"],
});

async function run() {
  const result = await imgsrc.settings.getSettings({
    retries: {
      strategy: "backoff",
      backoff: {
        initialInterval: 1,
        maxInterval: 50,
        exponent: 1.1,
        maxElapsedTime: 100,
      },
      retryConnectionErrors: false,
    },
  });

  console.log(result);
}

run();

If you'd like to override the default retry strategy for all operations that support retries, you can provide a retryConfig at SDK initialization:

import { Imgsrc } from "@img-src/sdk";

const imgsrc = new Imgsrc({
  retryConfig: {
    strategy: "backoff",
    backoff: {
      initialInterval: 1,
      maxInterval: 50,
      exponent: 1.1,
      maxElapsedTime: 100,
    },
    retryConnectionErrors: false,
  },
  bearerAuth: process.env["IMGSRC_API_KEY"],
});

async function run() {
  const result = await imgsrc.settings.getSettings();

  console.log(result);
}

run();

Error Handling

ImgsrcError is the base class for all HTTP error responses. It has the following properties:

| Property | Type | Description | | ------------------------- | ---------- | --------------------------------------------------------------------------------------- | | error.message | string | Error message | | error.httpMeta.response | Response | HTTP response. Access to headers and more. | | error.httpMeta.request | Request | HTTP request. Access to headers and more. | | error.data$ | | Optional. Some errors may contain structured data. See Error Classes. |

Example

import { Imgsrc } from "@img-src/sdk";
import * as errors from "@img-src/sdk/models/errors";

const imgsrc = new Imgsrc({
  bearerAuth: process.env["IMGSRC_API_KEY"],
});

async function run() {
  try {
    const result = await imgsrc.settings.getSettings();

    console.log(result);
  } catch (error) {
    // The base class for HTTP error responses
    if (error instanceof errors.ImgsrcError) {
      console.log(error.message);
      console.log(error.httpMeta.response.status);
      console.log(error.httpMeta.response.headers);
      console.log(error.httpMeta.request);

      // Depending on the method different errors may be thrown
      if (error instanceof errors.ErrorResponse) {
        console.log(error.data$.error); // components.ErrorDetail
      }
    }
  }
}

run();

Error Classes

Primary errors:

• ImgsrcError: The base class for HTTP error responses.
  • ErrorResponse: Generic error.

Network errors:

• ConnectionError: HTTP client was unable to make a request to a server.
• RequestTimeoutError: HTTP request timed out due to an AbortSignal signal.
• RequestAbortedError: HTTP request was aborted by the client.
• InvalidRequestError: Any input used to create a request is invalid.
• UnexpectedClientError: Unrecognised or unexpected error.

Inherit from ImgsrcError:

• ResponseValidationError: Type mismatch between the data returned from the server and the structure expected by the SDK. See error.rawValue for the raw value and error.pretty() for a nicely formatted multi-line string.

Server Selection

Override Server URL Per-Client

The default server can be overridden globally by passing a URL to the serverURL: string optional parameter when initializing the SDK client instance. For example:

import { Imgsrc } from "@img-src/sdk";

const imgsrc = new Imgsrc({
  serverURL: "https://api.img-src.io",
  bearerAuth: process.env["IMGSRC_API_KEY"],
});

async function run() {
  const result = await imgsrc.settings.getSettings();

  console.log(result);
}

run();

Custom HTTP Client

The TypeScript SDK makes API calls using an HTTPClient that wraps the native Fetch API. This client is a thin wrapper around fetch and provides the ability to attach hooks around the request lifecycle that can be used to modify the request or handle errors and response.

The HTTPClient constructor takes an optional fetcher argument that can be used to integrate a third-party HTTP client or when writing tests to mock out the HTTP client and feed in fixtures.

The following example shows how to use the "beforeRequest" hook to to add a custom header and a timeout to requests and how to use the "requestError" hook to log errors:

import { Imgsrc } from "@img-src/sdk";
import { HTTPClient } from "@img-src/sdk/lib/http";

const httpClient = new HTTPClient({
  // fetcher takes a function that has the same signature as native `fetch`.
  fetcher: (request) => {
    return fetch(request);
  }
});

httpClient.addHook("beforeRequest", (request) => {
  const nextRequest = new Request(request, {
    signal: request.signal || AbortSignal.timeout(5000)
  });

  nextRequest.headers.set("x-custom-header", "custom value");

  return nextRequest;
});

httpClient.addHook("requestError", (error, request) => {
  console.group("Request Error");
  console.log("Reason:", `${error}`);
  console.log("Endpoint:", `${request.method} ${request.url}`);
  console.groupEnd();
});

const sdk = new Imgsrc({ httpClient: httpClient });

Debugging

You can setup your SDK to emit debug logs for SDK requests and responses.

You can pass a logger that matches console's interface as an SDK option.

[!WARNING] Beware that debug logging will reveal secrets, like API tokens in headers, in log messages printed to a console or files. It's recommended to use this feature only during local development and not in production.

import { Imgsrc } from "@img-src/sdk";

const sdk = new Imgsrc({ debugLogger: console });