curl -X POST \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -F "file=@/path/to/image.jpg" \
  https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1

{
  "result": {
    "id": "2cdc28f0-017a-49c4-9ed7-87056c83901",
    "filename": "image.jpg",
    "uploaded": "2023-05-31T12:00:00Z",
    "requireSignedURLs": false,
    "variants": [
      "https://imagedelivery.net/abcdef123456/2cdc28f0-017a-49c4-9ed7-87056c83901/public"
    ]
  },
  "success": true,
  "errors": [],
  "messages": []
}

<img src="https://imagedelivery.net/abcdef123456/2cdc28f0-017a-49c4-9ed7-87056c83901/public" alt="รูปภาพตัวอย่าง">

<!-- ปรับขนาดเป็น 400x300 พิกเซล -->
<img src="https://imagedelivery.net/abcdef123456/2cdc28f0-017a-49c4-9ed7-87056c83901/w=400,h=300" alt="รูปภาพตัวอย่าง">

<!-- ปรับขนาดและคุณภาพ -->
<img src="https://imagedelivery.net/abcdef123456/2cdc28f0-017a-49c4-9ed7-87056c83901/w=800,q=75" alt="รูปภาพตัวอย่าง">

<!-- ครอปรูปภาพ -->
<img src="https://imagedelivery.net/abcdef123456/2cdc28f0-017a-49c4-9ed7-87056c83901/w=400,h=300,fit=crop" alt="รูปภาพตัวอย่าง">

<!-- ใช้ variant "thumbnail" -->
<img src="https://imagedelivery.net/abcdef123456/2cdc28f0-017a-49c4-9ed7-87056c83901/thumbnail" alt="รูปภาพขนาดย่อ">

<!-- ใช้ variant "medium" -->
<img src="https://imagedelivery.net/abcdef123456/2cdc28f0-017a-49c4-9ed7-87056c83901/medium" alt="รูปภาพขนาดกลาง">

<!-- ใช้ variant "large" -->
<img src="https://imagedelivery.net/abcdef123456/2cdc28f0-017a-49c4-9ed7-87056c83901/large" alt="รูปภาพขนาดใหญ่">

// ตัวอย่างโค้ดสำหรับอัปโหลดรูปภาพ
async function uploadImage(file) {
  const formData = new FormData();
  formData.append('file', file);
  
  const response = await fetch('https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_API_TOKEN'
    },
    body: formData
  });
  
  const data = await response.json();
  
  if (data.success) {
    return data.result.variants[0]; // URL ของรูปภาพ
  } else {
    throw new Error('Failed to upload image');
  }
}

<picture>
  <source media="(max-width: 480px)" srcset="https://imagedelivery.net/abcdef123456/image-id/thumbnail">
  <source media="(max-width: 768px)" srcset="https://imagedelivery.net/abcdef123456/image-id/medium">
  <source media="(min-width: 769px)" srcset="https://imagedelivery.net/abcdef123456/image-id/large">
  <img src="https://imagedelivery.net/abcdef123456/image-id/medium" alt="รูปภาพแบบ Responsive">
</picture>

<div class="product-gallery">
  <img src="https://imagedelivery.net/abcdef123456/product-front/medium" alt="ด้านหน้าสินค้า">
  <img src="https://imagedelivery.net/abcdef123456/product-back/medium" alt="ด้านหลังสินค้า">
  <img src="https://imagedelivery.net/abcdef123456/product-side/medium" alt="ด้านข้างสินค้า">
  
  <!-- รูปภาพขนาดใหญ่สำหรับ Zoom -->
  <div class="product-zoom" style="display: none;">
    <img src="https://imagedelivery.net/abcdef123456/product-front/large" alt="ด้านหน้าสินค้า (ขยาย)">
  </div>
</div>

<div class="product-gallery">
  <!-- ใช้ loading="lazy" เพื่อโหลดรูปภาพเมื่อจำเป็น -->
  <img loading="lazy" src="https://imagedelivery.net/abcdef123456/product-1/thumbnail" alt="สินค้า 1">
  <img loading="lazy" src="https://imagedelivery.net/abcdef123456/product-2/thumbnail" alt="สินค้า 2">
  <img loading="lazy" src="https://imagedelivery.net/abcdef123456/product-3/thumbnail" alt="สินค้า 3">
  <!-- ... -->
</div>

// React Native example
const getImageUrl = (imageId, deviceWidth) => {
  let variant = 'thumbnail';
  
  if (deviceWidth > 768) {
    variant = 'large';
  } else if (deviceWidth > 480) {
    variant = 'medium';
  }
  
  return `https://imagedelivery.net/abcdef123456/${imageId}/${variant}`;
};

// ใช้งาน
const imageUrl = getImageUrl('image-id', Dimensions.get('window').width);

// workers/image-proxy.js
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  const imageId = url.pathname.split('/')[1]
  const width = url.searchParams.get('width') || 800
  const height = url.searchParams.get('height') || 600
  
  if (!imageId) {
    return new Response('Image ID is required', { status: 400 })
  }
  
  // สร้าง URL สำหรับ Cloudflare Images
  const imageUrl = `https://imagedelivery.net/abcdef123456/${imageId}/w=${width},h=${height}`
  
  // ดึงรูปภาพและส่งกลับ
  const imageResponse = await fetch(imageUrl)
  
  // คัดลอก headers และปรับแต่งตามต้องการ
  const headers = new Headers(imageResponse.headers)
  headers.set('Cache-Control', 'public, max-age=31536000')
  
  return new Response(imageResponse.body, {
    status: imageResponse.status,
    headers
  })
}

// ตัวอย่างการใช้ Workers เพื่อเพิ่มลายน้ำ (ต้องใช้ร่วมกับ Cloudflare Workers Image Resizing)
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  const imageId = url.pathname.split('/')[1]
  
  if (!imageId) {
    return new Response('Image ID is required', { status: 400 })
  }
  
  // สร้าง URL สำหรับ Cloudflare Images
  const imageUrl = `https://imagedelivery.net/abcdef123456/${imageId}/public`
  
  // ตั้งค่าการปรับแต่งรูปภาพ
  const imageOptions = {
    cf: {
      image: {
        width: 800,
        height: 600,
        fit: 'scale-down',
        quality: 85,
        draw: [{
          url: 'https://example.com/watermark.png',
          opacity: 0.5,
          bottom: 10,
          right: 10
        }]
      }
    }
  }
  
  // ดึงรูปภาพและปรับแต่ง
  return fetch(imageUrl, imageOptions)
}

const crypto = require('crypto');

function generateSignedUrl(imageId, variant, expirationTimestamp, key) {
  // สร้าง URL พื้นฐาน
  const baseUrl = `https://imagedelivery.net/abcdef123456/${imageId}/${variant}`;
  
  // สร้าง signature
  const signature = crypto
    .createHmac('sha256', key)
    .update(`${imageId}/${variant}${expirationTimestamp}`)
    .digest('hex');
  
  // สร้าง URL ที่มีลายเซ็น
  return `${baseUrl}?exp=${expirationTimestamp}&sig=${signature}`;
}

// ตัวอย่างการใช้งาน
const imageId = '2cdc28f0-017a-49c4-9ed7-87056c83901';
const variant = 'public';
const expirationTimestamp = Math.floor(Date.now() / 1000) + 3600; // หมดอายุใน 1 ชั่วโมง
const key = 'your-signing-key';

const signedUrl = generateSignedUrl(imageId, variant, expirationTimestamp, key);
console.log(signedUrl);

// ตัวอย่างโค้ดสำหรับอัปโหลดหลายรูปภาพ
async function bulkUpload(files) {
  const uploadPromises = files.map(file => {
    const formData = new FormData();
    formData.append('file', file);
    
    return fetch('https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer YOUR_API_TOKEN'
      },
      body: formData
    }).then(response => response.json());
  });
  
  return Promise.all(uploadPromises);
}

# ติดตั้ง Cloudflare CLI
npm install -g @cloudflare/wrangler

# ล็อกอิน
wrangler login

# อัปโหลดรูปภาพทั้งหมดในโฟลเดอร์
for file in ./images/*; do
  wrangler images upload "$file"
done

curl -X POST \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -F "file=@/path/to/image.jpg" \
  -F "metadata={\"title\":\"Product Image\",\"category\":\"electronics\",\"tags\":[\"smartphone\",\"gadget\"]}" \
  https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1

// ตัวอย่างโค้ดสำหรับค้นหารูปภาพด้วย Metadata
async function searchImagesByMetadata(category, tags) {
  const response = await fetch(`https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1/search`, {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_API_TOKEN',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      metadata: {
        category: category,
        tags: tags
      }
    })
  });
  
  return response.json();
}

// ตัวอย่างการใช้งาน
searchImagesByMetadata('electronics', ['smartphone']).then(result => {
  console.log(result.images);
});

// ตัวอย่างโค้ดสำหรับดึงข้อมูลการใช้งาน
async function getImagesUsage() {
  const response = await fetch(`https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1/stats`, {
    headers: {
      'Authorization': 'Bearer YOUR_API_TOKEN'
    }
  });
  
  return response.json();
}

// ตัวอย่างการใช้งาน
getImagesUsage().then(stats => {
  console.log('จำนวนรูปภาพ:', stats.result.count);
  console.log('พื้นที่จัดเก็บที่ใช้:', stats.result.storage);
  console.log('Bandwidth ที่ใช้:', stats.result.bandwidth);
});