У данашњој дигиталној ери, способност извлачења текста из слика постаје све важније. Без обзира да ли се бавите скенираним документима, пословним картицама или било којом другом обликом података заснованих на слици, моћи да претражите и манипулишете овим информацијама ефикасно може уштедети пуно времена и напора. Овај туториал ће вас водити кроз изградњу интерактивне веб апликације користећи Аспосе.ОЦР и АСП.НЕТ Цоре која омогућава корисницима да преузме слике, траже одређене кључне речи у извођеном тексту и гледају резултате у реалном времену са истакнутим утакмицима.

Извор истине: Код и ток испод су усклађени са гумом на крају овог чланка (контролер коначне тачке, AsposeOcr Употреба, и JSON облик одговора).

Потпуни пример

Принципи

  • .net 8 (или .NET 6+) SDK
  • Визуелни студио / VS код
  • Доступност за Aspose.OCR
  • (Опцијално) Лицензијски датотеку Асписе ако планирате да пређете границе процене

Корак 1: Креирање ASP.NET Core MVC Пројекта

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

# Add Aspose.OCR
dotnet add package Aspose.OCR

Зашто МВЦ? Гем користи контролере (HomeController), погледи, и класика Startup—једноставан, добро познати образац за преузимање датотека + ОЦР на страни сервера.

Корак 2: Припремите статичке имовине и фасцикле за преузимање

Контролер пише преузимања испод wwwroot/uploadsКреирајте ту фасциклу и уверите се да апликација може да пише на њу.

mkdir -p wwwroot/uploads

Такође омогућавамо статичке датотеке middleware у Startup Касније се појављује тако wwwroot Дрво се правилно сервира.

Корак 3: Додајте контролер (Унапреди + ОЦР + Претраживање)

Креирање Controllers/HomeController.cs и имплементација Index + SearchText Ова акција сачува преузету слику, извршава ОЦР, претражује кључну реч (неосетљив на случај) и враћа ЈСОН.

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

Упозорење

  • Додали смо мали ограничење величине датотеке и креирање директоријума за чврстоћу.
  • За производњу, валидирају типове датотека (.png/.jpg/.jpeg/.tif1) и размотрити скенирање вируса.

Корак 4: Покретање стартапа и програма

Креирајте 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?}");
            });
        }
    }
}
  • Програма ЦС*
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>();
                });
    }
}

Корак 5: Изградите Upload + Search UI (Razor View)

Kreirajte Views/Home/Index.cshtml sa jednostavnim obrazcem za preuzimanje i poljem za pretragu. /Home/SearchText, штампа ОЦР текст, и наглашава утакмице у претраживачу (не потребе за промјенама сервера).

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

Ово имплементира реал-време наглашавање у извученом тексту блоку.Рендеринг истакнутих тачака на слици би захтевао ОЦР граничне кутије и цртање површине (не покривен гвождом).

Корак 6: Покрените апликацију

dotnet run

Отворите УРЛ који се приказује у конзоли (на пример, https://localhost:5001).Преузмите слику, унесите кључну реч и кликните на Upload & Search.

  • Keyword found! или Keyword not found. (Сервер генерисани)
  • Извучен текст са клијентском страном <mark> нагласак

Корак 7: Производња спремни размишљања (опционално)

  • Фил валидација: Проверите МИМЕ типове / проширења и размотрите скенирање антивируса.
  • Ограничења величине: Употреба RequestSizeLimit (показано) и обрнуто прокси/web.config ограничења ако је потребно.
  • Cleanup: Periodično brisanje starih datoteka iz wwwroot/uploads.
  • ** Локација**: Ако вам је потребан више језика, конфигуришите опције ОЦР језика на страни сервера.
  • Error UX: Замените упозорења са тостама; додајте вртоглавице за пуњење и напредне редове.

Troubleshooting

  • Пусти ОЦР резултат: Покушајте висококвалитетни улаз, прави оријентација или другачији формат (ПНГ/ТИФФ).
  • CORS: Ako je front-end odvojen, aktivirajte CORS i koristite celi URL API.
  • HTTPS: Assure dev cert trust (Уверите се да ћете бити сигурни)dotnet dev-certs https --trustАко претраживач блокира мешани садржај.

More in this category