Nykypäivän digitaalisessa iässä, kyky poistaa tekstiä kuvista on yhä tärkeämpää. Olitpa käsittelemässä skannattuja asiakirjoja, yrityskortteja tai muuta muotoa kuvanpohjaisia tietoja voi etsiä ja manipuloida tätä tietoa tehokkaasti säästää paljon aikaa ja vaivaa. Tämä opas ohjaa sinua rakentamalla vuorovaikutteinen web-sovellus käyttämällä Aspose.OCR ja ASP.NET Core, joka mahdollistaa käyttäjien lataamaan kuvia, etsimään tiettyjä avainsanoja sisällä tuotettu teksti, ja katsella reaaliaikaisia tuloksia korostettuja otteluja.

Totuuden lähde: Alla oleva koodi ja virtaus on yhdenmukaistettu tämän artikkelin lopussa olevaan kuoriin (kontrollin loppupisteet, AsposeOcr Käyttö ja JSON vastausmuoto).

Täydellinen esimerkki

edellytykset

  • .NET 8 (tai .Net 6+) SDK
  • Visual Studio / VS koodi
  • Käytettävissä on Aspose.OCR
  • (Vaihtoehtoinen) ASPOSE-lisenssin tiedosto, jos aiot ylittää arviointirajat

Vaihe 1: ASP.NET Core MVC -projektin luominen

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

# Add Aspose.OCR
dotnet add package Aspose.OCR

Miksi MVC? Käytössä on ohjaimet (HomeController, näkymät, ja klassikko Startup- helppokäyttöinen, hyvin tunnettu malli tiedostojen lataamiseen + OCR: n palvelinpuolelle.

Vaihe 2: Valmista vakaat omaisuuserät ja latauslehti

Ohjaaja kirjoittaa lataukset alla wwwroot/uploadsLuo tämä kansio ja varmista, että sovellus voi kirjoittaa siihen.

mkdir -p wwwroot/uploads

Me sallimme myös staattisia tiedostoja middleware Startup (katso myöhemmin) niin wwwroot Puuta käytetään oikein.

Vaihe 3: Lisää ohjainta (Lataa + OCR + Etsi)

Luo Controllers/HomeController.cs ja toteuta Index + SearchText Tämä toimenpide tallentaa ladatun kuvan, suorittaa OCR: n, etsii avainsanaa (asian epäherkkä) ja palauttaa JSONin.

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

Huomautukset

  • Olemme lisänneet pienen tiedoston koon rajoituksen ja sarjan luomisen kestävyydelle.
  • Tuotantoa varten vahvistetaan tiedostotyypit (.png/.jpg/.jpeg/.tifja tarkastella viruksen skannausta.

Vaihe 4: Wire Up Startup ja ohjelma

Luo Startup.cs ja Program.CS kuten laatikossa MVC, staattiset tiedostot, reititys ja HTTPS uudelleenohjaus.

  • aloituspöytäkirja*
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?}");
            });
        }
    }
}
  • Ohjelma ja 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>();
                });
    }
}

Vaihe 5: Rakenna Upload + Search UI (Razor View)

Luo Views/Home/Index.cshtml yksinkertaisella latauslomakkeella ja hakukentällä.JavaScript lähettää tiedoston + avainsanan /Home/SearchText, tulostaa OCR-tekstin ja korostaa selaimessa olevia yhteyksiä (ei tarvita palvelimen muutoksia).

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

Tämä toteuttaa ** reaaliaikaisen korostuksen poistetussa tekstissä**.Rendering huippuluokit kuvassa itse vaatii OCR-liitännät ja piirustuslevyjä (ei peitetä kuormaa).

Vaihe 6: Käynnistä App

dotnet run

Avaa konsolissa näkyvä URL (esim. https://localhost:5001).Lataa kuva, kirjoita avainsana ja napsauta Lataa ja etsi. Näet:

  • Keyword found! tai Keyword not found. (Käyttöön tarkoitettu palvelin)
  • Lisää tekstiä asiakaspuolella <mark> Korkeakohdat

Vaihe 7: Valmistettu tuotanto (vaihtoehtoinen)

  • File validation: Tarkista MIME-tyypit / laajennukset ja harkitse antivirus-skannausta.
  • Koko rajoitus: Käytä RequestSizeLimit (näyttää) ja kääntää proxy/web.config rajoja tarvittaessa.
  • Cleanup: Poista vanhat tiedostot säännöllisesti wwwroot/uploads.
  • Lokalisointi: Jos tarvitset useita kieliä, asettaa OCR-kieliasetukset palvelinpuolelle.
  • Error UX: Vaihda hälytykset toastilla; lisää latausliitännät ja edistymisväylät.

Troubleshooting

  • ** Tyhjä OCR tulos**: Kokeile korkealaatuista sisäänkäyntiä, oikeaa suuntautumista tai erilaista muotoa (PNG/TIFF).
  • CORS: Jos etupuoli on erillinen, käytä CORS ja käyttämällä koko API-osoitetta.
  • HTTPS: Ensure dev cert luottamus (dotnet dev-certs https --trustjos selaimessa on sekoitettu sisältö.

More in this category