Flutter多媒体处理插件multimedia的使用

在Flutter中，multimedia 插件提供了强大的多媒体处理功能。本文将通过完整的示例代码展示如何使用该插件进行图像处理。

使用示例

以下是一个完整的示例代码，展示了如何使用 multimedia 插件对图像进行一系列处理操作：

int _kb = 1024;
int _mb = _kb * _kb;

void main() async {
  // 初始化多媒体处理环境
  initMultimedia();

  // 定义一个变量用于存储生成的缩略图哈希值
  late String th;

  // 创建一个媒体处理管道
  await MediaPipeline([
    // 加载原始图像文件
    MagickImageLoaderJob(File("in.png")),
    
    // 优化图像为 WebP 格式，最大尺寸为 4096 像素，最大文件大小为 300 KB
    ImageOptimizerWebPJob(
      output: File("image.webp"),
      maxDimension: 4096,
      maxBytes: 300 * _kb,
    ),
    
    // 生成缩略图，最大尺寸为 256 像素，最大文件大小为 3 KB
    ImageOptimizerWebPJob(
      output: File("thumb.webp"),
      maxDimension: 256,
      maxBytes: 3 * _kb,
    ),
    
    // 缩放图像为低分辨率版本，最大尺寸为 512 像素，质量为 15
    ImageScaleWebPJob(
      output: File("low.webp"),
      maxDimension: 512,
      quality: 15,
    ),
    
    // 生成图像的缩略图哈希值
    ImageThumbHashJob(onThumbHash: (h) => th = h),
  ]).push();

  // 打印生成的缩略图哈希值
  print("Thumbhash: $th");
}

代码说明

1. 初始化多媒体环境：

   initMultimedia();
   

   在使用任何多媒体处理功能之前，必须调用 initMultimedia() 来初始化多媒体处理环境。

2. 加载原始图像：

   MagickImageLoaderJob(File("in.png"))
   

   使用 MagickImageLoaderJob 加载原始图像文件。

3. 优化图像：

   ImageOptimizerWebPJob(
     output: File("image.webp"),
     maxDimension: 4096,
     maxBytes: 300 * _kb,
   )
   

   使用 ImageOptimizerWebPJob 将图像优化为 WebP 格式，并限制最大尺寸和文件大小。

4. 生成缩略图：

   ImageOptimizerWebPJob(
     output: File("thumb.webp"),
     maxDimension: 256,
     maxBytes: 3 * _kb,
   )
   

   使用相同的优化器生成缩略图，但设置更小的最大尺寸和文件大小。

5. 缩放图像：

   ImageScaleWebPJob(
     output: File("low.webp"),
     maxDimension: 512,
     quality: 15,
   )
   

   使用 ImageScaleWebPJob 将图像缩小到指定的分辨率，并调整质量。

6. 生成缩略图哈希值：

   ImageThumbHashJob(onThumbHash: (h) => th = h)
   

   使用 ImageThumbHashJob 生成图像的缩略图哈希值，便于后续使用。

7. 运行处理管道：

   await MediaPipeline([...]).push();
   

   将所有任务放入 MediaPipeline 中并执行。

8. 打印结果：

   print("Thumbhash: $th");
   

   打印生成的缩略图哈希值。

在 Docker 中使用

如果你需要在 Docker 容器中运行基于 Dart 的服务器，并使用 multimedia 插件进行图像处理，可以按照以下步骤构建 Docker 镜像：

Dockerfile 示例

# Stage 1: 构建 ImageMagick
FROM debian:bullseye-slim AS imagemagick-builder

# 安装构建依赖
RUN apt-get update
RUN apt-get install -y build-essential
RUN apt-get install -y wget
RUN apt-get install -y libpng-dev
RUN apt-get install -y libjpeg-dev
RUN apt-get install -y libtiff-dev
RUN apt-get install -y libwebp-dev

# 下载并编译 ImageMagick
WORKDIR /tmp
RUN wget https://github.com/ImageMagick/ImageMagick/archive/refs/tags/7.1.1-15.tar.gz
RUN tar xvzf 7.1.1-15.tar.gz
WORKDIR /tmp/ImageMagick-7.1.1-15
RUN ./configure --disable-hdri --with-quantum-depth=8
RUN make
RUN make install

# Stage 2: 最终镜像，包含 Dart 和 ImageMagick
FROM dart:stable

# 从构建阶段复制 ImageMagick
COPY --from=imagemagick-builder /usr/local /usr/local

# 更新库缓存
RUN ldconfig

# 设置 Dart 应用程序目录
WORKDIR /app
COPY pubspec.* ./
COPY subpackages ./subpackages
RUN dart pub get
COPY . .

EXPOSE 8080

# 如果你打算使用 AOT（提前编译），需要手动初始化多媒体资源
CMD ["dart", "run", "bin/server.dart"]