Flutter中调整图片选择器图片尺寸并保存为文件（解决UI阻塞）

之前用decodeImage+copyResize+encodePng的方案会阻塞UI线程，因为这些同步操作都在主线程执行。下面给你两种异步处理的方案，解决UI阻塞问题，同时完成图片缩放和保存：

方案一：使用instantiateImageCodec异步编解码缩放 #

instantiateImageCodec是Flutter提供的异步图片编解码API，能在后台线程处理缩放，不会阻塞UI。

实现步骤： #

• 读取选中图片的字节数据
• 配置编解码参数，指定目标宽高
• 获取编码后的图片帧，转换为Image对象
• 将Image转为PNG/JPEG字节，写入文件

代码示例： #

import 'dart:io';
import 'dart:ui' as ui;

Future<void> resizeAndSaveImage(File originalImage, int targetWidth, int targetHeight) async {
  // 1. 读取图片字节
  final bytes = await originalImage.readAsBytes();
  
  // 2. 配置编解码参数，设置目标尺寸
  final codec = await ui.instantiateImageCodec(
    bytes,
    targetWidth: targetWidth,
    targetHeight: targetHeight,
  );
  
  // 3. 获取第一帧图片
  final frameInfo = await codec.getNextFrame();
  final scaledImage = frameInfo.image;
  
  // 4. 将Image转为PNG字节
  final pngBytes = await scaledImage.toByteData(format: ui.ImageByteFormat.png);
  if (pngBytes == null) return;
  
  // 5. 保存到文件（可自定义保存路径和文件名）
  final savePath = '${Directory.systemTemp.path}/scaled_image.png';
  await File(savePath).writeAsBytes(pngBytes.buffer.asUint8List());
  
  // 释放资源
  scaledImage.dispose();
  codec.dispose();
}

方案二：使用compute函数在Isolate中处理缩放 #

如果还是想用decodeImage+copyResize的逻辑，可以把这部分放到compute里，让任务在后台Isolate执行，避免阻塞UI。

代码示例： #

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

// 后台执行的缩放函数（需为顶层或static函数）
Uint8List? _scaleImage(Map<String, dynamic> params) {
  final bytes = params['bytes'] as Uint8List;
  final targetWidth = params['targetWidth'] as int;
  final targetHeight = params['targetHeight'] as int;
  
  final image = img.decodeImage(bytes);
  if (image == null) return null;
  final scaledImage = img.copyResize(image, width: targetWidth, height: targetHeight);
  return img.encodePng(scaledImage);
}

Future<void> resizeAndSaveImageWithCompute(File originalImage, int targetWidth, int targetHeight) async {
  final bytes = await originalImage.readAsBytes();
  
  // 用compute将缩放任务放到后台Isolate
  final scaledPngBytes = await compute(
    _scaleImage,
    {
      'bytes': bytes,
      'targetWidth': targetWidth,
      'targetHeight': targetHeight,
    },
  );
  
  if (scaledPngBytes == null) return;
  
  // 保存文件
  final savePath = '${Directory.systemTemp.path}/scaled_image_compute.png';
  await File(savePath).writeAsBytes(scaledPngBytes);
}

关于ResizeImage的说明 #

ResizeImage是ImageProvider的包装类，主要用于显示时的图片缩放，比如在Image组件中使用：

Image(
  image: ResizeImage(FileImage(originalImage), width: targetWidth, height: targetHeight),
)

但如果要将缩放后的图片保存为文件，ResizeImage无法直接提供字节数据，还是需要结合上面两种方案，先获取缩放后的Image对象，再转字节保存。

注意事项 #

• 处理完图片后记得调用dispose()释放资源，避免内存泄漏
• 可根据需求选择PNG或JPEG格式，JPEG可通过encodeJpeg传入quality参数调整质量
• 保存路径可结合path_provider包获取应用专属目录，避免权限问题

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