HTMLから画像を抽出する理由は何ですか?(利点とユースケース)

HTML ファイルには、次のようなさまざまな種類の画像が含まれることがよくあります。標準の <img> タグ画像、Base64 インライン画像(data:image/...)、CSS で定義された画像(例:background-image)、SVG アイコンやグラフィックス、外部リンクされた画像、または埋め込まれた画像リソースです。HTML ドキュメントから画像を抽出することは、次の目的に役立ちます。

  • コンテンツ移行
  • HTMLメールからメディアを抽出すること
  • ウェブスクレイピングと分析
  • 機械学習のトレーニングデータセットを準備する
  • HTMLをPDF/Wordに変換し、メディアを保持する
  • オリジナルアセットを持つウェブページのアーカイブ

HTML 処理 API

GroupDocs.Parser Cloud SDK for .NET は、HTMLファイルを含むすべての一般的なファイル形式を処理できる堅牢なRESTベースのAPIです。これを使用してHTMLファイルを操作でき、以下のことができます:

  • HTML文書を解析する
  • 埋め込まれた画像とインライン画像を抽出する
  • Base64エンコードされた画像を抽出する
  • 外部画像参照を検出する
  • メタデータを取得する(サイズ、タイプ、パス)
  • ローカルに抽出された画像をダウンロードする
  • HTMLパースワークフローの自動化

サポートされている画像フォーマット

前提条件

  • A 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#を使用して画像を抽出する

以下は、Cloud APIを使用したHTML画像抽出を示す完全なC#の例です。

ステップ 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 画像抽出ツールを試す

私たちは、GroupDocs.Parser Cloud APIの上に開発された無料のオンライン Online HTML Image Extractor を提供しています。ソフトウェアのインストールやダウンロードは不要で、ウェブブラウザ内でREST APIの機能を評価できます。

extract html images

結論

この記事では、.NET REST APIを使用してHTMLから画像を抽出する最も正確な方法を学びました。このAPIの助けを借りて、次のことができます:

  • 埋め込まれた画像とインライン画像を抽出する
  • Base64でエンコードされた画像を解析する
  • CSSの背景画像を抽出する
  • リンクされた画像のメタデータを取得する
  • すべての画像をプログラムでダウンロードする

したがって、C# アプリケーションでの HTML メディア抽出を自動化するための最良のソリューションです。

関連する記事

以下の記事を訪れて、次のことについて詳しく学ぶことを強くお勧めします:

よくある質問 (FAQs)

  1. HTML から Base64 埋め込み画像を抽出できますか? はい、APIはBase64エンコードされたインラインHTML画像を自動的に抽出します。

  2. APIは外部リンクされた画像を抽出しますか? APIはリンクされた画像のメタデータを抽出します; それらをダウンロードするのはオプションです。

  3. CSSで参照されている画像を抽出できますか? はい、インラインまたは埋め込みCSSを通じて参照された画像はサポートされています。

  4. サポートされている画像フォーマットは何ですか? JPG, PNG, BMP, GIF, TIFF、およびその他の一般的な画像タイプ。

  5. 無料トライアルはありますか? はい。無料アカウントを作成すると、毎月150回の無料APIコールを受け取ることができます。