04-图片接口

imgix服务

📊 一、免费额度说明

1. 基础免费计划

   • 图片处理量：每月最多 1,000 张图片。
   • CDN流量：每月 100GB。
   • 资源源（Source）：可创建 2 个资源源（用于管理图片存储或动态链接）。
   • 其他功能：支持 HTTPS、基础图片处理（裁剪、压缩、格式转换等）。

2. 免费版限制

   • 高级功能（如背景移除、视频处理）仅限付费企业计划使用。
   • 超额后需升级至付费计划（起价为 $75/月）。

---

🛠️ 二、如何使用 imgix

步骤 1：注册与配置

1. 注册账号
   访问 imgix官网，注册后进入控制台。
2. 创建资源源（Source）
   • 选择图片来源（如 AWS S3、Google Cloud 或直接上传）。
   • 绑定自定义域名（需配置 DNS 解析至 imgix 提供的 CNAME）。

步骤 2：图片处理与调用

通过 URL 参数动态调整图片，例如：

https://your-domain.imgix.net/image.jpg?w=800&h=600&fit=crop&auto=format

常用参数：

• w/h：宽/高（像素）
• fit：裁剪模式（如 crop、clip）
• auto：自动优化（压缩、格式转换）。
• fm：指定格式（如 webp、jpg）。

步骤 3：集成到项目

1. Web 端（JavaScript）
   使用 imgix.js 库动态生成响应式图片：

   npm install @imgix/imgix-js  // 安装
   import Imgix from '@imgix/imgix-js';
   const client = new Imgix({ domain: 'your-domain.imgix.net' });
   const url = client.buildUrl('image.jpg', { w: 500, h: 300 }); // 生成URL

2. 移动端（Flutter）
   通过 imgix_flutter 插件加载图片：

   dependencies:
     imgix_flutter: ^1.0.0
   // 使用示例
   ImgixImage(
     'image.jpg',
     options: ImgixOptions(width: 300, height: 200, format: ImgixFormat.webp),
   )

---

⚡ 三、高级功能与技巧

1. 响应式图片
   结合 srcset 和 sizes 属性适配不同屏幕。
2. 懒加载
   用 Intersection Observer API 延迟加载图片。
3. 背景移除（需企业计划）
   参数 bg-remove=true 可自动抠图，需联系销售开通。

---

💰 四、付费计划参考

• 基础版：$75/月（包含更高额度的流量与图片处理量）。
• 企业版：定制价格，支持视频处理、高级API功能等。

---

💎 总结

• ✅ 免费额度：月 1,000 张图片 + 100GB 流量，适合小型项目。
• ⚠️ 注意：超额或需高级功能（如背景移除）需付费。
• 🔧 快速入门：注册 → 创建 Source → 通过 URL 参数或 SDK 处理图片。

建议先通过免费计划测试需求，再决定是否升级。详细参数文档见：imgix API Docs。