如何在Blazor WebAssembly中将图片文件解析为二维码字符串

整体实现思路是借助JS生态成熟的二维码解析能力，通过Blazor JS互操作直接传递文件对象完成解析，无需在.NET侧做复杂的图像编解码处理，兼容性和识别准确率都更高。

1. 前置准备：封装JS侧解析逻辑 #

首先将你选用的JS端二维码解析库部署到wwwroot静态资源目录，然后在index.html的</body>标签前引入依赖和自定义封装方法：

<!-- 引入二维码解析库，示例用jsQR，可替换为其他同类库 -->
<script src="js/qr-parser.min.js"></script>
<!-- 自定义解析方法 -->
<script>
window.parseQrFromBrowserFile = async function (file) {
  return new Promise((resolve) => {
    const img = new Image();
    const objectUrl = URL.createObjectURL(file);
    img.onload = () => {
      // 绘制图片到canvas获取像素数据
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      // 调用二维码解析逻辑
      const parseResult = jsQR(imageData.data, imageData.width, imageData.height);
      // 释放资源
      URL.revokeObjectURL(objectUrl);
      resolve(parseResult ? parseResult.data : null);
    };
    img.onerror = () => {
      URL.revokeObjectURL(objectUrl);
      resolve(null);
    };
    img.src = objectUrl;
  });
}
</script>

2. Blazor 侧调用实现 #

直接通过IJSRuntime调用上面封装的JS方法，Blazor会自动将IBrowserFile映射为JS原生的File对象，无需手动做格式转换：

@page "/qr-parser"
@inject IJSRuntime JSRuntime

<h3>二维码解析</h3>
<input type="file" accept="image/*" @onchange="HandleFileUpload" />

@if (!string.IsNullOrEmpty(QrResult))
{
    <div class="mt-3">
        <h5>解析结果：</h5>
        <p>@QrResult</p>
    </div>
}

@code {
    private string QrResult { get; set; }

    private async Task HandleFileUpload(InputFileChangeEventArgs e)
    {
        var file = e.File;
        // 基础校验：限制文件大小不超过5MB，可根据需求调整
        if (file == null || file.Size > 5 * 1024 * 1024)
        {
            QrResult = "请上传小于5MB的有效图片文件";
            return;
        }
        // 调用JS解析方法
        var parseResult = await JSRuntime.InvokeAsync<string>("parseQrFromBrowserFile", file);
        QrResult = parseResult ?? "未识别到图片中的二维码内容";
    }
}

3. 优化与注意事项 #

• 兼容场景：该方案支持手机拍摄的照片、桌面端截图等所有浏览器可识别的图片格式，不需要额外做适配
• 性能优化：如果需要处理大尺寸图片，可在JS侧绘制canvas时先等比压缩图片分辨率，能大幅提升识别速度
• 异常扩展：你可以自行添加文件格式校验、识别失败重试、多个二维码识别等扩展逻辑，只需要修改JS侧的封装方法即可

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