Cloudflare
Unpic can transform images with Cloudflare using the cloudflare 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 cloudflare provider from the unpic package using a subpath import:
import { transform } from 'unpic/providers/cloudflare';If using an Unpic component, you can optionally pass custom operations and options to the
component using an object with a cloudflare key. This is lets you use extra features supported
by Cloudflare, 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={{
"cloudflare": {
// cloudflare options here
}
}}
operations={{
"cloudflare": {
// cloudflare 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/cloudflare';
---
<Image
src="image.jpg"
width={800}
height={600}
transformer={transformer}
/>
Types
The cloudflare provider supports the following arguments:
Options
domain
Type: string
The Cloudflare domain
Operations
anim
Type: boolean
Preserve animation frames from GIFs, default true.
background
Type: string
Background color for transparent images. Accepts CSS color values.
blur
Type: number
Blur radius (1 to 250).
border
Type: { color: string; width?: number; top?: number; right?: number; bottom?: number; left?: number; }
Border options, including color and width for each side.
brightness
Type: number
Brightness factor, 1.0 means no change.
compression
Type: "fast"
Choose a faster but lower-quality compression method.
contrast
Type: number
Contrast factor, 1.0 means no change.
dpr
Type: number
Device Pixel Ratio multiplier, default is 1.
fit
Type: "contain" | "cover" | "scale-down" | "crop" | "pad"
Resizing mode, preserving aspect ratio.
format
Type: ImageFormat | "auto" | "json"
Output image format, or “auto” to choose based on browser support.
f
Type: ImageFormat | "auto" | "json"
gamma
Type: number
Gamma correction factor.
gravity
Type: string
Cropping gravity (focal point) or alignment.
metadata
Type: "none" | "keep" | "copyright"
Control the preservation of metadata.
onerror
Type: "redirect"
Redirect to original image if transformation fails.
rotate
Type: 90 | 180 | 270
Rotate the image by 90, 180, or 270 degrees.
sharpen
Type: number
Strength of sharpening filter (0-10).
trim
Type: { top?: number; right?: number; bottom?: number; left?: number; width?: number; height?: number; }
Trim options to remove pixels from edges.
width
Type: string | number
height
Type: string | number
quality
Type: string | number
This page is auto-generated from the cloudflare provider types.
See anything wrong or missing? Suggest a change on GitHub.