Flutter图像处理插件image_bus的使用

简介

image_bus 是一个用于方便操作图像的 Flutter 插件。通过它，您可以轻松地对图像进行缩放、裁剪等处理。

注意：此插件仅供参考使用，请谨慎使用。

使用步骤

导入插件

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

dependencies:
  image_bus: ^版本号

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

flutter pub get

基本用法

以下是一个完整的示例，展示如何使用 image_bus 插件对图像进行缩放和裁剪。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image_bus/image_bus.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Uint8List? croppedImage;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('图像处理示例'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(32),
        children: [
          // 显示原始图像
          Image.asset('assets/1.jpg', height: 100),
          // 如果裁剪成功，则显示裁剪后的图像
          if (croppedImage != null)
            Center(
              child: DecoratedBox(
                decoration: BoxDecoration(border: Border.all()),
                child: Image.memory(croppedImage!),
              ),
            ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 加载原始图像数据
          final bytes = await PlatformAssetBundle().load('assets/1.jpg');
          final data = bytes.buffer.asUint8List();

          // 调整图像大小（最大宽度和高度为 1920）
          final resizedData = await ImageBus(data).resize(maxWidth: 1920, maxHeight: 1920);

          // 对调整后的图像进行裁剪（左上角坐标为 (0, 0)，裁剪区域大小为 100x100）
          final croppedData = await ImageBus(resizedData).crop(0, 0, 100, 100);

          // 更新状态并显示裁剪后的图像
          setState(() {
            croppedImage = croppedData;
          });
        },
      ),
    );
  }
}

代码解析

1. 加载图像数据：

   final bytes = await PlatformAssetBundle().load('assets/1.jpg');
   final data = bytes.buffer.asUint8List();
   

   这里通过 PlatformAssetBundle 加载了本地的图像资源，并将其转换为 Uint8List 类型的数据。

2. 调整图像大小：

   final resizedData = await ImageBus(data).resize(maxWidth: 1920, maxHeight: 1920);
   

   使用 ImageBus.resize() 方法将图像调整到最大宽度和高度为 1920 的尺寸。

3. 裁剪图像：

   final croppedData = await ImageBus(resizedData).crop(0, 0, 100, 100);
   

   使用 ImageBus.crop() 方法从调整后的图像中裁剪出一个 100x100 的区域，起始坐标为 (0, 0)。

4. 更新 UI：

   setState(() {
     croppedImage = croppedData;
   });