Na era digital de hoje, a capacidade de extrair texto das imagens está se tornando cada vez mais importante. Se você está lidando com documentos scannados, cartões de negócios, ou qualquer outra forma de dados baseados na imagem, ser capaz de pesquisar e manipular esta informação eficientemente pode economizar muito tempo e esforço. Este tutorial irá guiá-lo através da construção de uma aplicação web interativa usando Aspose.OCR e ASP.NET Core que permite aos usuários para carregar imagens, procurar palavras-chave específicas dentro do texto extraído, e ver resultados em tempo real com jogos destacados.

Fonte da verdade: O código e o fluxo abaixo são alinhados com o gesto no final deste artigo (controlador endpoints, AsposeOcr uso, e a forma de resposta JSON).

Exemplo completo

Pré-requisitos

  • .NET 8 (ou .Net 6+) SDK
  • Visual Studio / VS Código
  • Acesso para Aspose.OCR
  • (Opcional) Um arquivo de licença Aspose se você pretende ultrapassar os limites de avaliação

Passo 1: Crie o ASP.NET Core MVC Project

dotnet new mvc -n ImageTextSearchApp -f net8.0
cd ImageTextSearchApp

# Add Aspose.OCR
dotnet add package Aspose.OCR

Por que o MVC? O gesto usa controladores (HomeControllerVisões e um clássico Startup— um padrão fácil e bem conhecido para upload de arquivos + OCR do lado do servidor.

Passo 2: Prepare os ativos estáticos e carregue a pasta

O controlador escreve upload abaixo wwwroot/uploadsCrie essa pasta e certifique-se de que a aplicação pode escrever para ela.

mkdir -p wwwroot/uploads

Também permitimos arquivos estáticos middleware em Startup Mais tarde, assim como o wwwroot A árvore é servida corretamente.

Passo 3: Adicione o Controlador (Upload + OCR + Search)

Crie Controllers/HomeController.cs e execute Index + SearchText Esta ação salva a imagem carregada, realiza OCR, busca uma palavra-chave (caso-insensível) e retorna JSON.

using System;
using System.IO;
using System.Threading.Tasks;
using Aspose.Ocr;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace ImageTextSearchApp
{
    public class HomeController : Controller
    {
        private readonly IWebHostEnvironment _environment;

        public HomeController(IWebHostEnvironment environment)
        {
            _environment = environment;
        }

        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        [RequestSizeLimit(20_000_000)] // ~20MB max, adjust as needed
        public async Task<IActionResult> SearchText(IFormFile imageFile, string searchKeyword)
        {
            if (imageFile == null || imageFile.Length == 0)
                return BadRequest("Image file is required.");
            if (string.IsNullOrWhiteSpace(searchKeyword))
                return BadRequest("Search keyword is required.");

            // Ensure uploads directory exists
            var uploadsDir = Path.Combine(_environment.WebRootPath, "uploads");
            Directory.CreateDirectory(uploadsDir);

            // Sanitize filename and save
            var safeName = Path.GetFileName(imageFile.FileName);
            var filePath = Path.Combine(uploadsDir, safeName);
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                await imageFile.CopyToAsync(stream);
            }

            // Perform OCR on the uploaded image
            using (var ocrEngine = new AsposeOcr())
            {
                var extractedText = await ocrEngine.RecognizeImageAsync(filePath);

                // Case-insensitive keyword check
                var found = extractedText?.IndexOf(searchKeyword, StringComparison.OrdinalIgnoreCase) >= 0;
                var searchResult = found ? "Keyword found!" : "Keyword not found.";

                // Return minimal JSON (exact shape matches the gist)
                return Json(new { extractedText, searchResult });
            }
        }
    }
}

Notas

  • Adicionamos um pequeno limite de tamanho de arquivo e criação de diretório para a robusteza.
  • Para a produção, validação de tipos de arquivo (.png/.jpg/.jpeg/.tifConsidere a verificação do vírus.

Passo 4: Wire Up Startup e Programação

Crie Startup.cs e Program.CS como no gesto para permitir MVC, arquivos estáticos, itinerância e redireção HTTPS.

Página inicial.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace ImageTextSearchApp
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();         // serves wwwroot (including /uploads)

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }
}
  • Programação .cs *
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

namespace ImageTextSearchApp
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }

        public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseStartup<Startup>();
                });
    }
}

Passo 5: Construa o upload + Search UI (Razor View)

Crie Views/Home/Index.cshtml com um formulário de upload simples e uma caixa de pesquisa. /Home/SearchText, imprime texto OCR, e destaca as partidas no navegador (não são necessárias alterações no servidor).

@{
    ViewData["Title"] = "Image Text Search";
}

<h1 class="mb-3">Image Text Search (Aspose.OCR + ASP.NET Core)</h1>

<form id="ocrForm" enctype="multipart/form-data" class="mb-4">
    <div class="form-group mb-2">
        <label for="imageFile">Select image</label>
        <input type="file" id="imageFile" name="imageFile" accept=".png,.jpg,.jpeg,.tif,.tiff,.bmp" class="form-control" required />
    </div>

    <div class="form-group mb-2">
        <label for="searchKeyword">Keyword</label>
        <input type="text" id="searchKeyword" name="searchKeyword" class="form-control" placeholder="Enter a word to find..." required />
    </div>

    <button type="submit" class="btn btn-primary">Upload & Search</button>
</form>

<div id="result" class="mt-3">
    <h3>Result</h3>
    <p id="searchStatus" class="fw-bold"></p>
    <pre id="extractedText" style="white-space: pre-wrap"></pre>
</div>

@section Scripts {
<script>
(function () {
    const form = document.getElementById('ocrForm');
    const statusEl = document.getElementById('searchStatus');
    const textEl = document.getElementById('extractedText');

    function escapeHtml(s) {
        return s.replace(/[&<>"']/g, c => ({
            '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
        }[c]));
    }

    function highlight(text, keyword) {
        if (!keyword) return escapeHtml(text);
        const pattern = new RegExp(`(${keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
        return escapeHtml(text).replace(pattern, '<mark>$1</mark>');
    }

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        statusEl.textContent = 'Processing...';
        textEl.textContent = '';

        const formData = new FormData(form);
        try {
            const res = await fetch('/Home/SearchText', {
                method: 'POST',
                body: formData
            });
            if (!res.ok) {
                const msg = await res.text();
                statusEl.textContent = `Error: ${msg}`;
                return;
            }
            const data = await res.json();
            statusEl.textContent = data.searchResult || '';
            const kw = document.getElementById('searchKeyword').value;
            textEl.innerHTML = highlight(data.extractedText || '', kw);
        } catch (err) {
            statusEl.textContent = 'Unexpected error. See console.';
            console.error(err);
        }
    });
})();
</script>
}

Isso implementa em tempo real destacamento no bloco de texto extraído.A realização de destaques na imagem em si exigiria o OCR de caixas de ligação e sobreposições de desenho (não cobertas pelo gesto).

Passo 6: execute a aplicação

dotnet run

Abra o URL mostrado na consola (por exemplo, https://localhost:5001).Carregue uma imagem, entre uma palavra-chave e clique Upload & Search.

  • Keyword found! ou Keyword not found. (Generado pelo servidor)
  • O texto ** extraído** com o lado do cliente <mark> Destaques

Etapa 7: Considerações preparadas para produção (opcional)

  • Validação de arquivo: Verifique os tipos/extensões do MIME e considere a verificação antivírus.
  • ** Limitações de tamanho**: Use RequestSizeLimit (Show) e reverse proxy/web.config limites conforme necessário.
  • Cleanup: Remova periodicamente arquivos antigos wwwroot/uploads.
  • Localização: Se você precisar de várias línguas, configure opções de idioma OCR ao lado do servidor.
  • Error UX: substituir alertas com toastes; adicionar roteadores de carregamento e barras de progresso.

Troubleshooting

  • ** Resultado OCR vazio**: Tente entrada de alta qualidade, orientação correta ou formato diferente (PNG/TIFF).
  • CORS: Se o front-end for separado, habilite CORS e use o URL completo da API.
  • HTTPS: Assure dev cert confiança (dotnet dev-certs https --trustSe o navegador bloquear conteúdo misto.

More in this category