จัดการรูปภาพใน HTML ด้วย C#

API .NET สำหรับจัดการรูปภาพ HTML

Aspose.HTML for .NET มี DOM API และ API ทรัพยากรสำหรับทำงานกับรูปภาพที่เอกสาร HTML อ้างอิง แอปพลิเคชัน C# สามารถสร้างหรือแก้ไข HTMLImageElement ค้นหาองค์ประกอบรูปภาพด้วยตัวเลือก CSS ลบออกจาก DOM แก้ไขตำแหน่งทรัพยากรที่อ้างอิง และบันทึก HTML ที่เปลี่ยนแปลงแล้ว

เลือกงานจัดการรูปภาพ HTML

• เพิ่มรูปภาพลงใน HTML . สร้างองค์ประกอบ <img> กำหนดแหล่งที่มา ข้อความทดแทน ขนาด และแอตทริบิวต์สมัยใหม่ที่ต้องการ แล้วแทรกในตำแหน่ง DOM ที่กำหนด
• แยกรูปภาพจาก HTML . ค้นหาการอ้างอิงรูปภาพ แปลง URL แบบสัมพัทธ์ตามที่อยู่ฐานของเอกสาร และบันทึกทรัพยากรในเครื่อง ระยะไกล หรือแบบฝังที่รองรับ
• ลบรูปภาพออกจาก HTML . ลบองค์ประกอบ <img> ที่เลือกออกจาก DOM และแยกการลบมาร์กอัปออกจากการลบไฟล์รูปภาพจริงหรือทรัพยากรพื้นหลัง CSS
• ปรับขนาดรูปภาพใน HTML . กำหนดขนาดภายในและ CSS แบบตอบสนองให้รูปภาพที่แสดงโดยไม่รีแซมเปิลไฟล์ต้นฉบับที่อ้างอิง

แก้ไขรูปภาพ HTML ที่มีอยู่ด้วย C#

ตัวอย่างนี้โหลดไฟล์ HTML เลือกรูปภาพที่มีอยู่ด้วย ID เปลี่ยนทรัพยากรที่อ้างอิงและข้อความทดแทน กำหนดขนาดภายใน แล้วบันทึกเอกสารที่แก้ไข ไฟล์รูปภาพต้องยังคงเข้าถึงได้จากพาธที่กำหนดให้ Src

using Aspose.Html;

// Load the source HTML file
using HTMLDocument document = new HTMLDocument("input.html");

// Select and update the existing image element
HTMLImageElement image =  document.QuerySelector("#product-image") as HTMLImageElement;

if (image != null)
{
    image.Src = "images/updated-product.webp";
    image.Alt = "Updated product shown from the front";
    image.SetAttribute("width", "960");
    image.SetAttribute("height", "640");
}

// Save the modified HTML document
document.Save("output.html");

ขั้นตอนหลักสำหรับจัดการรูปภาพใน HTML

1. โหลดไฟล์ต้นฉบับ URL สตริง หรือสตรีมด้วยตัวสร้าง HTMLDocument และระบุที่อยู่ฐานที่ถูกต้องเมื่อต้องแก้ไขตำแหน่งทรัพยากรแบบสัมพัทธ์
2. ค้นหารูปภาพหนึ่งรายการด้วย QuerySelector() หรือรวบรวมหลายรายการที่ตรงกันด้วย QuerySelectorAll()
3. สร้าง แก้ไข ลบ หรือตรวจสอบองค์ประกอบรูปภาพที่เลือกตามงานที่ต้องการ
4. จัดการทรัพยากรรูปภาพที่อ้างอิงแยกต่างหากเมื่อต้องคัดลอก ดาวน์โหลด ฝัง ปรับให้เหมาะสม หรือลบไฟล์
5. เรียก Save() เพื่อเขียนการเปลี่ยนแปลงมาร์กอัป หรือดำเนินการแปลงต่อเมื่อต้องเรนเดอร์ HTML เป็น PDF หรือรูปแบบรูปภาพ

องค์ประกอบ แหล่งที่มา และทรัพยากรรูปภาพ HTML

• แอตทริบิวต์รูปภาพ. อ่านหรือแก้ไข src, alt, width, height, loading, decoding, srcset, sizes และแอตทริบิวต์อื่นที่มาร์กอัปเป้าหมายรองรับ
• ตำแหน่งใน DOM. เพิ่มรูปภาพในส่วนเนื้อหาของเอกสารหรือคอนเทนเนอร์ที่เลือก ย้ายไปยังโหนดแม่อื่น แทนที่ หรือลบออกจากโครงสร้างเอกสาร
• ตำแหน่งทรัพยากร. ทำงานกับพาธสัมพัทธ์ URL แบบ HTTP หรือ HTTPS สัมบูรณ์ URL ของไฟล์ และ URI ข้อมูลแบบฝัง โดยคำนึงถึงที่อยู่ฐานของเอกสาร
• การเลือกองค์ประกอบ. ใช้ ID คลาส ตัวเลือกแอตทริบิวต์ ตัวเลือกเชิงโครงสร้าง XPath หรือการนำทาง DOM เพื่อกำหนดเป้าหมายรูปภาพหนึ่งรายการหรือคอลเลกชันรูปภาพ
• ขนาดที่แสดง. ใช้ค่า width และ height ภายในร่วมกับ CSS เพื่อสร้างเลย์เอาต์แบบคงที่หรือแบบตอบสนอง
• รูปภาพที่ไม่ใช่องค์ประกอบ img. รูปภาพพื้นหลัง CSS เนื้อหา SVG แหล่งที่มา <picture> favicon และอินพุตรูปภาพใช้องค์ประกอบหรือกฎสไตล์ต่างกัน จึงต้องใช้ตรรกะการเลือกแยกต่างหาก
• API เอาต์พุต. ส่งเอกสารที่เตรียมไว้ไปยังกระบวนการแปลงเมื่อต้องบันทึกทั้งหน้าที่เรนเดอร์เป็น PNG, JPEG, TIFF หรือรูปแบบอื่นที่รองรับ

เอกสารรูปภาพ HTML และข้อมูลอ้างอิง API

อ่าน How to Add Image to HTML สำหรับตัวอย่างองค์ประกอบ <img> ข้อมูลแบบฝัง และรูปภาพพื้นหลัง CSS ส่วน Working with HTML Documents อธิบายการโหลด แก้ไข บันทึก และจัดการทรัพยากรของเอกสาร ใช้ข้อมูลอ้างอิง HTMLImageElement สำหรับพร็อพเพอร์ตีรูปภาพและเมธอด DOM ที่สืบทอดมา

ติดตั้ง Aspose.HTML for .NET

ติดตั้ง Aspose.HTML for .NET จาก NuGet ด้วย .NET CLI:

dotnet add package Aspose.HTML

คุณยังสามารถใช้หน้าต่าง NuGet Package Manager หรือเรียกใช้ Install-Package Aspose.HTML ใน Package Manager Console ได้ ดูรายละเอียดการตั้งค่าใน คู่มือการติดตั้ง หรือขอ ใบอนุญาตชั่วคราว เพื่อประเมิน API โดยไม่มีข้อจำกัดของเวอร์ชันทดลอง

คำถามที่พบบ่อยเกี่ยวกับการจัดการรูปภาพ HTML

1. Aspose.HTML แก้ไขพิกเซลในไฟล์ PNG หรือ JPEG ได้หรือไม่?

ไม่ได้ งานจัดการรูปภาพจะแก้ไของค์ประกอบ HTML แอตทริบิวต์ สไตล์ และทรัพยากรที่อ้างอิง การรีแซมเปิล การครอบตัด การบีบอัด และการแก้ไขระดับพิกเซลต้องใช้ขั้นตอนประมวลผลรูปภาพแยกต่างหาก

2. พาธรูปภาพแบบสัมพัทธ์ได้รับการแก้ไขอย่างไรเมื่อประมวลผล HTML?

ค่า src แบบสัมพัทธ์จะได้รับการแก้ไขตามที่อยู่ฐานของเอกสาร ซึ่งโดยทั่วไปมาจากตำแหน่งไฟล์หรือ URL ที่โหลด เมื่อสร้าง HTML จากสตริงหรือสตรีม ให้ระบุ URL ฐานเพื่อให้แอปพลิเคชันแก้ไขพาธทรัพยากรแบบสัมพัทธ์ได้อย่างถูกต้อง

3. การแยกรูปภาพจาก HTML เหมือนกับการแปลง HTML เป็นรูปภาพหรือไม่?

ไม่เหมือนกัน การแยกจะบันทึกทรัพยากรที่องค์ประกอบหรือสไตล์อ้างอิง เช่น JPEG ที่ใช้ในองค์ประกอบ <img> ส่วน การแปลง HTML เป็นรูปภาพ จะเรนเดอร์เลย์เอาต์ทั้งหน้าเป็นเอาต์พุตราสเตอร์ใหม่