KeyCDN

Unpic can transform images with KeyCDN using the keycdn 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 keycdn provider from the unpic package using a subpath import:

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

If using an Unpic component, you can optionally pass custom operations and options to the component using an object with a keycdn key. This is lets you use extra features supported by KeyCDN, 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={{
      "keycdn": {
      // keycdn options here
      }
  }}
  operations={{
      "keycdn": {
      // keycdn 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/keycdn';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  transformer={transformer}
/>

Types

The keycdn provider supports the following arguments:

Options

The keycdn provider does not support any extra configuration options.

Operations

trim

Type: number

Trim similar pixels from the edges.

crop

Type: ${number},${number}` | `${number},${number},${number},${number}` | "smart" | `fp,${number},${number},${number}` | `fpd,${number},${number}

Crop options: “smart” for automatic cropping, or pixel-based.

fit

Type: "contain" | "cover" | "fill" | "inside" | "outside"

Resize fit method.

position

Type: "top" | "right" | "bottom" | "left"

Image position for fit: ‘cover’ or ‘contain’.

enlarge

Type: boolean | 0 | 1

Whether to enlarge the image beyond original size.

bg

Type: string

Background color, either as a hex string or rgba values.

extend

Type: number | { top: number; right: number; bottom: number; left: number; }

Extend the image with padding.

rotate

Type: number

Rotate the image.

flip

Type: boolean | 0 | 1

Flip image vertically.

flop

Type: boolean | 0 | 1

Flop image horizontally.

sharpen

Type: number

Sharpen the image.

blur

Type: number

Blur the image.

gamma

Type: number

Apply gamma correction.

negate

Type: boolean | 0 | 1

Invert image colors.

normalize

Type: boolean | 0 | 1

Normalize image contrast.

threshold

Type: number

Apply threshold.

tint

Type: string

Apply tint using hex color.

grayscale

Type: boolean | 0 | 1

Convert the image to grayscale.

removealpha

Type: boolean | 0 | 1

Remove alpha channel from the image.

olurl

Type: string

URL for an overlay image.

olalign

Type: "center" | "top" | "right" | "bottom" | "topright" | "bottomright" | "bottomleft" | "topleft"

Overlay alignment.

olx

Type: number

Overlay X-axis coordinate.

oly

Type: number

Overlay Y-axis coordinate.

olwidth

Type: number | ${number}%“

Overlay width in pixels or percentage.

olheight

Type: number | ${number}%“

Overlay height in pixels or percentage.

olalpha

Type: number

Overlay transparency.

olrepeat

Type: boolean | 0 | 1

Repeat overlay.

format

Type: ImageFormat | "tiff"

Output image format.

quality

Type: number

Image quality.

progressive

Type: boolean | 0 | 1

Progressive scan for JPEG/PNG.

compression

Type: number

PNG compression level.

adaptive

Type: boolean | 0 | 1

Adaptive row filtering for PNG.

alphaquality

Type: number

Quality of WebP alpha layer.

lossless

Type: boolean | 0 | 1

Lossless encoding for WebP.

nearlossless

Type: boolean | 0 | 1

Near-lossless compression for WebP.

metadata

Type: boolean | 0 | 1

Preserve image metadata (EXIF, IPTC, XMP).

width

Type: string | number

height

Type: string | number

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