Images 设计模式

# 常见模式 ## URL 转换选项 width= height= fit=scale-down|contain|cover|crop|pad quality=85 format=auto|webp|avif|jpeg|png dpr=2 gravity=auto|face|left|right|top|bottom sharpen=2 blur=10 rotate=90|180|270 background=white metadata=none|copyright|keep ## 响应式图片 (srcset) html ## 格式协商 typescript async fetch(request: Request, env: Env): Promise { const accept = request.headers.get('Accept') || ''; const format = /image/avif/.test(accept) ? 'avif' : /image/webp/.test(accept) ? 'webp' : 'jpeg'; return env.IMAGES.input(buffer).transform({ format, quality: 85 }).output().response(); } ## 直接创建者上传 typescript // 后端：生成上传 URL const response = await fetch( `https://api.cloudflare.com/client/v4/accounts/${env.ACCOUNT_ID}/images/v2/direct_upload`, { method: 'POST', headers: { 'Authorization': `Bearer ${env.API_TOKEN}` }, body: JSON.stringify({ requireSignedURLs: false, metadata: { userId } }) } ); // 前端：上传至返回的 uploadURL const formData = new FormData(); formData.append('file', file); await fetch(result.uploadURL, { method: 'POST', body: formData }); // 使用: https://imagedelivery.net/{hash}/${result.id}/public ## 转换并存储至 R2 typescript async fetch(request: Request, env: Env): Promise { const file = (await request.formData()).get('image') as File; const transformed = await env.IMAGES .input(await file.arrayBuffer()) .transform({ width: 800, format: 'avif', quality: 80 }) .output(); await env.R2.put(`images/${Date.now()}.avif`, transformed.response().body); return Response.json({ success: true }); } ## 添加水印 typescript const watermark = await env.ASSETS.fetch(new URL('/watermark.png', request.url)); const result = await env.IMAGES .input(await image.arrayBuffer()) .draw(env.IMAGES.input(watermark.body).transform({ width: 100 }), { bottom: 20, right: 20, opacity: 0.7 }) .transform({ format: 'avif' }) .output(); return result.response(); ## 基于设备的转换 typescript const ua = request.headers.get('User-Agent') || ''; const isMobile = /Mobile|Android|iPhone/i.test(ua); return env.IMAGES.input(buffer) .transform({ width: isMobil