Flutter图像处理插件buffer_image的使用

buffer_image 是一个用于修改和显示RGBA格式图像数据的Flutter库。它提供了多种功能，如像素编辑、图像缩放、旋转、绘制矩形、路径剪切等。

预览

以下是一个简单的示例代码，展示了如何创建并显示一个带有颜色渐变的图像：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BufferImage Demo',
      theme: ThemeData.light(),
      home: ImagePage(),
    );
  }
}

class ImagePage extends StatefulWidget {
  [@override](/user/override)
  _ImagePageState createState() => _ImagePageState();
}

class _ImagePageState extends State<ImagePage> {
  late BufferImage bufferImage;
  late RgbaImage image;
  late RgbaImage scaleImage;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 创建一个100x100的BufferImage
    bufferImage = BufferImage(100, 100);
    
    // 设置每个像素的颜色
    for (int i = 0; i < 100; i++) {
      for (int j = 0; j < 100; j++) {
        bufferImage.setColor(
          i, 
          j, 
          Colors.primaries[(i * 100 + j) % Colors.primaries.length]
        );
      }
    }

    // 将BufferImage转换为RgbaImage
    image = RgbaImage.fromBufferImage(bufferImage, scale: 1);

    // 调整图像大小
    bufferImage.resize(2);
    scaleImage = RgbaImage.fromBufferImage(bufferImage, scale: 1);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BufferImage Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Image(image: image),
            Image(image: scaleImage),
          ],
        ),
      ),
    );
  }
}

功能特性

• ✅ BufferImage: 可以编辑像素级别的图像。
• ✅ ImageProvider: 支持在 Image 小部件中显示图像。
• ✅ Scale the image: 支持最近邻插值和双线性插值的图像缩放。
• ✅ Color/Image mask with a blend mode: 支持颜色/图像遮罩与混合模式。
• ✅ Rotate: 支持图像旋转。
• ✅ drawRect drawImage: 支持绘制矩形和图像。
• ✅ clipPath drawPath: 支持路径剪切和路径绘制。
• ✅ GrayImage & multiple GrayScale algorithm: 支持灰度图像和多种灰度算法。
• 🚧 ImageProvider optimize: 图像提供者的优化（正在进行中）。
• 🚧 更多功能：更多功能正在开发中。

完整示例Demo

下面是一个更完整的示例，包含了多个页面，分别展示了不同的功能：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BufferImage Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: MyHomePage(title: 'BufferImage Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  late PageController _pageController;
  late List<Widget> _childs;

  [@override](/user/override)
  void initState() {
    super.initState();
    _childs = [
      ScalePage(),
      RotatePage(),
      BlendPage(),
      DrawPage(),
      MorePage()
    ];
    _pageController = PageController(initialPage: 0);
    _pageController.addListener(_onPageChange);
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      _pageController.animateToPage(
        _selectedIndex,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeOutCubic,
      );
    });
  }

  void _onPageChange() {
    if (_pageController.page != null &&
        _pageController.page!.toInt() != _selectedIndex) {
      setState(() {
        _selectedIndex = _pageController.page!.toInt();
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        children: _childs,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        selectedItemColor: Theme.of(context).primaryColor,
        unselectedItemColor: const Color.fromARGB(120, 0, 0, 0),
        showUnselectedLabels: true,
        type: BottomNavigationBarType.fixed,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.aspect_ratio), label: 'Scale'),
          BottomNavigationBarItem(icon: Icon(Icons.screen_rotation), label: 'Rotate'),
          BottomNavigationBarItem(icon: Icon(Icons.layers), label: 'Blend'),
          BottomNavigationBarItem(icon: Icon(Icons.collections), label: 'Draw'),
          BottomNavigationBarItem(icon: Icon(Icons.more_horiz), label: 'More'),
        ],
      ),
    );
  }
}

// 示例页面：缩放图像
class ScalePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    BufferImage bufferImage = BufferImage(100, 100);
    for (int i = 0; i < 100; i++) {
      for (int j = 0; j < 100; j++) {
        bufferImage.setColor(
          i, 
          j, 
          Colors.primaries[(i * 100 + j) % Colors.primaries.length]
        );
      }
    }
    var image = RgbaImage.fromBufferImage(bufferImage, scale: 1);
    bufferImage.resize(2);
    var scaleImage = RgbaImage.fromBufferImage(bufferImage, scale: 1);

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Image(image: image),
          Image(image: scaleImage),
        ],
      ),
    );
  }
}

// 其他页面（如RotatePage, BlendPage等）可以根据需要实现