Uploadcare

Unpic can transform images with Uploadcare using the uploadcare provider. It can be used with Unpic framework components, or you can use the base unpic libary to generate image URLs directly.

You can import the uploadcare provider from the unpic package using a subpath import:

import { transform } from 'unpic/providers/uploadcare';

If using an Unpic component, you can optionally pass custom operations and options to the component using an object with a uploadcare key. This is lets you use extra features supported by Uploadcare, or set custom configuration options.

This example uses @unpic/astro, but the same applies to any Unpic component:

---
import { Image } from '@unpic/astro';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  options={{
      "uploadcare": {
      // uploadcare options here
      }
  }}
  operations={{
      "uploadcare": {
      // uploadcare operations here
      }
  }}
/>

In supported frameworks you can also import the base component and pass the transformer to it directly. This lets you create a custom component that doesn’t need to include and other transformer code.

---
import { Image } from '@unpic/astro/base';
import { transform } from 'unpic/providers/uploadcare';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  transformer={transformer}
/>

Types

The uploadcare provider supports the following arguments:

Options

host

Type: string

The hostname for the Uploadcare CDN

Operations

preview

Type: ${string}x${string}` | `${string}x${number}` | `${number}x${string}` | `${number}x${number}

Resize the image to fit within the specified dimensions while maintaining aspect ratio

resize

Type: ${string}x${string}` | `${string}x${number}` | `${number}x${string}` | `${number}x${number}` | `${string}x` | `${number}x` | `x${string}` | `x${number}

Resize the image to specified dimensions

stretch

Type: "fill" | "on" | "off"

Control how the image fits into the specified dimensions

smart_resize

Type: ${string}x${string}` | `${string}x${number}` | `${number}x${string}` | `${number}x${number}

Resize the image intelligently to fit the specified dimensions

crop

Type: string

Crop the image to specified dimensions

scale_crop

Type: string

Scale and crop the image to specified dimensions

border_radius

Type: string

Apply border radius to the image

setfill

Type: string

Set the background color for transparent images

zoom_objects

Type: number

Zoom in on detected objects in the image

autorotate

Type: "yes" | "no"

Automatically rotate the image based on EXIF data

rotate

Type: number

Rotate the image by a specified number of degrees

flip

Type: boolean

Flip the image vertically

mirror

Type: boolean

Mirror the image horizontally

quality

Type: "normal" | "better" | "best" | "lighter" | "lightest"

Set the quality of the output image

progressive

Type: "yes" | "no"

Enable or disable progressive image loading

strip_meta

Type: "none" | "all" | "sensitive"

Control the removal of metadata from the image

width

Type: string | number

height

Type: string | number

format

Type: (string & {}) | ImageFormat

This page is auto-generated from the uploadcare provider types. See anything wrong or missing? Suggest a change on GitHub.