Flutter实现HTML转图片时如何解决长内容截图裁剪问题

screenshot 默认的捕获逻辑基于当前设备视口的渲染缓冲区生成图像，你之前的代码里直接传了空的MediaQueryData，默认会使用当前设备的屏幕尺寸作为渲染边界，就算给Html组件加了shrinkWrap: true，超出屏幕高度的内容不会进入渲染缓冲区，最终生成的图片自然会被裁剪。

方案1：调整现有逻辑，修复长内容裁剪问题 #

不需要换依赖，只要修改捕获时的渲染约束，让HTML内容脱离设备屏幕高度限制完整展开，再执行捕获即可：

/// Convert Html to Image
Future<File> htmlToImage(
  String html, String targetPath, String fileName) async {
  // 按业务需求设置渲染宽度，一般和设计稿宽度保持一致保证排版一致
  const double renderWidth = 375;
  // 可根据业务场景预设最大内容高度，也可以先离屏渲染拿到内容实际高度再传入
  const double estimateContentHeight = 4000;
  const double outputPixelRatio = 3.0; // 输出3倍图保证清晰度

  Uint8List img = await screenshotController.captureFromWidget(
    MediaQuery(
      data: MediaQueryData(
        size: Size(renderWidth, estimateContentHeight),
        devicePixelRatio: outputPixelRatio,
      ),
      child: UnconstrainedBox(
        // 解除父组件默认的屏幕高度约束
        child: SizedBox(
          width: renderWidth,
          child: Html(
            shrinkWrap: true,
            data: html,
          ),
        ),
      ),
    ),
    delay: const Duration(milliseconds: 300), // 等待内容完全渲染后再捕获，避免出现白块
    pixelRatio: outputPixelRatio,
  );

  File file = await File('$targetPath/$fileName.jpg').create();
  file.writeAsBytesSync(img);
  return file;
}

如果预设高度不准，可以先将HTML组件做一次离屏渲染，通过RenderBox拿到内容实际渲染高度后再传入捕获逻辑，既不会出现裁剪，也不会因为高度设置过大导致图片底部留过多空白。

方案2：使用系统自带能力离屏渲染捕获 #

如果调整后还是有偶发裁剪问题，可以直接用Flutter内置的RepaintBoundary做离屏渲染捕获，逻辑和上面一致，但没有第三方插件的内置约束，可控性更高，不会出现插件默认逻辑导致的渲染边界限制。

• 如果HTML内容包含网络图片，一定要等所有图片加载完成后再触发截图，否则图片位置会显示空白
• 输出图片的像素比不要设置过高，内容过长时建议分段捕获后拼接，避免单张图片内存过大触发OOM
• 捕获前不要给HTML组件加ListView这类可滚动容器的包裹，否则内容同样会被视口截断

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