Mengapa Mengekstrak Gambar dari HTML? (Manfaat & Kasus Penggunaan)

HTML file sering menyertakan beberapa jenis gambar, seperti: Gambar tag <img> standar, gambar inline Base64 (data:image/...), gambar yang didefinisikan dalam CSS (misalnya, background-image), SVG ikon dan grafik, gambar yang ditautkan secara eksternal atau, sumber gambar tersemat. Mengekstrak gambar dari dokumen HTML berguna untuk:

  • Migrasi konten
  • Menarik media dari email HTML
  • Web scraping dan analisis
  • Mempersiapkan dataset pelatihan untuk pembelajaran mesin
  • Mengonversi HTML menjadi PDF/Word sambil mempertahankan media
  • Mengarsipkan halaman web dengan aset asli

HTML Processing API

GroupDocs.Parser Cloud SDK for .NET adalah API berbasis REST yang kuat yang mampu memproses semua format file populer termasuk file HTML. Ini memungkinkan Anda untuk memanipulasi file HTML dan Anda dapat menggunakannya untuk:

  • Parse dokumen HTML
  • Ekstrak gambar yang terbenam dan gambar inline
  • Ekstrak gambar yang dikodekan dalam Base64
  • Deteksi referensi gambar eksternal
  • Ambil metadata (ukuran, tipe, path)
  • Unduh gambar yang diekstrak secara lokal
  • Automatiskan alur kerja pemrosesan HTML

Format Gambar yang Didukung

Persyaratan Sebelum Memulai

  • Akun GroupDocs Cloud (Client ID & Client Secret).
  • .NET 6.0+ terinstal.
  • Visual Studio atau IDE yang kompatibel.
  • Paket NuGet: GroupDocs.Parser-Cloud

Install melalui NuGet

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

Ekstrak Gambar dari HTML menggunakan C#

Berikut adalah contoh C# lengkap yang menunjukkan ekstraksi gambar HTML menggunakan Cloud API.

Langkah 1 — Inisialisasi API:

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

Langkah 2 — Berikan Informasi File HTML untuk Parsing:

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

Langkah 3 — Ekstrak Gambar dari HTML (Tertanam, Inline & Base64):

var response = parserApi.Images(request);

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

Langkah 4 — Unduh Gambar yang Diekstrak (Kompatibel dengan 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}");
    }
}

// Untuk contoh lebih lanjut, silakan kunjungi 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}");
    }
}

Download HTML Images using cURL

Selain cuplikan kode C#, kita juga dapat menggunakan perintah cURL untuk mengunduh gambar dari file HTML.

Langkah 1 — Hasilkan Token Akses: Langkah pertama dalam pendekatan ini adalah menghasilkan token akses JWT berdasarkan kredensial klien.

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"}"

Coba Pengambil Gambar HTML Online Gratis

Kami menawarkan Online HTML Image Extractor gratis yang dikembangkan di atas GroupDocs.Parser Cloud API. Tidak perlu instalasi atau unduhan perangkat lunak dan evaluasi kemampuan REST API dalam peramban web.

extract html images

Kesimpulan

Dalam artikel ini, kita telah mempelajari cara yang paling akurat untuk mengekstrak gambar dari HTML menggunakan .NET REST API. Dengan bantuan API ini, Anda dapat:

  • Ekstrak gambar yang tertanam dan gambar inline
  • Menganalisis gambar yang dikodekan dalam Base64
  • Ekstrak gambar latar CSS
  • Ambil metadata untuk gambar yang terhubung
  • Unduh semua gambar secara programatik.

Oleh karena itu, ini adalah solusi terbaik untuk mengotomatiskan ekstraksi media HTML dalam aplikasi C#.

Artikel Terkait

Kami sangat merekomendasikan untuk mengunjungi artikel berikut untuk mempelajari lebih lanjut tentang:

Frequently Asked Questions (FAQs)

  1. Bisakah saya mengekstrak gambar embedded Base64 dari HTML? Ya, API secara otomatis mengekstrak gambar HTML inline dan yang terkodekan Base64.

  2. Apakah API mengekstrak gambar yang ditautkan secara eksternal? API mengekstrak metadata untuk gambar yang terhubung; mengunduhnya adalah opsional.

  3. Dapatkah saya mengekstrak gambar yang dirujuk dalam CSS? Ya, gambar yang dirujuk melalui CSS inline atau embedded didukung.

  4. Format gambar apa yang didukung? JPG, PNG, BMP, GIF, TIFF, dan jenis gambar umum lainnya.

  5. Apakah ada percobaan gratis? Ya. Anda dapat membuat akun gratis dan mendapatkan 150 panggilan API bulanan gratis.