ทำไมต้องดึงภาพจาก HTML? (ประโยชน์และกรณีการใช้งาน)

HTML ไฟล์มักจะรวมถึงหลายประเภทของภาพ เช่น: รูปภาพแท็กมาตรฐาน <img> รูปภาพอินไลน์ Base64 (data:image/...) รูปภาพที่กำหนดใน CSS (เช่น background-image) ไอคอนและกราฟิก SVG รูปภาพที่มีลิงก์ภายนอกหรือ แหล่งข้อมูลภาพที่ฝังอยู่ การดึงรูปภาพจากเอกสาร HTML เป็นประโยชน์สำหรับ:

  • การย้ายข้อมูล
  • การดึงสื่อจากอีเมล HTML
  • การดึงข้อมูลเว็บและวิเคราะห์
  • การเตรียมชุดข้อมูลการฝึกอบรมสำหรับการเรียนรู้ของเครื่อง
  • การแปลง HTML เป็น PDF/Word ในขณะที่ยังคงรักษาสื่อไว้
  • การเก็บข้อมูลหน้าเว็บพร้อมกับทรัพย์สินต้นฉบับ

HTML Processing API

GroupDocs.Parser Cloud SDK for .NET เป็น API ที่มีพื้นฐาน REST ที่แข็งแกร่งซึ่งสามารถประมวลผลไฟล์รูปแบบต่างๆ ที่ได้รับความนิยมทั้งหมดรวมถึงไฟล์ HTML มันช่วยให้คุณสามารถจัดการไฟล์ HTML และคุณสามารถใช้มันในการ:

  • ดำเนินการ解析เอกสาร HTML
  • ดึงภาพที่ฝังไว้และภาพในแนวข้อความ
  • สกัดรูปภาพที่เข้ารหัสด้วย Base64
  • ตรวจจับการอ้างอิงภาพภายนอก
  • ดึงข้อมูลเมตะดาต้า (ขนาด, ประเภท, เส้นทาง)
  • ดาวน์โหลดภาพที่ถูกแยกออกมาในเครื่องของคุณ
  • อัตโนมัติการประมวลผล HTML

รูปแบบภาพที่รองรับ

ข้อกำหนดเบื้องต้น

  • บัญชี GroupDocs Cloud (Client ID & Client Secret)
  • ติดตั้ง .NET 6.0+ แล้ว
  • Visual Studio หรือ IDE ที่เข้ากันได้
  • NuGet package: GroupDocs.Parser-Cloud

ติดตั้งผ่าน NuGet

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

ดึงภาพจาก HTML โดยใช้ C#

ด้านล่างเป็นตัวอย่าง C# เต็มรูปแบบที่สาธิตการดึงภาพ 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
  • ดึงข้อมูลเมตาสำหรับรูปภาพที่เชื่อมโยง
  • ดาวน์โหลดรูปภาพทั้งหมดโดยโปรแกรมmatically

ดังนั้น มันจึงเป็นวิธีแก้ปัญหาที่ดีที่สุดสำหรับการทำให้การดึงข้อมูลสื่อ HTML อัตโนมัติในแอปพลิเคชัน C#

บทความที่เกี่ยวข้อง

เราแนะนำอย่างยิ่งให้ไปเยี่ยมชมบทความต่อไปนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ:

คำถามที่พบบ่อย (FAQs)

  1. ฉันสามารถดึงภาพที่ฝังอยู่ในรูปแบบ Base64 จาก HTML ได้หรือไม่? ใช่, API จะทำการดึงรูปภาพแบบ Base64-encoded และ inline HTML โดยอัตโนมัติ.

  2. API ดึงรูปภาพที่เชื่อมโยงภายนอกหรือไม่? API จะดึงข้อมูลเมตาสำหรับภาพที่เชื่อมโยง; การดาวน์โหลดพวกเขาเป็นทางเลือก.

  3. ฉันสามารถดึงภาพที่อ้างอิงใน CSS ได้หรือไม่? ใช่ รูปภาพที่อ้างอิงผ่าน CSS แบบ inline หรือ embedded จะได้รับการสนับสนุน

  4. รูปแบบภาพใดบ้างที่ได้รับการสนับสนุน? JPG, PNG, BMP, GIF, TIFF และประเภทภาพทั่วไปอื่น ๆ

  5. มีการทดลองใช้ฟรีหรือไม่? ใช่ คุณสามารถสร้างบัญชีฟรีและได้รับการโทร API ฟรี 150 ครั้งต่อเดือน