Flutter Web端如何实现上传图片识别二维码功能？

因为mobile_scanner的图片识别功能仅支持Android/iOS，Web端无法使用，推荐通过Flutter与Web原生JS二维码库互操作的方式实现，以下是具体方案：

选择Web端JS二维码库 #

优先推荐轻量无依赖的jsQR，或者功能更全面的qr-scanner，两者都能在浏览器中直接识别图片中的二维码。

具体实现步骤（以jsQR为例） #

1. 引入JS库到Web项目 #

下载jsQR的压缩版JS文件（jsQR.min.js），放到Flutter项目的web/assets目录下，然后在web/index.html的<head>中添加本地引用：

<script src="assets/jsQR.min.js"></script>

2. 编写Dart端调用逻辑 #

导入必要的Web相关Dart包，实现图片转ImageData并调用JS识别的函数：

import 'dart:html' as html;
import 'dart:js' as js;
import 'dart:typed_data';

Future<String?> scanQrFromImage(html.File imageFile) async {
  // 加载上传的图片到Image元素
  final html.ImageElement img = html.ImageElement();
  img.src = html.Url.createObjectUrl(imageFile);
  await img.onLoad.first;

  // 创建Canvas绘制图片，用于获取像素数据
  final html.CanvasElement canvas = html.CanvasElement(
    width: img.width,
    height: img.height,
  );
  final html.CanvasRenderingContext2D ctx = canvas.context2D;
  ctx.drawImage(img, 0, 0);

  // 获取图片的像素数据
  final html.ImageData imageData = ctx.getImageData(0, 0, img.width!, img.height!);
  final Uint8List pixelData = imageData.data;
  final int width = imageData.width;
  final int height = imageData.height;

  // 调用jsQR的全局方法识别二维码
  final js.JsObject? qrResult = js.context.callMethod('jsQR', [pixelData, width, height]);
  
  return qrResult?['data'] as String?;
}

3. 对接图片上传逻辑 #

在你已有的图片上传逻辑中，拿到用户上传的html.File对象后，调用上述函数即可：

void handleUploadedImage(html.File file) async {
  String? qrContent = await scanQrFromImage(file);
  if (qrContent != null) {
    // 处理识别成功的二维码内容
    print('识别结果：$qrContent');
  } else {
    // 识别失败的提示
    print('未检测到二维码');
  }
}

注意事项 #

• 图片压缩：如果用户上传大尺寸图片，建议先压缩后再识别，提升速度和成功率。
• 跨域问题：仅本地上传图片无此问题，若处理网络图片需确保目标资源配置了CORS。
• 兼容性：jsQR支持Chrome、Firefox、Safari等现代浏览器，无需额外兼容处理。

内容的提问来源于stack exchange，提问作者Sultan SARIBAŞ