Trong thời đại kỹ thuật số ngày nay, khả năng thu thập văn bản từ hình ảnh ngày càng trở nên quan trọng. Cho dù bạn đang đối phó với các tài liệu quét, thẻ kinh doanh, hoặc bất kỳ hình thức dữ liệu dựa trên ảnh nào khác, có thể tìm kiếm và thao tác thông tin này một cách hiệu quả sẽ tiết kiệm rất nhiều thời gian và nỗ lực. Hướng dẫn này sẽ hướng dẫn bạn thông qua việc xây dựng một ứng dụng web tương tác bằng cách sử dụng Aspose.OCR và ASP.NET Core cho phép người dùng tải lên ảnh, truy cập vào các từ khóa cụ thể trong bài viết thu được, và xem kết quả thực thời với trận đấu nổi bật.

** Nguồn của sự thật:** Mã và dòng chảy bên dưới được phối hợp với gạch ở cuối bài viết này (các điểm cuối của điều khiển, AsposeOcr sử dụng, và JSON phản ứng hình thức).

Một ví dụ đầy đủ

Nguyên tắc

  • .NET 8 (hoặc .Net 6+) SDK
  • Visual Studio / VS Mã
  • Truy cập tại NuGet Aspose.OCR
  • (Tùy chọn) Một tập tin giấy phép Aspose nếu bạn có kế hoạch vượt quá giới hạn đánh giá

Bước 1: Tạo dự án ASP.NET Core MVC

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

# Add Aspose.OCR
dotnet add package Aspose.OCR

Tại sao MVC? The gist uses controllers (HomeController, hình ảnh, và một cổ điển Startup- một mô hình dễ dàng, được biết đến để tải lên tệp + OCR bên máy chủ.

Bước 2: Chuẩn bị tài sản tĩnh và thư mục tải lên

Người quản lý viết tải lên dưới wwwroot/uploadsTạo thư mục đó và đảm bảo ứng dụng có thể viết cho nó.

mkdir -p wwwroot/uploads

Chúng tôi cũng cho phép các tệp static middleware trong Startup (được hiển thị sau đó) như vậy wwwroot Cây được phục vụ đúng cách.

Bước 3: Thêm bộ điều khiển (Upload + OCR + Search)

Tạo Controllers/HomeController.cs và thực hiện Index + SearchText Hành động này tiết kiệm hình ảnh được tải lên, thực hiện OCR, tìm kiếm một từ khóa (không nhạy cảm với trường hợp) và trả về 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 });
            }
        }
    }
}

Lưu ý

  • Chúng tôi đã thêm một giới hạn kích thước tệp nhỏ và tạo thư mục cho độ bền.
  • Đối với sản xuất, xác nhận các loại tệp (.png/.jpg/.jpeg/.tifVà xem xét virus quét.

Bước 4: Wire Up Startup và Chương trình

Tạo Startup.cs và Program.CS như trong gạch để cho phép MVC, tệp tĩnh, định tuyến, và HTTPS chuyển hướng.

  • Khởi động.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?}");
            });
        }
    }
}
  • Chương trình.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>();
                });
    }
}

Bước 5: Xây dựng UI tải lên + Tìm kiếm (Razor View)

Tạo Views/Home/Index.cshtml với một biểu mẫu tải xuống đơn giản và hộp tìm kiếm. /Home/SearchText, in văn bản OCR, và nhấn mạnh các trận đấu trong trình duyệt (không cần thay đổi máy chủ).

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

Điều này thực hiện thiết điểm thời gian thực trong khối văn bản được rút.Đưa ra các điểm nổi bật ** trên bản thân hình ảnh** sẽ yêu cầu OCR kết nối hộp và vẽ bề mặt (không được bao phủ bởi gạch).

Bước 6: chạy ứng dụng

dotnet run

Mở URL hiển thị trong console (ví dụ: https://localhost:5001).Tải một hình ảnh, nhập một từ khóa và nhấp vào Tải về & Tìm kiếm.

  • Keyword found! hoặc Keyword not found. (được tạo bởi server)
    • Tác phẩm * * với khách hàng <mark> Highlights

Bước 7: Sản xuất sẵn sàng xem xét (tùy chọn)

  • File validation: Kiểm tra các loại / mở rộng MIME và xem xét quét antivirus.
    • Giới hạn kích thước *: Sử dụng RequestSizeLimit (xem) và ngược proxy/web.config giới hạn nếu cần thiết.
  • Cleanup: Thỉnh thoảng xóa các tập tin cũ từ wwwroot/uploads.
  • Localization: Nếu bạn cần nhiều ngôn ngữ, hãy thiết lập các tùy chọn OCR từ trên server-side.
  • Error UX: Thay thế các cảnh báo bằng toasts; thêm bộ chuyển tải và thanh tiến bộ.

Troubleshooting

  • ** Kết quả OCR trống**: Cố gắng nhập chất lượng cao hơn, định hướng chính xác, hoặc định dạng khác nhau (PNG/TIFF).
  • CORS: Nếu front-end được tách biệt, bật CORS và sử dụng URL API đầy đủ.
  • HTTPS: Bảo đảm dev cert tin tưởng (dotnet dev-certs https --trustNếu trình duyệt chặn nội dung hỗn hợp.

More in this category