I dagens digitala tidsålder blir förmågan att extrahera text från bilder allt viktigare. Oavsett om du hanterar skannade dokument, affärskort eller någon annan form av bildbaserade data, att kunna söka och manipulera denna information effektivt kan spara mycket tid och ansträngning. Denna tutorial kommer att leda dig genom att bygga en interaktiv webbapp med Aspose.OCR och ASP.NET Core som gör det möjligt för användare att hämta bilder, leta efter specifika nyckelord inom den extraherade texten och se verkliga resultat med betyg.

Källa till sanningen: Koden och flödet nedan är anpassade till kranen i slutet av den här artikeln (kontrollerens slutpunkter, AsposeOcr användning, och JSON respons form).

Fullständigt exempel

förutsättningar

  • NET 8 (eller .NET 6+) SDK
  • Visual Studio / VS kod
  • NuGet åtkomst för Aspose.OCR
  • (Optionell) En Aspose-licensfil om du planerar att överstiga utvärderingsgränserna

Steg 1: Skapa ASP.NET Core MVC Project

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

# Add Aspose.OCR
dotnet add package Aspose.OCR

Varför MVC? Det går att använda kontroller (HomeController, synpunkter, och en klassiker Startup—en enkel, välkänd mönster för filuppladdningar + server-sidan OCR.

Steg 2: Förbered statiska tillgångar och ladda upp mappar

Kontrollören skriver uppladdningar under wwwroot/uploadsSkapa den mappen och se till att appen kan skriva till den.

mkdir -p wwwroot/uploads

Vi tillåter även statiska filer med middleware i Startup (se senare) så att wwwroot Träet serveras korrekt.

Steg 3: Lägg till Controller (Ladda upp + OCR + Sök)

Skapa Controllers/HomeController.cs och implementera Index + SearchText Denna åtgärd sparar den uppladdade bilden, utför OCR, letar efter ett nyckelord (case-insensitive) och returnerar 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 });
            }
        }
    }
}

Anmärkning

  • Vi har lagt till en liten filstorlek begränsning och katalog skapelse för robusthet.
  • För produktion, validera filtyper (.png/.jpg/.jpeg/.tifoch överväga virusskanning.

Steg 4: Wire Up Startup och Program

Skapa Startup.cs och Program.CS som i gemenskapen för att möjliggöra MVC, statiska filer, routing och HTTPS omdirigering.

*Startup.cs och

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?}");
            });
        }
    }
}
  • program.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>();
                });
    }
}

Steg 5: Bygg Upload + Search UI (Razor View)

Skapa Views/Home/Index.cshtml med ett enkelt laddningsformulär och en sökbok. JavaScript lägger filen + nyckelordet till /Home/SearchText, trycker på OCR-texten och lyfter fram matcher i webbläsaren (ingen serverändringar behövs).

@{
    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>
}

Detta implementerar real-time highlighting i den extraherade texten block.Rendering av höjdpunkter ** på bilden** själv skulle kräva OCR-gränssnitt och tecknad överlag (inte täckt av gipset).

Steg 6: Kör appen

dotnet run

Öppna URL-adressen som visas i konsolen (t.ex. https://localhost:5001).Ladda upp en bild, ange ett nyckelord och klicka på Ladda ner & Sök.

  • Keyword found! eller Keyword not found. (Genererad av server)
  • Den utdragna texten med klient-sidan <mark> höjdpunkter

Steg 7: Produktionsberedande överväganden (alternativ)

  • Filvalidering: Kontrollera MIME-typer/utvidgningar och överväga antivirusskanning.
  • Storgränser: Använd RequestSizeLimit (se) och omvända proxy/web.config gränser som behövs.
  • Cleanup: Periodiskt radera gamla filer från wwwroot/uploads.
  • Lokalisering: Om du behöver flera språk konfigurerar du OCR-språkalternativ på servern.
  • Error UX: Ersätt varningar med toast; Lägg till laddningsspinnare och framsteg barer.

Troubleshooting

  • Öppna OCR-resultat: Prova högkvalitativ inmatning, korrekt orientering eller olika format (PNG/TIFF).
  • CORS: Om front-end är separat aktiverar du CORS och använder hela API-URL.
  • HTTPS: Säkerställa dev cert förtroende (dotnet dev-certs https --trustOm webbläsaren blockerar blandat innehåll.

More in this category