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.