Flutter水下图像色彩校正插件underwater_image_color_correction的使用

Flutter水下图像色彩校正插件underwater_image_color_correction的使用

使用方法

final UnderwaterImageColorCorrection _underwaterImageColorCorrection = UnderwaterImageColorCorrection();
_underwaterImageColorCorrection.getColorFilterMatrix(pixels: pixels, width: width, height: height);

函数的参数如下：

• pixels：四通道像素数组 [R0, G0, B0, A0, R1, G1, B1, A1, ...]
• width：图像的宽度。
• height：图像的高度。

该函数的输出是一个颜色滤镜矩阵：

[
    红红,     红绿,    红蓝,   红Alpha,     红偏移,
    绿红,   绿绿,  绿蓝,  绿Alpha,   G偏移,
    蓝红,    蓝绿,   蓝蓝,   蓝Alpha,    B偏移,
    Alpha红,   Alpha绿,  Alpha蓝,  AlphaAlpha,   A偏移,
]

测试在浏览器中：https://colorcorrection.firebaseapp.com/（已移除）

动机

当你潜入水中时，某些颜色会被吸收得更多。红色是最先消失的颜色，这会使图像看起来更偏向蓝色和绿色。

通过调整每个颜色通道，可以恢复颜色，使图像看起来更加自然并提高对比度。此算法旨在自动完成这一过程。

示例

算法

1. 计算图像的平均颜色。
2. 将颜色色调移动到红色通道，直到最小红色平均值达到60。
3. 使用新的红色颜色创建RGB直方图。
4. 找到低阈值和高阈值水平。
5. 归一化数组，使得阈值水平等于0，高阈值等于255。
6. 基于新值创建颜色滤镜矩阵。

完整示例代码

import 'dart:io';
import 'package:image/image.dart' as uiImage;

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:underwater_image_color_correction/underwater_image_color_correction.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Underwater color correction example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Color correction'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  ImagePicker picker = ImagePicker();
  XFile? _image;
  final UnderwaterImageColorCorrection _underwaterImageColorCorrection =
      UnderwaterImageColorCorrection();
  ColorFilter? colorFilter;
  bool loading = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(onPressed: _clearData, icon: const Icon(Icons.delete))
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Center(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: _image == null
                    ? const Text('No image selected.')
                    : Image.file(
                        File(_image!.path),
                        fit: BoxFit.cover,
                      ),
              ),
            ),
            colorFilter == null
                ? const SizedBox()
                : Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: ColorFiltered(
                      colorFilter: colorFilter!,
                      child: Image.file(
                        File(_image!.path),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
            loading
                ? const CircularProgressIndicator()
                : ElevatedButton(
                    onPressed: _image != null ? _applyColorCorrection : null,
                    child: const Text("Convert"),
                  )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _pickImage,
        tooltip: 'Pick Image',
        child: const Icon(Icons.add),
      ),
    );
  }

  void _clearData() {
    setState(() {
      colorFilter = null;
      _image = null;
    });
  }

  void _pickImage() async {
    _clearData();
    XFile? image = await picker.pickImage(source: ImageSource.gallery);
    setState(() {
      _image = image;
    });
  }

  void _applyColorCorrection() async {
    setState(() {
      loading = true;
    });
    final image = uiImage.decodeImage(File(_image!.path).readAsBytesSync());
    var pixels = image!.getBytes(format: uiImage.Format.rgba);

    ColorFilter colorFilterImage =
        _underwaterImageColorCorrection.getColorFilterMatrix(
      pixels: pixels,
      width: image.width.toDouble(),
      height: image.height.toDouble(),
    );

    setState(() {
      colorFilter = colorFilterImage;
      loading = false;
    });
  }
}