Flutter GPUImage 在鸿蒙平台的使用指南

flutter_gpu_image是一款支持鸿蒙平台的Flutter图像处理插件，提供GPU加速的滤镜效果和相机功能。主要特点包括多种图像滤镜（亮度、对比度等）、实时相机预览和简洁的API设计。安装需通过Git引入依赖并配置相机权限。核心功能示例包括：1）图像显示与滤镜应用，通过控制器设置滤镜参数并保存处理结果；2）相机预览与拍照，支持前后摄像头切换和照片/视频录制。该插件为鸿蒙设备提供了高性能的

2501_94022858

304人浏览 · 2025-12-18 14:48:49

2501_94022858 · 2025-12-18 14:48:49 发布

一、插件介绍

flutter_gpu_image是一款基于GPU加速的图像处理Flutter插件，支持多种图像滤镜效果和相机功能。该插件已针对鸿蒙平台进行适配，允许开发者在鸿蒙设备上实现高性能的图像编辑和相机应用。

主要功能特点

提供丰富的图像滤镜效果（亮度、对比度、饱和度、色调等）
支持实时相机预览与滤镜应用
支持图像和视频的处理与显示
GPU加速确保高性能图像处理
简洁易用的API设计
完整的鸿蒙平台适配

二、安装与使用

2.1 包的引入

由于这是自定义修改版本，需要通过Git形式引入。在项目的pubspec.yaml文件中添加以下依赖配置：

dependencies:
  gpu_image:
    git:
      url: https://gitcode.com/openharmony-sig/flutter_gpu_image.git

添加依赖后，执行以下命令获取包：

flutter pub get

2.2 权限配置

使用相机功能时，需要在鸿蒙项目的配置文件中添加相应权限：

{
  "module": {
    "abilities": [
      {
        "permissions": [
          "ohos.permission.CAMERA",
          "ohos.permission.MEDIA_LOCATION",
          "ohos.permission.READ_MEDIA",
          "ohos.permission.WRITE_MEDIA"
        ]
      }
    ]
  }
}

2.3 核心API使用示例

2.3.1 图像显示与滤镜应用

import 'package:gpu_image/gpu_image.dart';

class ImageFilterPage extends StatefulWidget {
  final String imagePath;

  const ImageFilterPage({Key? key, required this.imagePath}) : super(key: key);

  @override
  _ImageFilterPageState createState() => _ImageFilterPageState();
}

class _ImageFilterPageState extends State<ImageFilterPage> {
  final GPUImageController _controller = GPUImageController();

  @override
  void initState() {
    super.initState();
    // 设置保存监听
    _controller.saveListen((path) {
      print("图片保存路径: $path");
      // 处理保存结果
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("图像滤镜")),
      body: Column(
        children: [
          // 显示带滤镜的图像
          GPUImageWidget(
            width: MediaQuery.of(context).size.width,
            height: 300,
            path: widget.imagePath,
            controller: _controller,
          ),
          // 滤镜控制按钮
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () {
                  // 应用亮度滤镜
                  _controller.setFilter(GPUBrightnessFilter(brightness: 1.5));
                },
                child: Text("增加亮度"),
              ),
              ElevatedButton(
                onPressed: () {
                  // 应用对比度滤镜
                  _controller.setFilter(GPUContrastFilter(contrast: 1.5));
                },
                child: Text("增加对比度"),
              ),
              ElevatedButton(
                onPressed: () {
                  // 保存处理后的图像
                  _controller.saveImage();
                },
                child: Text("保存图片"),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

2.3.2 相机预览与拍照

import 'package:gpu_image/gpu_image.dart';

class CameraFilterPage extends StatefulWidget {
  const CameraFilterPage({Key? key}) : super(key: key);

  @override
  _CameraFilterPageState createState() => _CameraFilterPageState();
}

class _CameraFilterPageState extends State<CameraFilterPage> {
  final GPUCameraController _controller = GPUCameraController();

  @override
  void initState() {
    super.initState();
    // 设置拍照监听
    _controller.photoListen((path) {
      print("拍照保存路径: $path");
      // 跳转到图片预览页面
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => ImagePreviewPage(imagePath: path),
        ),
      );
    });

    // 设置视频录制监听
    _controller.videoListen((recordStatus, path) {
      if (recordStatus == GPUType.startRecord) {
        print("开始录制视频");
      } else {
        print("视频录制结束，保存路径: $path");
        // 跳转到视频预览页面
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => VideoPreviewPage(videoPath: path),
          ),
        );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          // 相机预览
          GPUCameraWidget(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            controller: _controller,
          ),
          // 相机控制按钮
          Positioned(
            bottom: 50,
            left: 30,
            right: 30,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                // 切换相机按钮
                IconButton(
                  onPressed: () {
                    _controller.switchCamera();
                  },
                  icon: Icon(Icons.switch_camera, color: Colors.white, size: 30),
                ),
                // 拍照按钮
                GestureDetector(
                  onTap: () {
                    _controller.recordPhoto();
                  },
                  child: Container(
                    width: 70,
                    height: 70,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
                // 应用滤镜按钮
                IconButton(
                  onPressed: () {
                    _controller.setFilter(GPUSepiaFilter());
                  },
                  icon: Icon(Icons.filter, color: Colors.white, size: 30),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}