In het digitale tijdperk wordt de mogelijkheid om tekst uit beelden te extraheren steeds belangrijker. Of u nu met gescannelde documenten, zakelijke kaarten of andere vormen van beeldgebaseerde gegevens bezig bent, het vermogen om deze informatie efficiënt te zoeken en te manipuleren kan veel tijd en inspanning besparen. Dit tutorial zal u begeleiden door het bouwen van een interactieve web-applicatie met behulp van Aspose.OCR en ASP.NET Core die gebruikers in staat stelt om afbeeldingen te uploaden, zoek naar specifieke keywords binnen de gescheurde tekst, en real-time resultaten te bekijken met getoonde wedstrijden.

Source of truth: De onderstaande code en stroom zijn aan het eind van dit artikel gerelateerd met de gist (controller endpoints, AsposeOcr gebruik, en JSON reactie formaat).

Volledige voorbeeld

Voorwaarden

  • .NET 8 (of .Net 6+) SDK
  • Visual Studio / VS Code
  • NuGet toegang voor Aspose.OCR
  • (Optioneel) Een Aspose-licentiebestand als u van plan bent om de beoordelingsgrens te overschrijden

Stap 1: Creëren van het ASP.NET Core MVC Project

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

# Add Aspose.OCR
dotnet add package Aspose.OCR

Waarom MVC? De gist gebruikt beheerders (HomeController), uitzichten, en een klassiek Startup—een eenvoudige, goed bekende patroon voor bestand uploaden + server-zijde OCR.

Stap 2: Voorbereid statische activa en upload map

De beheerder schrijft uploads onder wwwroot/uploadsCreëer die map en zorg ervoor dat de app erin kan schrijven.

mkdir -p wwwroot/uploads

We kunnen ook statische bestanden middenware in Startup (Vervolgens verschijnt) zo de wwwroot De boom wordt goed gediend.

Stap 3: Voeg de Controller toe (Upload + OCR + Zoeken)

Creëren Controllers/HomeController.cs en implementeren Index + SearchText Deze actie slaat de geüpload afbeelding op, uitvoert OCR, zoekt een sleutelwoord (case-insensitive) en retourneert 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 });
            }
        }
    }
}

Opmerkingen

  • We hebben een kleine bestandsgrootgrens en directory creatie toegevoegd voor robustheid.
  • Voor de productie, valideren van bestandstypen (.png/.jpg/.jpeg/.tifOverweeg het virus scannen.

Stap 4: Wire Up Startup en Programma

Creëer Startup.cs en Program.CS zoals in de schijf om MVC, statische bestanden, routing en HTTPS redirect mogelijk te maken.

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

Stap 5: Build the Upload + Search UI (Razor View)

Creëer Views/Home/Index.cshtml met een eenvoudige uploadformulier en een zoekbalk.De JavaScript stuurt de bestand + sleutelwoord naar /Home/SearchText, druk OCR-tekst en benadrukt matchingen in de browser (geen serverwijzigingen vereist).

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

Dit implementeert real-time highlighting in de geïntroduceerde tekst blok.Rendering van de hoogtepunten op de afbeelding zelf zou OCR boxes en draai overladen (niet bedekt door de gier) vereisen.

Stap 6: De app uitvoeren

dotnet run

Open de URL die in de console wordt weergegeven (bijv. https://localhost:5001).Upload een afbeelding, voer een sleutelwoord in en klik op Upload & Search.

  • Keyword found! of Keyword not found. (Generatie van de server)
  • De uitgegeven tekst met client-side <mark> Highlights

Stap 7: Productie voorbereide overwegingen (optional)

  • File validatie: MIME-types/uitbreidingen bekijken en antivirus scannen overwegen.
    • Grootte beperkingen *: Gebruik RequestSizeLimit (toont) en omgekeerd proxy/web.config grenzen als nodig.
  • Cleanup: periodiek oude bestanden verwijderen van wwwroot/uploads.
  • Locatie: Als u meerdere talen nodig hebt, installeer OCR taalopties aan de server-zijde.
  • Error UX: vervang waarschuwingen met toasts; voeg loadingspinners en progress bars toe.

Troubleshooting

  • Vuime OCR-resultaat: Probeer een hogere kwaliteit invoer, de juiste oriëntatie of een ander formaat (PNG/TIFF).
  • CORS: Als de front-end gescheiden is, kunt u CORS activeren en de volledige API-URL gebruiken.
  • HTTPS: Assure dev cert vertrouwen (dotnet dev-certs https --trustAls de browser gemengde inhoud blokkeert.

More in this category