Como Criar um Scanner de Código QR no Blazor

Updated: 3 de março de 2026

Blazor Server é um framework web .NET que executa C# no servidor e envia atualizações de UI para o navegador por meio de uma conexão SignalR. IronQR se integra diretamente ao Blazor Server, permitindo a varredura de códigos QR do lado do servidor a partir de imagens carregadas no navegador sem qualquer JavaScript.

Neste guia passo a passo, construiremos uma página Blazor Server que aceita o upload de uma imagem e decodifica qualquer código QR embutido usando IronQR.

Como Digitalizar um Código QR no Blazor

Instale a biblioteca IronQR C# para digitalizar códigos QR na web
Adicione um componente InputFile para aceitar uploads de imagens do navegador
Transmita o arquivo carregado para um caminho temporário no servidor
Carregue a imagem e envolva-a em um QrImageInput
Chame Read e exiba o valor decodificado no componente Blazor

Pré-requisitos

Visual Studio 2022 com o workload de ASP.NET e desenvolvimento web instalado
Um projeto Blazor Server direcionado ao .NET 8 ou posterior

Instalar IronQR

Instale a biblioteca IronQR usando o Console do Gerenciador de Pacotes NuGet no Visual Studio. Navegue para Tools > NuGet Package Manager > Package Manager Console e execute:

PM > Install-Package IronQR

Install-Package IronQR

Alternativamente, procure por IronQR no NuGet e instale a última versão.

Layout do Componente Blazor

A UI do scanner usa o componente InputFile embutido do Blazor para seleção de arquivo nativa do navegador, um botão para acionar o scan, e um parágrafo para exibir o resultado decodificado. Não é necessária interoperabilidade com JavaScript.

Adicione um novo componente Razor Scanner.razor com a seguinte marcação:

@page "/scanner"
@using IronQr
@using IronSoftware.Drawing

<h3>QR Code Scanner</h3>

<InputFile OnChange="OnFileSelected" accept="image/*" />

<br /><br />

<button @onclick="ScanQRCode" disabled="@(qrImageSrc == null)">Scan QR Code</button>

<p>Result: @scannedText</p>

@page "/scanner"
@using IronQr
@using IronSoftware.Drawing

<h3>QR Code Scanner</h3>

<InputFile OnChange="OnFileSelected" accept="image/*" />

<br /><br />

<button @onclick="ScanQRCode" disabled="@(qrImageSrc == null)">Scan QR Code</button>

<p>Result: @scannedText</p>

Text

Exemplo de Entrada

Use o código QR abaixo como imagem de teste. Salve-o em seu dispositivo, carregue-o via o seletor de arquivos no aplicativo, depois clique em Digitalizar Código QR. O valor decodificado deve ser exibido como https://ironsoftware.com.

QR code de exemplo codificando https://ironsoftware.com para testar o scanner de QR do Blazor

Código QR de exemplo — codifica https://ironsoftware.com

Digitalização de Código QR com IronQR

Quando um arquivo é selecionado, OnFileSelected transmite o upload do navegador para um arquivo temporário no servidor. Quando o botão de digitalização é clicado, ScanQRCode carrega o arquivo em um AnyBitmap, passa-o para QrReader.Read(), e grava o primeiro valor decodificado em scannedText, que o Blazor renderiza automaticamente no componente.

Adicione o seguinte bloco @code a Scanner.razor:

using IronQr;
using IronSoftware.Drawing;

private string? qrImageSrc;
private string scannedText = string.Empty;

private async Task OnFileSelected(InputFileChangeEventArgs e)
{
    var file = e.File;
    var tempPath = Path.Combine(Path.GetTempPath(), file.Name);
    await using var stream = file.OpenReadStream(maxAllowedSize: 10_000_000);
    await using var fs = File.Create(tempPath);
    await stream.CopyToAsync(fs);
    qrImageSrc = tempPath;
}

private async Task ScanQRCode()
{
    // Load the scanned QR code
    var inputBmp = AnyBitmap.FromFile(qrImageSrc!);
    var imageInput = new QrImageInput(inputBmp);
    var reader = new QrReader();

    // Read the scanned QR code
    var results = reader.Read(imageInput);

    // Check if a result was found
    var firstResult = results.FirstOrDefault();
    if (firstResult != null)
    {
        // Save the QR code value as a string
        scannedText = firstResult.Value;
    }
    else
    {
        scannedText = "No QR code found in the selected image.";
    }
}

using IronQr;
using IronSoftware.Drawing;

private string? qrImageSrc;
private string scannedText = string.Empty;

private async Task OnFileSelected(InputFileChangeEventArgs e)
{
    var file = e.File;
    var tempPath = Path.Combine(Path.GetTempPath(), file.Name);
    await using var stream = file.OpenReadStream(maxAllowedSize: 10_000_000);
    await using var fs = File.Create(tempPath);
    await stream.CopyToAsync(fs);
    qrImageSrc = tempPath;
}

private async Task ScanQRCode()
{
    // Load the scanned QR code
    var inputBmp = AnyBitmap.FromFile(qrImageSrc!);
    var imageInput = new QrImageInput(inputBmp);
    var reader = new QrReader();

    // Read the scanned QR code
    var results = reader.Read(imageInput);

    // Check if a result was found
    var firstResult = results.FirstOrDefault();
    if (firstResult != null)
    {
        // Save the QR code value as a string
        scannedText = firstResult.Value;
    }
    else
    {
        scannedText = "No QR code found in the selected image.";
    }
}

Imports IronQr
Imports IronSoftware.Drawing

Private qrImageSrc As String
Private scannedText As String = String.Empty

Private Async Function OnFileSelected(e As InputFileChangeEventArgs) As Task
    Dim file = e.File
    Dim tempPath = Path.Combine(Path.GetTempPath(), file.Name)
    Await Using stream = file.OpenReadStream(maxAllowedSize:=10000000)
        Await Using fs = File.Create(tempPath)
            Await stream.CopyToAsync(fs)
        End Using
    End Using
    qrImageSrc = tempPath
End Function

Private Async Function ScanQRCode() As Task
    ' Load the scanned QR code
    Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
    Dim imageInput = New QrImageInput(inputBmp)
    Dim reader = New QrReader()

    ' Read the scanned QR code
    Dim results = reader.Read(imageInput)

    ' Check if a result was found
    Dim firstResult = results.FirstOrDefault()
    If firstResult IsNot Nothing Then
        ' Save the QR code value as a string
        scannedText = firstResult.Value
    Else
        scannedText = "No QR code found in the selected image."
    End If
End Function

Imports IronQr
Imports IronSoftware.Drawing

Private qrImageSrc As String
Private scannedText As String = String.Empty

Private Async Function OnFileSelected(e As InputFileChangeEventArgs) As Task
    Dim file = e.File
    Dim tempPath = Path.Combine(Path.GetTempPath(), file.Name)
    Await Using stream = file.OpenReadStream(maxAllowedSize:=10000000)
        Await Using fs = File.Create(tempPath)
            Await stream.CopyToAsync(fs)
        End Using
    End Using
    qrImageSrc = tempPath
End Function

Private Async Function ScanQRCode() As Task
    ' Load the scanned QR code
    Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
    Dim imageInput = New QrImageInput(inputBmp)
    Dim reader = New QrReader()

    ' Read the scanned QR code
    Dim results = reader.Read(imageInput)

    ' Check if a result was found
    Dim firstResult = results.FirstOrDefault()
    If firstResult IsNot Nothing Then
        ' Save the QR code value as a string
        scannedText = firstResult.Value
    Else
        scannedText = "No QR code found in the selected image."
    End If
End Function

InputFile.OpenReadStream transmite os bytes carregados diretamente para um arquivo temporário no lado do servidor. AnyBitmap.FromFile decodifica o formato da imagem, e QrReader.Read retorna um IEnumerable<QrResult> com uma entrada por código QR encontrado. FirstOrDefault lida com segurança com imagens sem código QR sem lançar uma exceção.

Saída

Depois de selecionar uma imagem de código QR e clicar em Digitalizar Código QR, o valor decodificado é renderizado no parágrafo de resultado abaixo dos controles.

Leitor de QR Code em Blazor usando IronQR — resultado decodificado exibido na página

Valor decodificado do código QR renderizado no componente Blazor

Baixar o Projeto

Clique aqui para baixar o projeto completo BlazorQrScanner.

Conclusão

IronQR se integra a um aplicativo Blazor Server sem JavaScript. InputFile fornece seleção de arquivos nativa do navegador, e QrReader.Read lida com a decodificação inteiramente no servidor. O mesmo padrão se adapta para digitalizar múltiplos códigos QR por imagem, iterando sobre a coleção completa de resultados ao invés de chamar FirstOrDefault.

Para mais informações sobre leitura de códigos QR e os modos de digitalização disponíveis, veja os guias Ler Códigos QR de Imagem e Ler Códigos QR com Modos de Digitalização.

Perguntas frequentes

Qual é o uso principal do IronQR em um aplicativo Blazor Server?

O IronQR é usado principalmente em um aplicativo Blazor Server para habilitar a leitura de códigos QR no servidor a partir de imagens carregadas via navegador, sem a necessidade de JavaScript.

Como você instala a biblioteca IronQR em um projeto Blazor?

Para instalar a biblioteca IronQR em um projeto Blazor, use o Console do Gerenciador de Pacotes NuGet no Visual Studio e execute o comando de instalação ou procure por 'IronQR' no NuGet e instale a versão mais recente.

Qual componente é usado no Blazor para lidar com uploads de imagem para leitura de código QR?

O componente `InputFile` é usado no Blazor para lidar com uploads de imagem, permitindo que os usuários selecionem imagens do navegador para leitura de código QR.

Como o IronQR decodifica códigos QR em um aplicativo Blazor?

Em um aplicativo Blazor, o IronQR decodifica códigos QR carregando a imagem selecionada em um `AnyBitmap` e, em seguida, usando `QrReader.Read()` para extrair e exibir os dados do código QR.

O IronQR consegue lidar com imagens com múltiplos códigos QR?

Sim, o IronQR consegue lidar com imagens com múltiplos códigos QR iterando sobre a coleção `IEnumerable` retornada por `QrReader.Read()`.

Você precisa de JavaScript para implementar a leitura de código QR com IronQR no Blazor?

Não, você não precisa de JavaScript para implementar a leitura de código QR com IronQR no Blazor, pois todo o processo é realizado no servidor.

Qual é o papel do `AnyBitmap` no processo de leitura do IronQR?

`AnyBitmap` é usado para decodificar o formato de imagem do arquivo carregado, preparando-o para leitura de código QR com IronQR.

Como o Blazor exibe o resultado de uma leitura de código QR?

O Blazor exibe o resultado de uma leitura de código QR renderizando o valor decodificado em um elemento parágrafo na interface do componente.

O que acontece se uma imagem sem código QR é carregada no leitor Blazor?

Se uma imagem sem código QR é carregada, chamar `FirstOrDefault` na `IEnumerable` retornada por `QrReader.Read()` lida com a situação com segurança sem lançar uma exceção.

É possível baixar o projeto completo do leitor de QR Blazor?

Sim, você pode baixar o projeto completo do leitor de QR Blazor através do link fornecido na página do guia.

Curtis Chau

Converse agora mesmo com a equipe de engenharia.

Redator Técnico

Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais bem estruturados e visualmente atraentes.

...