1# Configuration
2 
3## Wrangler Integration
4 
5### Workers Binding Setup
6 
7Add to `wrangler.toml`:
8 
9```toml
10name = "my-image-worker"
11main = "src/index.ts"
12compatibility_date = "2024-01-01"
13 
14[images]
15binding = "IMAGES"
16```
17 
18Access in Worker:
19 
20```typescript
21interface Env {
22  IMAGES: ImageBinding;
23}
24 
25export default {
26  async fetch(request: Request, env: Env): Promise<Response> {
27    return await env.IMAGES
28      .input(imageBuffer)
29      .transform({ width: 800 })
30      .output()
31      .response();
32  }
33};
34```
35 
36### Upload via Script
37 
38Wrangler doesn't have built-in Images commands, use REST API:
39 
40```typescript
41// scripts/upload-image.ts
42import fs from 'fs';
43import FormData from 'form-data';
44 
45async function uploadImage(filePath: string) {
46  const accountId = process.env.CLOUDFLARE_ACCOUNT_ID!;
47  const apiToken = process.env.CLOUDFLARE_API_TOKEN!;
48  
49  const formData = new FormData();
50  formData.append('file', fs.createReadStream(filePath));
51  
52  const response = await fetch(
53    `https://api.cloudflare.com/client/v4/accounts/${accountId}/images/v1`,
54    {
55      method: 'POST',
56      headers: {
57        'Authorization': `Bearer ${apiToken}`,
58      },
59      body: formData,
60    }
61  );
62  
63  const result = await response.json();
64  console.log('Uploaded:', result);
65}
66 
67uploadImage('./photo.jpg');
68```
69 
70### Environment Variables
71 
72Store account hash for URL construction:
73 
74```toml
75[vars]
76IMAGES_ACCOUNT_HASH = "your-account-hash"
77ACCOUNT_ID = "your-account-id"
78```
79 
80Access in Worker:
81 
82```typescript
83const imageUrl = `https://imagedelivery.net/${env.IMAGES_ACCOUNT_HASH}/${imageId}/public`;
84```
85 
86## Variants Configuration
87 
88Variants are named presets for transformations.
89 
90### Create Variant (Dashboard)
91 
921. Navigate to Images → Variants
932. Click "Create Variant"
943. Set name (e.g., `thumbnail`)
954. Configure: `width=200,height=200,fit=cover`
96 
97### Create Variant (API)
98 
99```bash
100curl -X POST \
101  https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1/variants \
102  -H "Authorization: Bearer {api_token}" \
103  -H "Content-Type: application/json" \
104  -d '{
105    "id": "thumbnail",
106    "options": {
107      "width": 200,
108      "height": 200,
109      "fit": "cover"
110    },
111    "neverRequireSignedURLs": true
112  }'
113```
114 
115### Use Variant
116 
117```
118https://imagedelivery.net/{account_hash}/{image_id}/thumbnail
119```
120 
121### Common Variant Presets
122 
123```json
124{
125  "thumbnail": {
126    "width": 200,
127    "height": 200,
128    "fit": "cover"
129  },
130  "avatar": {
131    "width": 128,
132    "height": 128,
133    "fit": "cover",
134    "gravity": "face"
135  },
136  "hero": {
137    "width": 1920,
138    "height": 1080,
139    "fit": "cover",
140    "quality": 90
141  },
142  "mobile": {
143    "width": 640,
144    "fit": "scale-down",
145    "quality": 80,
146    "format": "avif"
147  }
148}
149```
150 
151## Authentication
152 
153### API Token (Recommended)
154 
155Generate at: Dashboard → My Profile → API Tokens
156 
157Required permissions:
158- Account → Cloudflare Images → Edit
159 
160```bash
161curl -H "Authorization: Bearer {api_token}" \
162  https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1
163```
164 
165### API Key (Legacy)
166 
167```bash
168curl -H "X-Auth-Email: {email}" \
169     -H "X-Auth-Key: {api_key}" \
170  https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1
171```
172 
173## Signed URLs
174 
175For private images, enable signed URLs:
176 
177```bash
178# Upload with signed URLs required
179curl -X POST \
180  https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1 \
181  -H "Authorization: Bearer {api_token}" \
182  -F [email protected] \
183  -F requireSignedURLs=true
184```
185 
186Generate signed URL:
187 
188```typescript
189import { createHmac } from 'crypto';
190 
191function signUrl(imageId: string, variant: string, expiry: number, key: string): string {
192  const path = `/${imageId}/${variant}`;
193  const toSign = `${path}${expiry}`;
194  const signature = createHmac('sha256', key)
195    .update(toSign)
196    .digest('hex');
197  
198  return `https://imagedelivery.net/{hash}${path}?exp=${expiry}&sig=${signature}`;
199}
200 
201// Sign URL valid for 1 hour
202const signedUrl = signUrl('image-id', 'public', Date.now() + 3600, env.SIGNING_KEY);
203```
204 
205## Local Development
206 
207```bash
208npx wrangler dev --remote
209```
210 
211Must use `--remote` for Images binding access.
212