如何使用Flutter/Dart获取图像所有像素颜色并生成对应颜色映射

实现流程 #

• 调用选图组件从相册/相机获取目标图片
• 读取图片字节流解码为可操作的位图对象
• 按横纵坐标逐一遍历所有像素，提取对应颜色值
• 按指定格式组装键值对，支持直接输出JSON

依赖配置 #

在pubspec.yaml中添加所需依赖：

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^1.0.4
  image: ^4.0.17

核心代码 #

import 'dart:convert';
import 'dart:io';
import 'package:image/image.dart' as img;
import 'package:image_picker/image_picker.dart';

/// 传入ImageSource.gallery取相册图，ImageSource.camera取相机拍摄图
/// 返回符合要求格式的像素颜色映射表
Future<Map<String, String>> getAnyImageColorMap(ImageSource source) async {
  // 选取目标图片
  final ImagePicker picker = ImagePicker();
  final XFile? pickedImg = await picker.pickImage(source: source);
  if (pickedImg == null) return {};

  // 解码图片为位图对象
  final List<int> imgBytes = await File(pickedImg.path).readAsBytes();
  final img.Image? bitmap = img.decodeImage(imgBytes);
  if (bitmap == null) return {};

  final Map<String, String> colorMap = {};
  // 逐像素遍历，坐标从1开始计数匹配示例格式
  for (int y = 0; y < bitmap.height; y++) {
    for (int x = 0; x < bitmap.width; x++) {
      final img.Pixel currentPixel = bitmap.getPixel(x, y);
      // 默认输出16进制HEX颜色，可按需修改为RGB/RGBA/十进制数值格式
      final String colorValue = '#${currentPixel.r.toRadixString(16).padLeft(2,'0')}${currentPixel.g.toRadixString(16).padLeft(2,'0')}${currentPixel.b.toRadixString(16).padLeft(2,'0')}';
      colorMap['${x+1},${y+1}'] = colorValue;
    }
  }

  // 如需直接输出JSON字符串，取消注释下一行即可
  // final String jsonResult = jsonEncode(colorMap);
  return colorMap;
}

注意事项 #

• 坐标规则：左上角第一个像素对应键为1,1，横向为x轴、纵向为y轴递增，和示例格式完全对齐
• 颜色格式：代码默认输出HEX格式色值，如需其他格式直接修改colorValue的生成逻辑即可，比如RGBA格式可写为'rgba(${currentPixel.r},${currentPixel.g},${currentPixel.b},${currentPixel.a})'
• 性能提示：高分辨率图片像素量极大（比如4000*3000分辨率图有1200万像素），全量遍历会占用较高内存、耗时较长，大尺寸图建议先做等比缩放再遍历像素
• 其他语言实现逻辑一致：Python可借助Pillow库、Web端可借助Canvas API实现相同效果，核心流程均为选图→解码位图→遍历像素→组装映射结构

内容的提问来源于stack exchange，提问作者agkts