I dagens digitale tidsalder bliver evnen til at udveksle tekst fra billeder stadig vigtigere. Uanset om du arbejder med scannede dokumenter, forretningskort eller anden form for billedbaserede data, at kunne søge og manipulere denne information effektivt kan spare en masse tid og anstrengelse. Denne tutorial vil guide dig gennem at opbygge en interaktiv webapplikation ved hjælp af Aspose.OCR og ASP.NET Core, der gør det muligt for brugerne at uploade billeder, søge efter specifikke nøgleord inden for den udvindte tekst, og se resultater i realtid med fremhævet match.

Kilde for sandhed: Koden og strømmen nedenfor er i overensstemmelse med gommen i slutningen af denne artikel (kontroller endpunkter, AsposeOcr Brug, og JSON respons form).

Et fuldstændigt eksempel

Forudsætninger

  • NET 8 (eller .NET 6+) SDK
  • Visual Studio / VS kode
  • NuGet adgang til Aspose.OCR
  • (Optionelt) En Aspose-licensfil, hvis du planlægger at overstige evalueringsgrænserne

Trin 1: Skab ASP.NET Core MVC-projektet

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

# Add Aspose.OCR
dotnet add package Aspose.OCR

Hvorfor MVC? Gæsten bruger kontroller (HomeControllerSikkerhed, og en klassiker Startup-en nem og velkendt mønster til filopladninger + server-side OCR.

Trin 2: Forbered statiske aktiver og upload mappe

Kontrolleren skriver uploads under wwwroot/uploadsSkab den mappe og sørg for, at appen kan skrive til den.

mkdir -p wwwroot/uploads

Vi tillader også statiske filer med middleware i Startup (se senere) så den wwwroot Træet serveres korrekt.

Trin 3: Tilføj kontrolleren (Upload + OCR + Søg)

Skab Controllers/HomeController.cs og implementer Index + SearchText Denne handling gemmer det uploadede billede, udfører OCR, søger et nøgleord (case-insensitive) og returnerer 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 });
            }
        }
    }
}

Noter

  • Vi tilføjer en lille filstørrelsesgrænse og katalogskabelse for robusthed.
  • For produktion, validerer filtyper (.png/.jpg/.jpeg/.tifUndersøg virusskanning.

Næste trin: Startup og program

Skab Startup.cs og Program.CS som i gaden for at muliggøre MVC, statiske filer, routing og HTTPS omdirigering.

*Startup.dk »

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>();
                });
    }
}

Trin 5: Opbyg Upload + Search UI (Razor View)

Skab Views/Home/Index.cshtml med et simpelt uploadformular og en søgemaskine. /Home/SearchText, tryk OCR-tekst, og fremhæver matchinger i browseren (ikke serverændringer er nødvendige).

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

Dette implementerer real-time fremhævelse i den udvundede tekst blok.Rendering af højdepunkter på billedet selv ville kræve OCR-bindingskasser og tegning overlag (ikke dækket af gommen).

Næste skridt: Run the app

dotnet run

Åbne den URL, der vises i konsollen (f.eks. https://localhost:5001).Upload et billede, indtast et nøgleord og klik på Upload & Search. Du vil se:

  • Keyword found! eller Keyword not found. (Genereret af server)
  • Den udvundet tekst med klient-side <mark> Højdepunkter

Trin 7: Production-Ready Overvejelser (Optional)

  • File validation: Tjek MIME-typer/udvidelser og overveje antivirusskanning.
  • Mængde begrænsninger: Brug RequestSizeLimit (shown) og omvendt proxy/web.config begrænsninger som nødvendigt.
  • Cleanup: Periodisk slette gamle filer fra wwwroot/uploads.
  • Lokalisering: Hvis du har brug for flere sprog, skal du konfigurere OCR-sprogmuligheder på serversiden.
  • Error UX: Udskift advarsler med toast; tilføje loading spins og progress barer.

Troubleshooting

  • Udlad OCR-resultat: Prøv høj kvalitet input, korrekt orientering eller et andet format (PNG/TIFF).
  • CORS: Hvis front-end er adskilt, aktiver CORS og brug den fulde API URL.
  • HTTPS: Assure dev cert trust (dotnet dev-certs https --trustHvis browseren blokerer blandet indhold.

More in this category