Чому витягувати зображення з HTML? (Переваги та випадки використання)

HTML файли часто містять кілька типів зображень, таких як: стандартні зображення тегу <img>, вбудовані зображення Base64 (data:image/...), зображення, визначені в CSS (наприклад, background-image), SVG значки та графіка, зовнішні зображення або вбудовані ресурси зображень. Витягування зображень з HTML-документів корисне для:

  • Переміщення контенту
  • Витягування медіа з HTML електронних листів
  • Веб-сканування та аналіз
  • Підготовка навчальних наборів даних для машинного навчання
  • Перетворення HTML в PDF/Word з збереженням медіа
  • Архівування веб-сторінок із оригінальними активами

HTML Processing API

GroupDocs.Parser Cloud SDK for .NET є потужним REST API, здатним обробляти всі популярні формати файлів, включаючи HTML файли. Він дозволяє вам маніпулювати HTML файлами, і ви можете використовувати його для:

  • Parse HTML documents
  • Витягти вбудовані та контурні зображення
  • Видобути зображення, закодовані у Base64
  • Виявити зовнішні посилання на зображення
  • Отримати метадані (розмір, тип, шлях)
  • Завантажити витягнуті зображення локально
  • Автоматизуйте процеси парсингу HTML

Підтримувані формати зображень

Передумови

  • Акаунт GroupDocs Cloud (Клієнтський ID та Клієнтський секрет).
  • .NET 6.0+ встановлено.
  • Visual Studio або сумісна IDE.
  • NuGet пакет: GroupDocs.Parser-Cloud

Встановіть через NuGet

dotnet add package GroupDocs.Parser-Cloud --version 25.7.0

Витягти зображення з HTML, використовуючи C#

Нижче наведено повний приклад C#, який демонструє extraction HTML зображень за допомогою Cloud API.

Крок 1 — Ініціалізуйте API:

var config = new Configuration("YOUR_CLIENT_ID", "YOUR_CLIENT_SECRET");
var parserApi = new ParserApi(config);
var fileApi = new FileApi(config);

Крок 2 — Надайте інформацію про HTML файл для парсингу:

var fileInfo = new FileInfo { FilePath = "input.html" };
var options = new ImagesOptions { FileInfo = fileInfo };
var request = new ImagesRequest(options);

Крок 3 — Витягування зображень з HTML (вбудовані, інлайн та Base64):

var response = parserApi.Images(request);

foreach (var image in response.Images)
{
    Console.WriteLine($"Source: {image.Path}, Type: {image.MediaType}, Size: {image.Size}");
}

Крок 4 — Завантажити витягнуті зображення (сумісні з macOS і Windows):

var outputDirectory = "/Users/nayyer/Downloads/html-images";
Directory.CreateDirectory(outputDirectory);

foreach (var img in response.Images)
{
    var cloudImagePath = img.Path.Replace("\\", "/");

    var downloadRequest = new DownloadFileRequest(path: cloudImagePath);
    using (var stream = fileApi.DownloadFile(downloadRequest))
    {
        var localPath = Path.Combine(outputDirectory, Path.GetFileName(cloudImagePath));

        using (var fileStream = File.Create(localPath))
        {
            stream.CopyTo(fileStream);
        }

        Console.WriteLine($"Downloaded: {localPath}");
    }
}

// Для отримання додаткових прикладів, будь ласка, відвідайте https://github.com/groupdocs-parser-cloud/groupdocs-parser-cloud-dotnet

var configuration = new Configuration("XXXXXXX-XXXXXXX-XXXXXX-XXXXXX", "XXXXXXXXXXXX");
configuration.ApiBaseUrl = "https://api.groupdocs.cloud";

var parserApi = new ParserApi(config);
var fileApi = new FileApi(config);

var fileInfo = new FileInfo { FilePath = "input.html" };
var options = new ImagesOptions { FileInfo = fileInfo };
var request = new ImagesRequest(options);

var response = parserApi.Images(request);

foreach (var image in response.Images)
{
    Console.WriteLine($"Source: {image.Path}, Type: {image.MediaType}, Size: {image.Size}");
}

var outputDirectory = "/Users/nayyer/Downloads/html-images";
Directory.CreateDirectory(outputDirectory);

foreach (var img in response.Images)
{
    var cloudImagePath = img.Path.Replace("\\", "/");

    var downloadRequest = new DownloadFileRequest(path: cloudImagePath);
    using (var stream = fileApi.DownloadFile(downloadRequest))
    {
        var localPath = Path.Combine(outputDirectory, Path.GetFileName(cloudImagePath));

        using (var fileStream = File.Create(localPath))
        {
            stream.CopyTo(fileStream);
        }

        Console.WriteLine($"Downloaded: {localPath}");
    }
}

Завантажте зображення HTML за допомогою cURL

Окрім фрагменту коду C#, ми також можемо використовувати команди cURL для завантаження зображень з HTML файлів.

Крок 1 — Згенерувати маркер доступу: Перший крок у цьому підході – створити JWT токен доступу на основі облікових даних клієнта.

curl -v -X POST "https://api.groupdocs.cloud/connect/token" \
-d "grant_type=client_credentials&client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET" \
-H "Content-Type: application/x-www-form-urlencoded"

*Step 2 — Extract Images:

curl -v -X POST "https://api.groupdocs.cloud/v1.0/parser/images" \
-H  "accept: application/json" \
-H  "authorization: Bearer {ACCESS_TOKEN}" \
-H  "Content-Type: application/json" \
-d "{ "FileInfo": { "FilePath": "inbox/input.html", "StorageName": "internal" }, "OutputPath": "extracted-images"}"

Спробуйте Безкоштовний Онлайн Витягувач Зображень HTML

Ми пропонуємо безкоштовний онлайн Online HTML Image Extractor, розроблений на базі GroupDocs.Parser Cloud API. Ніяка установка програмного забезпечення або завантаження не потрібні, і ви можете оцінити можливості REST API в веб-браузері.

extract html images

Висновок

В цій статті ми навчилися найточнішому способу витягування зображень з HTML за допомогою .NET REST API. Завдяки цьому API ви можете:

  • Видалити вбудовані та вбудовані зображення
  • Розпарсити зображення у кодуванні Base64
  • Витягніть фонові зображення CSS
  • Отримати метадані для пов’язаних зображень
  • Завантажте всі зображення програмно

Отже, це найкраще рішення для автоматизації витягування медіа з HTML у програмах C#.

Пов’язані статті

Ми настійно рекомендуємо відвідати наступні статті, щоб дізнатися більше про:

Часто задавані питання (ЧЗП)

  1. Чи можу я витягнути зображення, вбудовані в Base64, з HTML? Так, API автоматично витягує зображення у форматі Base64 та вбудовані HTML-зображення.

  2. Чи витягує API зображення, що посилаються на зовнішні ресурси? API витягує метадані для зв’язаних зображень; їх завантаження є добровільним.

  3. Чи можу я витягнути зображення, на які посилається CSS? Так, зображення, що посилаються через вбудований або вбудований CSS, підтримуються.

  4. Які формати зображень підтримуються? JPG, PNG, BMP, GIF, TIFF та інші поширені типи зображень.

  5. Чи є безкоштовний пробний період? Так. Ви можете створити безкоштовний обліковий запис і отримати 150 безкоштовних API викликів щомісяця.