Flutter图像处理辅助插件imageengine_helpers_dart的使用

Flutter图像处理辅助插件imageengine_helpers_dart的使用

Dart ImageEngine Helpers

imageengine_helpers_dart 是一个用于构建 ImageEngine 查询 URL 的小型工具集。这些工具在从 ImageEngine 分发中获取资源时非常有用，允许你通过对象声明指令。

安装

首先，在 pubspec.yaml 文件中添加依赖项：

dependencies:
  imageengine_helpers: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

类型定义

以下是 imageengine_helpers_dart 中的主要类型定义：

// 定义支持的图像格式枚举
enum IEFormat {
  png,    // PNG
  gif,    // GIF
  jpg,    // JPEG
  bmp,    // BMP
  webp,   // WebP
  jp2,    // JPEG 2000
  svg,    // SVG
  mp4,    // MP4
  jxr,    // JPEG XR
  avif,   // AVIF
  jxl,    // JPEG XL
}

// 定义图像适配方式枚举
enum IEFit {
  stretch,       // 拉伸
  box,           // 填充
  letterbox,     // 黑边填充
  cropbox,       // 裁剪
  outside,       // 外部适配
}

// 定义指令类
class IEDirectives {
  final int? width; // 最终图像的宽度
  final int? height; // 最终图像的高度
  final int? autoWidthFallback; // 如果设备检测失败，尝试使用回退值

  final int? scaleToScreenWidth; // 屏幕宽度比例 (0-100)
  final String? crop; // 裁剪区域字符串，例如 "width,height,left,top"

  final IEFormat? format; // 输出格式
  final IEFit? fit; // 图像适配方式

  final int? compression; // 压缩质量 (0-100)
  final int? sharpness; // 锐化程度 (0-100)
  final int? rotate; // 旋转角度 (-360-360)

  final bool? inline; // 是否将图像转换为 DataURL
  final bool? keepMeta; // 是否保留 EXIF 数据
  final bool? noOptimization; // 是否禁用 ImageEngine 优化
  final bool? forceDownload; // 是否强制下载
  final double? maxDevicePixelRatio; // 设备像素比 (1-4)

  IEDirectives({
    this.width,
    this.height,
    this.autoWidthFallback,
    this.scaleToScreenWidth,
    this.crop,
    this.format,
    this.fit,
    this.compression,
    this.sharpness,
    this.rotate,
    this.inline,
    this.keepMeta,
    this.noOptimization,
    this.forceDownload,
    this.maxDevicePixelRatio,
  });
}

示例用法

以下是一个完整的示例，展示如何使用 imageengine_helpers_dart 构建 ImageEngine 查询 URL：

import 'package:imageengine_helpers/imageengine_helpers.dart';

void main() {
  // 创建指令对象
  IEDirectives directives = IEDirectives(
    width: 400,            // 设置图像宽度为 400
    height: 200,           // 设置图像高度为 200
    fit: IEFit.cropbox,    // 使用裁剪适配方式
    compression: 10,       // 设置压缩质量为 10
    inline: true,          // 将图像转换为 DataURL
    format: IEFormat.png,  // 输出格式为 PNG
    forceDownload: true,   // 强制下载
    maxDevicePixelRatio: 2.1, // 设置设备像素比为 2.1
  );

  // 源图像 URL
  String sourceUrl = "https://my_ie_distribution.imgeng.io/path/to_asset1.jpg";

  // 构建最终的 ImageEngine URL
  String finalUrl = buildIEUrl(sourceUrl, directives);

  // 输出最终 URL
  print(finalUrl);
  // 输出结果: "https://my_ie_distribution.imgeng.io/path/to_asset1.jpg?imgeng=/w_400/h_200/m_cropbox/cmpr_10/in_true/f_png/dl_true"

  // 获取指令字符串表示
  String directivesString = buildIEDirectives(directives);

  // 输出指令字符串
  print(directivesString);
  // 输出结果: "/w_400/h_200/m_cropbox/cmpr_10/in_true/f_png/dl_true"

  // 获取查询字符串
  String queryString = buildIEQueryString(directives);

  // 输出查询字符串
  print(queryString);
  // 输出结果: "?imgeng=/w_400/h_200/m_cropbox/cmpr_10/in_true/f_png/dl_true"
}