Flutter图片优化插件jpegtran_ffi的使用

Flutter图片优化插件jpegtran_ffi的使用

jpegtran_ffi 是一个用于在 Flutter 应用中进行 JPEG 图像优化的插件。它提供了类似于 jpegtran 工具的功能，可以对 JPEG 图像进行无损变换（如裁剪和旋转），并且由于不需要解码或重新编码 JPEG 数据，因此速度较快。此外，它还支持有损压缩功能，可以在降低图像质量的同时选择性地调整图像大小，并且可以选择保留原始图像的 EXIF 数据。

主要功能

• 无损变换：支持裁剪、旋转等操作，无需解码或重新编码 JPEG 数据。
• 有损压缩：可以通过指定缩放比例和质量参数来减小图像文件大小。
• EXIF 数据保留：可以选择性地保留原始图像的 EXIF 数据。
• 多线程支持：由于使用了 Dart 的 FFI（Foreign Function Interface），该插件可以在 isolate 中运行，不会阻塞主线程。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  jpegtran_ffi: ^latest_version

然后运行 flutter pub get 来安装插件。

使用示例

示例 1：裁剪为正方形并旋转

以下代码展示了如何将一张 JPEG 图像裁剪为正方形，并将其旋转 90 度：

import 'package:jpegtran_ffi/jpegtran_ffi.dart';

void cropToSquareAndRotate(Uint8List _imageBytes) {
  var jpegtran = JpegTransformer(_imageBytes);
  try {
    // 获取图像信息
    var info = jpegtran.getInfo();

    // 计算裁剪尺寸
    var cropSize = min(info.width, info.height);
    var crop = JpegCrop(
      w: cropSize,  // 裁剪宽度
      h: cropSize,  // 裁剪高度
      x: (info.width - cropSize) ~/ 2,  // 裁剪起始 x 坐标
      y: (info.height - cropSize) ~/ 2,  // 裁剪起始 y 坐标
      alignIfRequired: true,  // 如果需要，自动对齐
    );

    // 旋转 90 度
    var rotate = JpegRotation(
      angle: 90,  // 旋转角度
      crop: crop,  // 裁剪区域
      options: JpegOptions(grayscale: false),  // 选项，例如是否转换为灰度
    );

    // 执行变换并获取新图像数据
    var newImage = jpegtran.transform(rotate);

    // 更新 UI
    setState(() {
      _imageBytes = newImage;
    });
  } catch (err) {
    _showError(err, context);  // 处理错误
  } finally {
    jpegtran.dispose();  // 释放资源
  }
}

示例 2：有损压缩

以下代码展示了如何对 JPEG 图像进行有损压缩，缩小图像尺寸并降低质量：

Uint8List recompress(Uint8List jpegBytes) {
  var jpegtran = JpegTransformer(jpegBytes);
  try {
    // 执行有损压缩
    return jpegtran.recompress(
      scale: 0.25,  // 缩放比例，例如 0.25 表示缩小到原图的 1/4
      quality: 70,  // 压缩质量，范围是 0-100，数值越高质量越好
      preserveEXIF: true,  // 是否保留 EXIF 数据
    );
  } finally {
    jpegtran.dispose();  // 释放资源
  }
}

完整示例 Demo

以下是一个完整的 Flutter 应用示例，展示了如何使用 jpegtran_ffi 插件进行图像优化。该应用包含三个页面：裁剪为正方形、执行多种操作以及显示版权信息。

import 'package:flutter/material.dart';
import 'package:jpegtran_ffi/jpegtran_ffi.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "jpeg_ffi demo",
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/cropSquare': (context) => Scaffold(body: CropSquarePage()),
        '/operations': (context) => Scaffold(body: OperationsPage()),
        '/credits': (context) => CreditsPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('jpeg_ffi examples'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(height: 40),
            ElevatedButton(
              child: Text("裁剪为正方形"),
              onPressed: () {
                Navigator.pushNamed(context, '/cropSquare');
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              child: Text("多种操作"),
              onPressed: () {
                Navigator.pushNamed(context, '/operations');
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              child: Text("版权信息"),
              onPressed: () {
                Navigator.pushNamed(context, '/credits');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class CropSquarePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text("裁剪为正方形页面"),
    );
  }
}

class OperationsPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text("多种操作页面"),
    );
  }
}

class CreditsPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text("版权信息页面"),
    );
  }
}