Flutter Web使用image_compression压缩图片致浏览器冻结求助

问题根源 #

Flutter Web的computeAPI在Web平台并非真正的多线程实现——它只是将任务放入事件循环的微任务队列中执行，本质仍在主线程运行。当处理大尺寸图片时，压缩操作的计算量会阻塞UI渲染，导致浏览器冻结。image_compression包的compressInQueue在Web端底层仍是Dart同步计算逻辑，无法避开主线程阻塞问题。

解决方案：使用浏览器原生Canvas API异步压缩 #

利用浏览器原生的Canvas API结合异步文件处理，将压缩逻辑拆分为非阻塞的异步步骤，避免主线程被长时间占用。以下是替代实现代码：

import 'dart:html' as html;
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'dart:async';
import 'package:flutter/foundation.dart';

static Future<Uint8List> compressImageWeb(Uint8List imageBytes, int quality) async {
  final html.Blob blob = html.Blob([imageBytes]);
  final html.FileReader reader = html.FileReader();
  
  // 异步读取图片数据
  final completer = Completer<html.ImageElement>();
  reader.onLoad.listen((_) {
    final html.ImageElement img = html.ImageElement()
      ..src = reader.result as String
      ..onLoad.listen((_) => completer.complete(img));
  });
  reader.readAsDataUrl(blob);
  final html.ImageElement img = await completer.future;

  // 可选：对超大图片先缩放，减少计算量
  const maxWidth = 1920;
  double scale = 1.0;
  if (img.width > maxWidth) {
    scale = maxWidth / img.width;
  }

  // 使用Canvas进行压缩
  final html.CanvasElement canvas = html.CanvasElement(
    width: (img.width * scale).toInt(),
    height: (img.height * scale).toInt(),
  );
  final html.CanvasRenderingContext2D ctx = canvas.context2D;
  ctx.scale(scale, scale);
  ctx.drawImage(img, 0, 0);

  // 异步导出为JPG，指定质量
  final blobCompressed = await canvas.toBlob('image/jpeg', quality / 100);
  final readerCompressed = html.FileReader();
  final completerCompressed = Completer<Uint8List>();
  
  readerCompressed.onLoad.listen((_) {
    final Uint8List result = readerCompressed.result as Uint8List;
    completerCompressed.complete(result);
  });
  readerCompressed.readAsArrayBuffer(blobCompressed!);
  
  return completerCompressed.future;
}

// 替换原有的图片转字节并压缩的方法
static Future<Uint8List> flutterImageToUint8List(ui.Image image) async {
  developer.log("Convert Image to bytes");
  final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  final bytes = byteData!.buffer.asUint8List();
  // 直接使用Web端原生压缩方法
  return compressImageWeb(bytes, 40);
}

关键优化点 #

• 异步IO分离：通过FileReader异步读取图片，避免同步IO阻塞主线程
• 原生Canvas加速：浏览器对Canvas的渲染和导出做了底层优化，比纯Dart代码处理效率更高
• 分步处理：将图片加载、缩放、压缩拆分为多个异步步骤，让事件循环有间隙处理UI渲染

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