- ทำไมต้องดึงภาพจาก HTML? (ประโยชน์ & กรณีการใช้งาน)
- API การประมวลผล HTML
- ดึงภาพจาก HTML โดยใช้ C#
- ดาวน์โหลดรูปภาพ HTML โดยใช้ cURL
- ลองใช้งานฟรี เครื่องมือดึงภาพ HTML ออนไลน์
ทำไมต้องดึงภาพจาก 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 ภายในเว็บเบราว์เซอร์ได้

บทสรุป
ในบทความนี้ เราได้เรียนรู้วิธีที่แม่นยำที่สุดในการดึงภาพจาก HTML โดยใช้ .NET REST API ด้วยความช่วยเหลือของ API นี้ คุณสามารถ:
- ดึงภาพที่ฝังและภาพแนวตั้ง
- แยกภาพที่เข้ารหัสด้วย Base64
- แยกภาพพื้นหลัง CSS
- ดึงข้อมูลเมตาสำหรับรูปภาพที่เชื่อมโยง
- ดาวน์โหลดรูปภาพทั้งหมดโดยโปรแกรมmatically
ดังนั้น มันจึงเป็นวิธีแก้ปัญหาที่ดีที่สุดสำหรับการทำให้การดึงข้อมูลสื่อ HTML อัตโนมัติในแอปพลิเคชัน C#
บทความที่เกี่ยวข้อง
เราแนะนำอย่างยิ่งให้ไปเยี่ยมชมบทความต่อไปนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ:
- Extract Text from XML in C#
- เพิ่มลายน้ำรูปภาพลงใน Word ใน C#
- ExExtract Images from PowerPoint in C# .NET
คำถามที่พบบ่อย (FAQs)
ฉันสามารถดึงภาพที่ฝังอยู่ในรูปแบบ Base64 จาก HTML ได้หรือไม่? ใช่, API จะทำการดึงรูปภาพแบบ Base64-encoded และ inline HTML โดยอัตโนมัติ.
API ดึงรูปภาพที่เชื่อมโยงภายนอกหรือไม่? API จะดึงข้อมูลเมตาสำหรับภาพที่เชื่อมโยง; การดาวน์โหลดพวกเขาเป็นทางเลือก.
ฉันสามารถดึงภาพที่อ้างอิงใน CSS ได้หรือไม่? ใช่ รูปภาพที่อ้างอิงผ่าน CSS แบบ inline หรือ embedded จะได้รับการสนับสนุน
รูปแบบภาพใดบ้างที่ได้รับการสนับสนุน? JPG, PNG, BMP, GIF, TIFF และประเภทภาพทั่วไปอื่น ๆ
มีการทดลองใช้ฟรีหรือไม่? ใช่ คุณสามารถสร้างบัญชีฟรีและได้รับการโทร API ฟรี 150 ครั้งต่อเดือน
