Dalam era digital hari ini, kemampuan untuk mengekstrak teks dari gambar menjadi semakin penting. apakah Anda berurusan dengan dokumen yang dipindai, kartu bisnis, atau bentuk lain data berbasis gambar, mampu mencari dan memanipulasi informasi ini secara efisien dapat menghemat banyak waktu dan usaha. tutorial ini akan membimbing Anda melalui membangun aplikasi web interaktif menggunakan Aspose.OCR dan ASP.NET Core yang memungkinkan pengguna untuk memuat foto, mencari kata kunci tertentu dalam teks yang dikeluarkan, dan melihat hasil dalam waktu nyata dengan pertandingan yang ditekankan.

Sumber kebenaran: Kode dan aliran di bawah ini diselaraskan dengan jamur di akhir artikel ini (titik akhir kontrol, AsposeOcr Penggunaan, dan JSON Response Shape).

Contoh lengkap

Persyaratan

  • Menggunakan .NET 8 (atau SDK)
  • Visual Studio dan VS Code
  • Akses untuk Aspose.OCR
  • (Optional) Sebuah file lisensi ASPOSE jika Anda berencana untuk melebihi batas evaluasi

Langkah 1: Membuat ASP.NET Core MVC Project

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

# Add Aspose.OCR
dotnet add package Aspose.OCR

Mengapa MVC? The gist menggunakan controller (HomeController, pandangan, dan sebuah klasik Startup- pattern yang mudah dan dikenal untuk upload file + server-side OCR.

Langkah 2: Siapkan Aset Statik dan Folder Upload

Pengawas menulis upload di bawah wwwroot/uploadsBuat folder tersebut dan pastikan aplikasi dapat menulisnya.

mkdir -p wwwroot/uploads

Kami juga memungkinkan file statik middleware di Startup (diterbitkan di kemudian hari) sehingga wwwroot Pohon tersebut disajikan dengan benar.

Langkah 3: Tambah Controller (Upload + OCR + Search)

Mencipta Controllers/HomeController.cs dan menerapkan Index + SearchText Tindakan ini menyimpan gambar yang dimuat naik, melakukan OCR, mencari kata kunci (tidak sensitif), dan mengembalikan 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 });
            }
        }
    }
}

Peringatan

  • Kami menambahkan batas ukuran file kecil dan penciptaan direktori untuk kestabilan.
  • Untuk produk, validasi jenis file (.png/.jpg/.jpeg/.tifdan pertimbangkan pemindaian virus.

Langkah 4: Wire Up Startup dan Program

Mencipta Startup.cs dan Program.CS seperti yang ada di folder untuk memungkinkan MVC, file statik, routing, dan HTTPS redirection.

Pertemuan dengan 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?}");
            });
        }
    }
}
  • 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>();
                });
    }
}

Langkah 5: Bangun UI Upload + Search (Razor View)

Mencipta Views/Home/Index.cshtml dengan formulir upload sederhana dan kotak pencarian. /Home/SearchText, mencetak teks OCR, dan menonjolkan perlawanan dalam browser (tidak ada perubahan server yang diperlukan).

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

Ini mengimplementasikan penekanan waktu nyata ** dalam blok teks yang dikeluarkan**.Mendapatkan highlights di gambar itu sendiri akan membutuhkan OCR membatasi kotak dan menggambar overlays (tidak ditutupi oleh gembala).

Langkah 6: Menggunakan App

dotnet run

Membuka URL yang ditunjukkan dalam konsol (misalnya, https://localhost:5001).Upload gambar, masukkan kata kunci, dan klik Upload & Search. Anda akan melihat:

  • Keyword found! atau Keyword not found. (Dihasilkan dari server)
  • Teks terekstrak dengan sisi klien <mark> Peningkatan

Langkah 7: Pertimbangan Produksi Siap (Optional)

  • Validasi file: Periksa jenis / ekstensi MIME dan pertimbangkan pemindaian antivirus.
  • Batas Ukuran: Gunakan RequestSizeLimit (menunjukkan) dan membalikkan batas proxy/web.config seperti yang diperlukan.
  • Cleanup: Periodis menghapus file lama dari wwwroot/uploads.
  • Lokasi: Jika Anda membutuhkan beberapa bahasa, tetapkan opsi bahasa OCR di sisi server.
  • Error UX: Mengganti peringatan dengan toast; tambahkan spinner muatan dan bar kemajuan.

Troubleshooting

  • ** Hasil OCR kosong**: Coba input berkualitas tinggi, orientasi yang benar, atau format yang berbeda (PNG/TIFF).
  • CORS: Jika front-end terpisah, mengaktifkan CORS dan gunakan URL API penuh.
  • *HTTPS: Memastikan kepercayaan diri (dotnet dev-certs https --trustJika browser memblokir konten campuran.

More in this category