Flutter(Dart)中如何基于4个坐标裁剪非矩形四边形图像？

方案一：基于Dart image 包实现自定义透视变换裁剪 #

Dart的image包本身没有四边形裁剪功能，但可以通过透视变换将任意四边形区域映射为矩形，再提取像素完成裁剪。核心思路是计算四边形到矩形的变换矩阵，对目标矩形的每个像素反向查找原图像中的对应位置，通过插值获取像素颜色。

实现步骤： #

1. 定义四边形的四个顶点坐标（按顺时针/逆时针顺序）和目标矩形的尺寸。
2. 计算透视变换矩阵：利用四点对应关系求解变换参数（可参考计算机图形学中的透视变换公式实现）。
3. 遍历目标矩形的每个像素，通过变换矩阵得到原图像中的对应坐标，使用双线性插值获取像素值（避免锯齿）。

简化代码示例： #

import 'package:image/image.dart' as img;
import 'dart:math';

img.Image cropQuadrilateral(img.Image src, List<Point<double>> quadPoints, int targetWidth, int targetHeight) {
  // 目标矩形的四个顶点（左上、右上、右下、左下）
  final targetPoints = [
    Point<double>(0, 0),
    Point<double>(targetWidth - 1, 0),
    Point<double>(targetWidth - 1, targetHeight - 1),
    Point<double>(0, targetHeight - 1),
  ];

  // 计算透视变换矩阵
  final matrix = calculatePerspectiveTransform(quadPoints, targetPoints);

  // 创建目标图像并填充像素
  final dest = img.Image(targetWidth, targetHeight);
  for (int y = 0; y < targetHeight; y++) {
    for (int x = 0; x < targetWidth; x++) {
      // 反向映射到原图像坐标
      final srcPoint = applyInversePerspective(matrix, x.toDouble(), y.toDouble());
      if (srcPoint.x >= 0 && srcPoint.x < src.width && srcPoint.y >=0 && srcPoint.y < src.height) {
        // 双线性插值获取像素颜色
        final color = bilinearInterpolation(src, srcPoint.x, srcPoint.y);
        dest.setPixel(x, y, color);
      }
    }
  }
  return dest;
}

// 计算透视变换矩阵（四点对应）
List<double> calculatePerspectiveTransform(List<Point<double>> src, List<Point<double>> dest) {
  // 实现透视变换矩阵求解逻辑，此处为简化示例，可参考开源实现补充完整
  final matrix = List<double>.filled(8, 0.0);
  // 省略具体矩阵计算代码，可通过构建线性方程组求解8个参数
  return matrix;
}

// 逆透视变换，得到原图像坐标
Point<double> applyInversePerspective(List<double> matrix, double x, double y) {
  final denom = matrix[6] * x + matrix[7] * y + 1;
  final srcX = (matrix[0] * x + matrix[1] * y + matrix[2]) / denom;
  final srcY = (matrix[3] * x + matrix[4] * y + matrix[5]) / denom;
  return Point<double>(srcX, srcY);
}

// 双线性插值获取像素颜色
int bilinearInterpolation(img.Image src, double x, double y) {
  final x1 = x.floor();
  final x2 = x1 + 1;
  final y1 = y.floor();
  final y2 = y1 + 1;

  if (x2 >= src.width || y2 >= src.height) return src.getPixel(x1, y1);

  final dx = x - x1;
  final dy = y - y1;

  final c11 = src.getPixel(x1, y1);
  final c12 = src.getPixel(x1, y2);
  final c21 = src.getPixel(x2, y1);
  final c22 = src.getPixel(x2, y2);

  // 计算RGB&A通道的插值结果
  final r = (1 - dx) * (1 - dy) * img.getRed(c11) + dx * (1 - dy) * img.getRed(c21) +
            (1 - dx) * dy * img.getRed(c12) + dx * dy * img.getRed(c22);
  final g = (1 - dx) * (1 - dy) * img.getGreen(c11) + dx * (1 - dy) * img.getGreen(c21) +
            (1 - dx) * dy * img.getGreen(c12) + dx * dy * img.getGreen(c22);
  final b = (1 - dx) * (1 - dy) * img.getBlue(c11) + dx * (1 - dy) * img.getBlue(c21) +
            (1 - dx) * dy * img.getBlue(c12) + dx * dy * img.getBlue(c22);
  final a = (1 - dx) * (1 - dy) * img.getAlpha(c11) + dx * (1 - dy) * img.getAlpha(c21) +
            (1 - dx) * dy * img.getAlpha(c12) + dx * dy * img.getAlpha(c22);

  return img.getColor(r.round(), g.round(), b.round(), a.round());
}

方案二：优化Flutter RepaintBoundary 导出质量 #

你之前用RepaintBoundary出现质量下降，大概率是因为导出时未设置正确的像素密度（pixelRatio）。默认toImage方法的pixelRatio为1，会压缩图像分辨率，只需设置为设备真实像素密度即可解决。

修正后的实现代码： #

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:image/image.dart' as img;

Future<img.Image?> cropWithRepaintBoundary(GlobalKey repaintKey, List<Offset> quadPoints) async {
  final boundary = repaintKey.currentContext?.findRenderObject() as RenderRepaintBoundary?;
  if (boundary == null) return null;

  // 获取设备真实像素密度，保证导出图像清晰度
  final pixelRatio = MediaQuery.of(boundary.context).devicePixelRatio;
  
  // 导出高清图像
  final image = await boundary.toImage(pixelRatio: pixelRatio);
  final byteData = await image.toByteData(format: ImageByteFormat.png);
  if (byteData == null) return null;

  // 转换为image包可处理的Image对象
  return img.decodeImage(byteData.buffer.asUint8List());
}

// 使用示例：
// RepaintBoundary(
//   key: _repaintKey,
//   child: Stack(
//     children: [
//       Image.asset('assets/test_image.png'),
//       // 绘制四边形裁剪框
//       CustomPaint(
//         painter: QuadPainter(quadPoints: quadPoints),
//       ),
//     ],
//   ),
// )

方案三：借助OpenCV for Flutter实现高效裁剪 #

如果追求更高的处理效率和精度，可以使用OpenCV的透视变换API。OpenCV提供了getPerspectiveTransform和warpPerspective函数，能快速完成四边形到矩形的映射，适合大尺寸图像处理。

核心逻辑： #

1. 将图像转换为OpenCV可处理的Mat格式。
2. 传入四边形顶点和目标矩形尺寸，调用getPerspectiveTransform生成变换矩阵。
3. 调用warpPerspective完成透视变换，得到裁剪后的图像。

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