### Start Local Node.js Server

Source: https://docs.imgix.com/en-US/getting-started/tutorials/developer-guides/imgix-with-ngrok

Commands to navigate to the application directory and start the Express.js server on localhost:3000. This server will be proxied by ngrok.

```bash
#cd ngrok_demo_app
node app.js
```

--------------------------------

### Making a GET Request for a Source with Error Handling

Source: https://docs.imgix.com/apis/management/overview

This example demonstrates how to make a GET request to retrieve a specific source using curl, including necessary headers for authentication and content type. It also illustrates a common scenario where a '404 Not Found' error might occur if the source ID is invalid.

```curl
curl \
  -X GET \
  -H "Accept: application/vnd.api+json" \
  -H "Authorization: Bearer <api-key>" \
  -H "Content-Type: application/vnd.api+json" \
  "https://api.imgix.com/api/v1/sources/invalid-source"
```

--------------------------------

### Imgix Request Headers Example

Source: https://docs.imgix.com/getting-started/setup/creating-sources/web-proxy

This snippet shows the headers that Imgix includes in requests to your Origin when Per-Request signing is configured. These headers are used to verify the request's authenticity.

```json
{
  "X-Imgix-Signature": "v1,92b7abfb7adc9290d1f1f64d91c11a27e35126ed8c20d1cf5a45f3e8c9fc03f6",
  "X-Imgix-Signature-Host": "www.examplesite.com",
  "X-Imgix-Signature-Request-Id": "a3c1f07cd7f9dc17fe9352dd391aa052f90ba51df95231f09fadc760b8457564",
  "X-Imgix-Signature-Timestamp": "1709332618"
}
```

--------------------------------

### Install and Initialize Imgix Core JS Client

Source: https://docs.imgix.com/en-US/getting-started/tutorials/responsive-design/rendering-images-in-react-native-faster-with-imgix

This section details how to install the `@imgix/js-core` package using npm or yarn. It then shows how to instantiate the `ImgixClient` with your Imgix domain, which is necessary for using its URL-building functions.

```bash
# inside the project's root directory, run
npm i @imgix/js-core
# or
yarn add @imgix/js-core
```

```javascript
const Imgix = new ImgixClient({ domain: "sdk-test.imgix.net" })
```

--------------------------------

### Image URL Example with Parameters

Source: https://docs.imgix.com/en-US/getting-started/setup/asset-manager/the-image-editor

This example demonstrates a typical Imgix image URL with width and height parameters. These parameters control the dimensions of the image served, allowing for responsive design and optimized loading. Ensure parameters are correctly appended to the base image URL for desired transformations.

```text
https://fourbottle.imgix.net/2022-Fall/four-bottle-dalgona-coffee.jpg?w=4000&h=6000
```

--------------------------------

### Example: Create DigitalOcean S3 Compatible Source via Management API

Source: https://docs.imgix.com/en-US/getting-started/setup/s3-compatible-source-migration-guide

This is a concrete example of creating a new S3-compatible source specifically for DigitalOcean Spaces using the Imgix Management API. It populates the JSON structure with sample values for the source name, DigitalOcean credentials, bucket details, endpoint URL, region, and Imgix subdomain.

```json
{
  "data": {
    "attributes": {
    "name": "DigitalOcean example Source",
    "deployment": {
      "type": "s3_compatible",
      "storage_provider": "DigitalOcean",
      "access_key_id": "$YOUR_DO_ACCESS_KEY",
      "bucket_name": "imgix-assets-digitalocean",
      "secret_key": "$YOUR_DO_SECRET_KEY",
      "endpoint_url": "sfo3.digitaloceanspaces.com",
      "region": "sfo3",
      "imgix_subdomains": [
      "imgix-digitalocean-example"
      ]
    }
    },
    "type": "sources"
  },
  "jsonapi": {
    "version": "1.0"
  }
}
```

--------------------------------

### Create React Project and Install Dependencies

Source: https://docs.imgix.com/en-US/getting-started/tutorials/developer-guides/building-a-react-uploader

This snippet shows the commands to create a new React project using Create React App and install necessary dependencies like axios and react-imgix. These are required for building the uploader interface and interacting with the Imgix API.

```bash
npx create-react-app imgix-uploader
cd imgix-uploader
npm install axios react-imgix
```

--------------------------------

### Fetch Single Imgix Source Object using HTTP GET

Source: https://docs.imgix.com/en-US/apis/management/general-usage

Demonstrates how to fetch a single Source object from the Imgix API using an HTTP GET request. It includes the request structure and a curl command example. The response structure for a successful retrieval and a 404 error for non-existent objects are also outlined.

```http
GET /api/v1/sources/5d46fb3bd596f100018e123f HTTP/1.1
Accept: application/vnd.api+json
Authorization: Bearer <api-key>
Content-Type: application/vnd.api+json
Host: api.imgix.com
```

```curl
curl \
  -H "Accept: application/vnd.api+json" \
  -H "Authorization: Bearer <api-key>" \
  -H "Content-Type: application/vnd.api+json" \
  "https://api.imgix.com/api/v1/sources/5d46fb3bd596f100018e123f"
```

```json
{
  "data": {
    "attributes": {
      "date_deployed": 1591042615,
      "deployment": {
        "annotation": "New deployment created for source by Imgix testing.",
        "cache_ttl_behavior": "respect_origin",
        "cache_ttl_error": 300,
        "cache_ttl_value": 31536000,
        "crossdomain_xml_enabled": false,
        "custom_domains": [],
        "default_params": {},
        "image_error": null,
        "image_error_append_qs": false,
        "image_missing": null,
        "image_missing_append_qs": false,
        "imgix_subdomains": [
          "my-unique-domain"
        ],
        "secure_url_enabled": false,
        "type": "webfolder",
        "webfolder_base_url": "http://my-domain.com/images/"
      },
      "deployment_status": "deployed",
      "enabled": true,
      "name": "New Web Folder Source"
    },
    "id": "5ed56238a04d080001d4a08e",
    "type": "sources"
  },
  "included": [],
  "jsonapi": {
    "version": "1.0"
  },
  "meta": {
    "authentication": {
      ...
    },
  ...
  }
}
```

--------------------------------

### Fetch List of Imgix Source Objects using HTTP GET

Source: https://docs.imgix.com/en-US/apis/management/general-usage

Provides instructions for retrieving a list of Source objects from the Imgix API via an HTTP GET request. It details the request structure, includes a curl command example, and shows the format of a typical response containing multiple Source objects and pagination metadata.

```http
GET /api/v1/sources HTTP/1.1
Accept: application/vnd.api+json
Authorization: Bearer <api-key>
Content-Type: application/vnd.api+json
Host: api.imgix.com
```

```curl
curl \
  -H "Accept: application/vnd.api+json" \
  -H "Authorization: Bearer <api-key>" \
  -H "Content-Type: application/vnd.api+json" \
  "https://api.imgix.com/api/v1/sources"
```

```json
{
  "data": [
    {
      "attributes": {
        ...
      },
      "id": "5d1e0dc3d596f10001b0221c",
      "type": "sources"
    },
    {
      "attributes": {
        ...
      "id": "5ae509aaf5b98f000169ee72",
      "type": "sources"
    },
  ],
  ...
  "meta": {
    ...
    "pagination": {
      "currentPage": 0,
      "hasNextPage": false,
      "hasPreviousPage": false,
      "nextPage": 0,
      "pageSize": 20,
      "previousPage": 0,
      "totalPages": 1,
      "totalRecords": 2
    },
    ...
  }
}
```

--------------------------------

### Install and Instantiate Imgix JavaScript Client

Source: https://docs.imgix.com/tutorials/rendering-images-in-react-native-faster-with-imgix

Installs the @imgix/js-core package and shows how to instantiate the ImgixClient with a specified domain. This client is used for building optimized image URLs.

```bash
# inside the project's root directory, run
npm i @imgix/js-core
# or
yarn add @imgix/js-core
```

```javascript
const ImgixClient = require('@imgix/js-core');
const imgix = new ImgixClient({ domain: "sdk-test.imgix.net" });
```

--------------------------------

### Build Layered Social Media Image with Imgix

Source: https://docs.imgix.com/en-US/getting-started/tutorials/developer-guides/generating-social-images-with-imgix

This example demonstrates creating a layered social media image by chaining Imgix parameters. It starts with a base image, adds text overlays using `mark64` and `txt` parameters, applies a blend using `blend64`, and sets image format and compression before finalizing the URL.

```javascript
const layerdURL = buildURL({ domain: "luis-ball.imgix.net" })
  .path("builder-pattern-base-layer.png") // Setting the base path
  .bri(-15)
  .mark64({
    pad: 100,
    align: "top, left",
    text: {
      w: 900,
      color: "fff",
      font64: "avenir",
      size: 112,
      txt: "Transforming Images Using AI Without Leaving Your React App",
    },
  })
  .txt({
    align: "bottom, left",
    color: "fff",
    font64: "avenir",
    pad: 100,
    size: 40,
    text64: "Luis Ball - Senior Software Engineer",
  })
  .blend64({
    mode: "normal",
    url: `${heroImage}`,
  })
  .auto("compress,format")
  .fm("jpeg")
  .finalize()
// -> https://luis-ball.imgix.net/builder-pattern-base-layer.png?bri=-15&mark64=aHR0cHM6Ly9sdWlzLWJhbGwuaW1naXgubmV0L350ZXh0P3c9OTAwJnR4dC1jb2xvcj1mZmYmdHh0LWZvbnQ2ND1hdmVuaXImdHh0LXNpemU9MTEyJnR4dD1UcmFuc2Zvcm1pbmcrSW1hZ2VzK1VzaW5nK0FJK1dpdGhvdXQrTGVhdmluZytZb3VyK1JlYWN0K0FwcA%3D%3D&mark-pad=100&mark-align=top%2C+left&txt64=THVpcyBCYWxsIC0gU2VuaW9yIFNvZnR3YXJlIEVuZ2luZWVy&txt-font64=YXZlbmly&txt-align=bottom%2C+left&txt-color=fff&txt-pad=100&txt-size=40&blend64=aHR0cHM6Ly9sdWlzLWJhbGwuaW1naXgubmV0L2J1aWxkZXItcGF0dGVyLXByb2ZpbGUtaW1hZ2UucG5n&blend-mode=normal&fm=auto
```

--------------------------------

### Reference Imgix Image URL with Custom Subdomain

Source: https://docs.imgix.com/en-US/getting-started/best-practices/improving-seo-traffic

This example demonstrates how to reference an image hosted on Imgix using a custom subdomain. By using a CNAME record as shown in the previous example, you can serve images from a URL like http://images.domain.com/image.jpg, which can be beneficial for SEO.

```html
<img src="http://images.domain.com/image.jpg">
```

--------------------------------

### Basic Authentication Header Example

Source: https://docs.imgix.com/en-US/getting-started/setup/creating-sources/web-folder

This string demonstrates a typical 'Authorization' header value used for Basic Authentication with Imgix. The example shows a Base64 encoded string representing a username and password pair, separated by a colon.

```Text
"Authorization": "Basic dXNlcm5hbWVfZXhhbXBsZTpwYXNzd29yZF9leGFtcGxl"
```

--------------------------------

### Paging Lists by Page Number and Size (HTTP/curl)

Source: https://docs.imgix.com/en-US/apis/management/general-usage

Demonstrates how to retrieve paginated lists of objects using page number and size parameters. It shows an example HTTP GET request and its equivalent curl command. The response includes data and pagination metadata, crucial for navigating through all available records. Page numbers are zero-indexed, and page sizes must be at least 1.

```http
GET /api/v1/sources?page[number]=0&page[size]=1 HTTP/1.1
Accept: application/vnd.api+json
Authorization: Bearer <api-key>
Content-Type: application/vnd.api+json
Host: api.imgix.com
```

```bash
curl \
  -H "Accept: application/vnd.api+json" \
  -H "Authorization: Bearer <api-key>" \
  -H "Content-Type: application/vnd.api+json" \
  "https://api.imgix.com/api/v1/sources?page[number]=0&page[size]=1"
```

--------------------------------

### Per-Request Signing Configuration and Verification

Source: https://docs.imgix.com/en-US/getting-started/setup/creating-sources/web-proxy

This section explains how Per-Request signing works, the headers Imgix includes in requests to your origin, and how to verify these requests using a secret key.

```APIDOC
## Per-Request Signing

Per-Request signing provides a highly secure method for authenticating requests to your origin server using a `request_signing_key`. While this is the most secure option, it requires external configuration for decryption and authentication.

### `request_signing_key`

- The `request_signing_key` must be exactly 32 latin-1 characters.
- This key is used to generate an HMAC-SHA256 digest signature for requests sent from Imgix, which can then be verified to confirm the request's origin.

### Imgix-Sent Headers

When Per-Request signing is configured, Imgix includes the following headers in requests to your origin:

- `X-Imgix-Signature-Timestamp` (Unix epoch seconds): The time the request was made.
- `X-Imgix-Signature-Request-Id` (string): A unique identifier generated by Imgix for each request.
- `X-Imgix-Signature` (string): A version tag (e.g., `v1`) followed by the HMAC-SHA256 digest of the message `<requestid>.<timestamp>.<host>.<url path>`, signed with your secret key. The digest is in uppercase hex format.

### Example Imgix Request Headers

```json
{
  "X-Imgix-Signature": "v1,92b7abfb7adc9290d1f1f64d91c11a27e35126ed8c20d1cf5a45f3e8c9fc03f6",
  "X-Imgix-Signature-Host": "www.examplesite.com",
  "X-Imgix-Signature-Request-Id": "a3c1f07cd7f9dc17fe9352dd391aa052f90ba51df95231f09fadc760b8457564",
  "X-Imgix-Signature-Timestamp": "1709332618"
}
```

### Verification Process (Node.js Example)

To verify that a request originates from Imgix, you need to:
1. Construct the message string: `<requestid>.<timestamp>.<host>.<url path>`.
2. Generate an HMAC-SHA256 digest of this message using your configured secret key.
3. Compare the generated digest with the one provided in the `X-Imgix-Signature` header.

```javascript
const crypto = require("crypto");

var imgix_headers = {
  "X-Imgix-Signature": "v1,92b7abfb7adc9290d1f1f64d91c11a27e35126ed8c20d1cf5a45f3e8c9fc03f6",
  "X-Imgix-Signature-Host": "www.examplesite.com",
  "X-Imgix-Signature-Request-Id": "a3c1f07cd7f9dc17fe9352dd391aa052f90ba51df95231f09fadc760b8457564",
  "X-Imgix-Signature-Timestamp": "1709332618",
  "url-path": "/example_url.png", // This should be the path of the requested URL
};

// Your secret key (must be 32 latin-1 characters)
var secret = "abcd1234"; 

// Construct the message string
const message = 
  imgix_headers["X-Imgix-Signature-Request-Id"] +
  "." +
  imgix_headers["X-Imgix-Signature-Timestamp"] +
  "." +
  imgix_headers["X-Imgix-Signature-Host"] +
  "." +
  imgix_headers["url-path"];

// Create HMAC using SHA256 algorithm
const hmac = crypto.createHmac("sha256", secret).update(message);

// Get the HMAC in hexadecimal format
const hmacDigest = hmac.digest("hex");

// Compare the generated digest with the one from the header
if ("v1," + hmacDigest.toUpperCase() === imgix_headers["X-Imgix-Signature"].toUpperCase()) {
  console.log("Request is authentically from Imgix.");
} else {
  console.log("Request is not from Imgix or has been tampered with.");
}
```
```

--------------------------------

### Video Storyboard VTT Output Example

Source: https://docs.imgix.com/apis/video/long-form-video/format/storyboard-format

This is an example of the WebVTT (WebVTT) format for a video storyboard. It lists timestamps and corresponding URLs for individual frames or segments, enabling timeline hover previews in video players.

```WebVTT
WEBVTT
 
00:00:00.000 --> 00:00:00.959
 
https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=0,0,232,160
00:00:00.959 --> 00:00:01.918
 
https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=232,0,232,160
00:00:01.918 --> 00:00:02.878
 
https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=464,0,232,160
...
 
00:00:22.062 --> 00:00:23.021
https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=696,640,232,160
 
00:00:23.021 --> 00:00:24.080
https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=928,640,232,160
```

--------------------------------

### Updating S3 Upload Credentials for a Source

Source: https://docs.imgix.com/en-US/apis/management/assets

This example demonstrates how to update the upload credentials for an S3-backed Imgix Source. It requires a PATCH request to the Source endpoint with the S3 access key, secret key, and type in the attributes. Ensure the provided credentials have write permissions.

```bash
# Request
PATCH /api/v1/sources/5ae507164b595f0001e048bc

{
  "data": {
    "attributes": {
      "upload_credentials": {
        "s3_access_key": "<s3-access-key>",
        "s3_secret_key": "<s3-secret-key>",
        "type": "s3"
      }
    },
  "id": "5ae507164b595f0001e048bc",
  "type": "sources"
  }
}
```

--------------------------------

### Simple Image Blend Example

Source: https://docs.imgix.com/apis/rendering/blending/blend

Demonstrates a basic image blending operation using a relative URL for the overlay. This example shows how to apply a blend effect with minimal parameters, suitable for simple compositing tasks.

```url
?blend=https://assets.imgix.net/gearbox/redleaf.jpg
```

--------------------------------

### Basic `srcset` HTML example

Source: https://docs.imgix.com/en-US/getting-started/tutorials/responsive-design/responsive-images-with-srcset

A fundamental HTML `<img>` tag demonstrating the `srcset` attribute with a "1x, 2x, 3x" pattern. This method requires pre-generated image assets for each resolution.

```html
<img srcset="asset.png 1x, asset-2x.png 2x, asset-3x.png 3x" src="asset.png" />
```

--------------------------------

### Best Practices for Type on Images

Source: https://docs.imgix.com/en-US/getting-started/tutorials/design-elements-and-composition/multiline-text-and-overlays-with-the-typesetting-endpoint

Tips and examples for ensuring text readability over images using the Imgix Typesetting Endpoint, including adjusting image complexity, adding backgrounds, and blurring.

```APIDOC
## Best Practices for Type on Images

### Description
Guidance on making text look good and remain readable over images when using the Typesetting Endpoint.

### Techniques

#### 1. Keep the Base Image Simple
Choose a base image that is not visually busy or has a large area of solid color for text contrast.

#### 2. Add a Background Color
Create a calm area behind the text by adding a background color and padding. Use parameters like `bg={color}` and `mark-pad={value}`.
*Example*: `bg=000&mark-pad=20`

#### 3. Put a Transparent Color Over the Entire Image
Obscure the photo slightly to make text pop more by using the `blend` parameter with a color and optional `blend-alpha`.
*Example*: `blend-mode=normal&blend=aaF5532A`

#### 4. Blur the Base Image
Reduce visual noise by blurring the base image using the `blur` parameter.
*Example*: `blur=100`

### Example URLs (from documentation)
`mark-pad=0&w=600&h=300&fit=crop&mark64=aHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L350ZXh0P3R4dDY0PVJWWkZUaUJVU0VVZ1FVeE1MVkJQVjBWU1JsVk1JRkJQU1U1VVNVU1hJRWhCVXlCT1R5QkRUMDVVVWs5TUlFRkNUMVZVSUZSSVJTQkNURWxPUkNCVVJWaFVVdyZ0eHRjbHI9ZmZmJnR4dHNpemU9Mjgmdz01MDAmdHh0cGFkPTIwJnR4dGZvbnQ9YXZlbmlyLWJsYWNrJnR4dGFsaWduPWNlbnRlcg&mark-align=center,middle`
`blend-mode=normal&blend=aaF5532A&mark-pad=0&w=600&h=300&fit=crop&mark64=aHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L350ZXh0P3R4dDY0PVJWWkZUaUJVU0VVZ1FVeE1MVkJQVjBWU1JsVk1JRkJQU1U1VVNVU1hJRWhCVXlCT1R5QkRUMDVVVWs5TUlFRkNUMVZVSUZSSVJTQkNURWxPUkNCVVJWaFVVdyZ0eHRjbHI9ZmZmJnR4dHNpemU9Mjgmdz01MDAmdHh0cGFkPTIwJnR4dGZvbnQ9YXZlbmlyLWJsYWNrJnR4dGFsaWduPWNlbnRlcg&mark-align=center,middle`
`blur=200&mark-pad=0&w=600&h=300&fit=crop&mark64=aHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L350ZXh0P3R4dDY0PVJWWkZUaUJVU0VVZ1FVeE1MVkJQVjBWU1JsVk1JRkJQU1U1VVNVU1hJRWhCVXlCT1R5QkRUMDVVVWs5TUlFRkNUMVZVSUZSSVJTQkNURWxPUkNCVVJWaFVVdyZ0eHRjbHI9ZmZmJnR4dHNpemU9Mjgmdz01MDAmdHh0cGFkPTIwJnR4dGZvbnQ9YXZlbmlyLWJsYWNrJnR4dGFsaWduPWNlbnRlcg&mark-align=center,middle`
```

--------------------------------

### Video Storyboard VTT Content Example

Source: https://docs.imgix.com/en-US/apis/video/long-form-video/format/storyboard-format

This is an example of the WebVTT file content generated by `video-storyboard-format=vtt`. It lists timestamps and corresponding image URLs for each frame tile in the storyboard.

```vtt
WEBVTT

00:00:00.000 --> 00:00:00.959

https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=0,0,232,160
00:00:00.959 --> 00:00:01.918

https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=232,0,232,160
00:00:01.918 --> 00:00:02.878

https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=464,0,232,160
...

00:00:22.062 --> 00:00:23.021
https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=696,640,232,160

00:00:23.021 --> 00:00:24.080
https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg#xywh=928,640,232,160
```

--------------------------------

### GET /api/v1/sources

Source: https://docs.imgix.com/en-US/apis/management/general-usage

Fetches a list of all Source objects from the API.

```APIDOC
## GET /api/v1/sources

### Description
Fetches a list of all Source objects available in the API. The response includes pagination metadata.

### Method
GET

### Endpoint
`/api/v1/sources`

### Parameters
#### Query Parameters
- **fields[sources]** (string) - Optional - Comma-delimited list of fields to include in the response. Supports dot notation for nested fields.
- **page[size]** (integer) - Optional - The number of records to return per page.
- **page[number]** (integer) - Optional - The page number to retrieve.

### Request Example
```bash
curl \
  -H "Accept: application/vnd.api+json" \
  -H "Authorization: Bearer <api-key>" \
  -H "Content-Type: application/vnd.api+json" \
  "https://api.imgix.com/api/v1/sources"
```

### Response
#### Success Response (200)
- **data** (array) - An array of Source objects.
- **meta** (object) - Contains pagination information, including `currentPage`, `hasNextPage`, `hasPreviousPage`, `nextPage`, `pageSize`, `previousPage`, `totalPages`, and `totalRecords`.

#### Response Example
```json
{
  "data": [
    {
      "attributes": { ... },
      "id": "5d1e0dc3d596f10001b0221c",
      "type": "sources"
    },
    {
      "attributes": { ... },
      "id": "5ae509aaf5b98f000169ee72",
      "type": "sources"
    }
  ],
  "meta": {
    "pagination": {
      "currentPage": 0,
      "hasNextPage": false,
      "hasPreviousPage": false,
      "nextPage": 0,
      "pageSize": 20,
      "previousPage": 0,
      "totalPages": 1,
      "totalRecords": 2
    },
    ...
  }
}
```
```

--------------------------------

### GET /video-gif-time-start

Source: https://docs.imgix.com/en-US/apis/video/long-form-video/gif/gif-time-start

This endpoint is used to generate an animated GIF URL from an imgix-encoded video, with a specified start time. Note: This parameter is deprecated and only functional when 'video-generate' is set to 'gif'.

```APIDOC
## GET /video-gif-time-start

### Description
Used with `video-generate=gif` to return an animated GIF URL generated from an imgix-encoded video. This parameter specifies the time, in seconds, where the GIF should start. It defaults to 0. Negative values or values exceeding the video duration will result in an error. The maximum duration for a GIF is 10 seconds, and the minimum is 250ms.

### Method
GET

### Endpoint
`/your-video-url?video-generate=gif&video-gif-time-start={time_in_seconds}`

### Parameters
#### Query Parameters
- **video-generate** (string) - Required - Must be set to `gif` for this parameter to work.
- **video-gif-time-start** (number) - Optional - The time in seconds where the GIF should start. Defaults to 0.
- **video-gif-start** (number) - Optional - The start time of the GIF in seconds.
- **video-gif-end** (number) - Optional - The end time of the GIF in seconds.
- **q** (number) - Optional - The quality setting for the GIF (0-100).

### Request Example
```
/your-video-url?video-generate=gif&video-gif-start=1&video-gif-end=5&q=50&video-gif-time-start=1.5
```

### Response
#### Success Response (200)
- **gif_url** (string) - The URL of the generated GIF.

#### Response Example
```json
{
  "gif_url": "https://your-imgix-domain.com/your-video.mp4.gif?video-generate=gif&video-gif-start=1&video-gif-end=5&q=50&video-gif-time-start=1.5"
}
```

### Deprecation Note
This parameter is deprecated. Consider using `video-gif-start` for more direct control over the GIF's starting point.
```

--------------------------------

### Create New Source

Source: https://docs.imgix.com/apis/management/sources

Creates and deploys a new Source for your Imgix account. Requires the 'Sources' permission.

```APIDOC
## POST /sources

### Description
Create (and deploy) a new Source.

### Method
POST

### Endpoint
`/sources`

### Parameters
#### Request Body
- **name** (string) - Required - Source display name. Does not impact how assets are served.
- **deployment** (object) - Required - Configuration for the source deployment.
  - **type** (string) - Required - Type of the deployment. Possible values are `azure`, `gcs`, `s3`, `webfolder`, `webproxy`, `s3_compatible`.
  - **custom_domains** (array[string]) - Optional - List of custom domains for the source.
  - **imgix_subdomains** (array[string]) - Optional - List of Imgix subdomains to use.
  - **region** (string) - Optional - The region for S3-compatible sources.
  - **storage_provider** (string) - Optional - The storage provider for S3-compatible sources.
  - **s3_bucket** (string) - Optional - The S3 bucket name.
  - **gcs_bucket** (string) - Optional - The GCS bucket name.
  - **azure_bucket** (string) - Optional - The Azure bucket name.
  - **webfolder_base_url** (string) - Optional - The base URL for web folder sources.
  - **secure_url_enabled** (boolean) - Optional - Whether secure URLs are enabled.
  - **secure_url_token** (string) - Optional - The token used for securing URLs.

### Request Example
```json
{
  "name": "My New Web Folder Source",
  "deployment": {
    "type": "webfolder",
    "webfolder_base_url": "http://example.com/images/",
    "custom_domains": ["cdn.example.com"]
  }
}
```

### Response
#### Success Response (201)
- **id** (string) - The unique identifier for the newly created source.
- **name** (string) - The display name of the source.
- **enabled** (boolean) - Indicates if the source is enabled.
- **date_deployed** (integer) - Unix timestamp of when the source was deployed.
- **deployment_status** (string) - Current deployment status.

#### Response Example
```json
{
  "id": "src_456",
  "name": "My New Web Folder Source",
  "enabled": true,
  "date_deployed": 1678972800,
  "deployment_status": "deploying"
}
```
```

--------------------------------

### Resizing and Cropping

Source: https://docs.imgix.com/getting-started/setup/serving-assets

Learn how to resize images to fit specific containers and crop extraneous data using Imgix parameters. This section demonstrates the use of `w`, `h`, `fit`, and `crop` parameters.

```APIDOC
## GET /websites/imgix

### Description
Resizes and crops an image to fit a specified container, optimizing for visual content.

### Method
GET

### Endpoint
/websites/imgix

### Query Parameters
- **w** (integer) - Required - The desired width of the image.
- **h** (integer) - Required - The desired height of the image.
- **fit** (string) - Required - How the image should be resized to fit the dimensions. Common values include `crop`, `clip`, `scale`, `max`, `min`, `pad`.
- **crop** (string) - Optional - How to determine the origin point of the crop. Common values include `entropy`, `top`, `bottom`, `left`, `right`, `faces`.

### Request Example
```
/websites/imgix?w=900&h=300&fit=crop&crop=entropy
```

### Response
#### Success Response (200)
- **image_url** (string) - The URL of the transformed image.

#### Response Example
```json
{
  "image_url": "https://your-domain.imgix.net/path/to/your/image.jpg?w=900&h=300&fit=crop&crop=entropy"
}
```
```

--------------------------------

### Video Storyboard JSON Output Example

Source: https://docs.imgix.com/apis/video/long-form-video/format/storyboard-format

This JSON structure details the storyboard generated from a video, including the URL of the tiled image, dimensions of each tile, total duration, and a list of tiles with their start times and positions.

```JSON
{
  "url": "https://image.media.imgix.video/01l1pCNbdLDnFoB9eScrLQ6374SdOhv8t/storyboard.jpg",
  "tile_width": 232,
  "tile_height": 160,
  "duration": 24.08,
  "tiles": [
    { "start": 0, "x": 0, "y": 0 },
    { "start": 0.9591999999999998, "x": 232, "y": 0 },
    { "start": 1.9183999999999997, "x": 464, "y": 0 },
    { "start": 2.8775999999999993, "x": 696, "y": 0 },
    { "start": 3.8367999999999993, "x": 928, "y": 0 },
    { "start": 4.795999999999999, "x": 0, "y": 160 },
    { "start": 5.7551999999999985, "x": 232, "y": 160 },
    { "start": 6.714399999999999, "x": 464, "y": 160 },
    { "start": 7.673599999999999, "x": 696, "y": 160 },
    { "start": 8.632799999999998, "x": 928, "y": 160 },
    { "start": 9.591999999999999, "x": 0, "y": 320 },
    { "start": 10.551199999999998, "x": 232, "y": 320 },
    { "start": 11.510399999999997, "x": 464, "y": 320 },
    { "start": 12.469599999999998, "x": 696, "y": 320 },
    { "start": 13.428799999999997, "x": 928, "y": 320 },
    { "start": 14.387999999999998, "x": 0, "y": 480 },
    { "start": 15.347199999999997, "x": 232, "y": 480 },
    { "start": 16.306399999999996, "x": 464, "y": 480 },
    { "start": 17.265599999999996, "x": 696, "y": 480 },
    { "start": 18.2248, "x": 928, "y": 480 },
    { "start": 19.183999999999997, "x": 0, "y": 640 },
    { "start": 20.143199999999997, "x": 232, "y": 640 },
    { "start": 21.102399999999996, "x": 464, "y": 640 },
    { "start": 22.061599999999995, "x": 696, "y": 640 },
    { "start": 23.020799999999994, "x": 928, "y": 640 }
  ]
}
```

--------------------------------

### Get Image Metadata as JSON

Source: https://docs.imgix.com/apis/rendering/format/fm

Retrieves detailed metadata of an image's master version in JSON format. The output includes properties like DPI, dimensions, color profiles, and bit depth, varying based on the input filetype. Example shown for a JPEG.

```json
{
  "DPIHeight": 72,
  "Depth": 8,
  "ColorModel": "RGB",
  "DPIWidth": 72,
  "PixelHeight": 800,
  "PixelWidth": 532,
  "JFIF": {
    "DensityUnit": 1,
    "YDensity": 72,
    "JFIFVersion": [1, 1],
    "XDensity": 72
  },
  "ProfileName": "sRGB IEC61966-2.1"
}
```

--------------------------------

### Automatic Image Enhancement and Format Negotiation with Imgix

Source: https://docs.imgix.com/en-US/getting-started/setup/serving-assets

This example shows how to automatically optimize images for better compression and visual appeal. It converts images to modern formats like AVIF or WebP when supported and applies enhancements for brightness and contrast, while also reducing quality slightly for smaller file sizes.

```url
w=900&h=300&fit=crop&crop=entropy&auto=format,enhance&q=60
```

--------------------------------

### Control Quality with `q` Parameter

Source: https://docs.imgix.com/getting-started/tutorials/performance-and-metadata/improved-compression-with-automatic-content-negotiation

This example shows how to combine automatic content negotiation (`auto=format`) with the quality parameter (`q`). This allows you to control the output quality across different formats, ensuring a balance between file size and visual fidelity.

```url
auto=format&q=65&h=400
```

--------------------------------

### Retrieve Alt Text Data Using Management API (HTTP)

Source: https://docs.imgix.com/getting-started/tutorials/performance-and-metadata/alternative-text-with-imgix

Example HTTP GET request to retrieve alt text data for a specific asset from the imgix Management API. The response includes manually set alt text under 'alt_text' and automatically generated predictions under 'alt_text_predictions'.

```HTTP
GET https://api.imgix.com/api/v1/assets/66204a3643a0860f8a6151a8/cactus.jpeg
```

--------------------------------

### Imgix URL with Client Hints (Width, DPR)

Source: https://docs.imgix.com/apis/rendering/format/client-hints

Example Imgix URL utilizing Client Hints for Width and DPR. If the browser supports Client Hints, these will be used; otherwise, it falls back to the specified 'w' and 'dpr' values. This demonstrates dynamic image sizing and resolution based on client capabilities.

```url
https://assets.imgix.net/unsplash/bear.jpg?ch=Width,DPR&w=400&dpr=2
```

--------------------------------

### Microsoft Azure SAS Token Structure for Imgix

Source: https://docs.imgix.com/en-US/getting-started/setup/creating-sources/microsoft-azure

This example demonstrates a valid Shared Access Signature (SAS) token format required for Imgix to access Microsoft Azure storage. It includes essential parameters like services, resource types, permissions, expiry, start time, and signature.

```text
?sv=2021-12-02&ss=bfqt&srt=sco&sp=rwdlacupiytfx&se=2033-03-10T22:26:04Z&st=2023-03-10T14:26:04Z&spr=https&sig=signature_value
```

--------------------------------

### Imgix Per-Request Signing

Source: https://docs.imgix.com/getting-started/setup/creating-sources/web-proxy

This section details the Per-Request signing mechanism used by Imgix to authenticate requests to your origin. It outlines the headers Imgix sends and provides a method for verifying these signatures.

```APIDOC
## Imgix Per-Request Signing

### Description
Per-Request signing is a secure method for authenticating requests to your origin using a `request_signing_key`. This process generates an HMAC-SHA256 digest signature on requests sent from Imgix, which can be verified to ensure the requests originate from Imgix. The `request_signing_key` must be exactly 32 latin-1 characters.

When Per-Request signing is configured, Imgix includes the following headers in requests to your origin:

*   `X-Imgix-Signature-Timestamp`: The time of the request in Unix epoch seconds.
*   `X-Imgix-Signature-Request-Id`: A unique identifier generated by Imgix for each request.
*   `X-Imgix-Signature`: A version tag (`v1`) followed by the HMAC-SHA256 digest (in uppercase hexadecimal format) of the message `<requestid>.<timestamp>.<host>.<url path>`, signed with your secret key.

### Request Headers Example
```json
{
  "X-Imgix-Signature": "v1,92b7abfb7adc9290d1f1f64d91c11a27e35126ed8c20d1cf5a45f3e8c9fc03f6",
  "X-Imgix-Signature-Host": "www.examplesite.com",
  "X-Imgix-Signature-Request-Id": "a3c1f07cd7f9dc17fe9352dd391aa052f90ba51df95231f09fadc760b8457564",
  "X-Imgix-Signature-Timestamp": "1709332618"
}
```

### Verification Process
To verify that a request is genuinely from Imgix, you need to generate the HMAC-SHA256 digest of the message `<requestid>.<timestamp>.<host>.<url path>` using your configured secret key and compare it with the `X-Imgix-Signature` header.

#### Node.js Verification Example
```javascript
const crypto = require("crypto")
 
var imgix_headers = {
  "X-Imgix-Signature":
    "v1,92b7abfb7adc9290d1f1f64d91c11a27e35126ed8c20d1cf5a45f3e8c9fc03f6",
  "X-Imgix-Signature-Host": "www.examplesite.com",
  "X-Imgix-Signature-Request-Id":
    "a3c1f07cd7f9dc17fe9352dd391aa052f90ba51df95231f09fadc760b8457564",
  "X-Imgix-Signature-Timestamp": "1709332618",
  "url-path": "/example_url.png",
}
 
// your secret key
var secret = "abcd1234"
 
// Create HMAC using SHA256 algorithm
const hmac = crypto
  .createHmac("sha256", secret)
  .update(
    imgix_headers["X-Imgix-Signature-Request-Id"] +
      "." +
      imgix_headers["X-Imgix-Signature-Timestamp"] +
      "." +
      imgix_headers["X-Imgix-Signature-Host"] +
      "." +
      imgix_headers["url-path"],
  )
 
// Get the HMAC in hexadecimal format
const hmacDigest = hmac.digest("hex")
 
// compare the request
if ("v1," + hmacDigest === imgix_headers["X-Imgix-Signature"]) {
  console.log("Request is from Imgix")
} else {
  console.log("Request is not from Imgix")
}
```

### Method
This process involves verifying incoming HTTP requests.

### Endpoint
N/A (This is a verification process for requests received by your origin server).

### Parameters
#### Path Parameters
None.

#### Query Parameters
None.

#### Request Body
None (Verification is based on request headers and a secret key).

### Request Example
N/A

### Response
#### Success Response (Verification successful)
- **Indication**: The request is confirmed to be from Imgix.

#### Failure Response (Verification failed)
- **Indication**: The request signature does not match, indicating it may not be from Imgix.

#### Response Example
N/A (The verification process itself does not return a response, but rather a confirmation or denial within your server logic).
```