Керування зображеннями HTML у C#

API .NET для керування зображеннями HTML

Aspose.HTML for .NET надає DOM та 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>, значки сайта та графічні кнопки використовують інші елементи або правила стилів і потребують окремої логіки вибору.
• 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 або виконати Install-Package Aspose.HTML у консолі диспетчера пакетів. Докладні інструкції наведено в посібнику зі встановлення . Щоб оцінити API без обмежень ознайомлювальної версії, запросіть тимчасову ліцензію .

Запитання про керування зображеннями HTML

1. Чи редагує Aspose.HTML пікселі у файлах PNG або JPEG?

Ні. Операції керування зображеннями змінюють елементи HTML, атрибути, стилі та пов’язані ресурси. Повторна дискретизація, обрізання, стиснення та редагування на рівні пікселів потребують окремого етапу обробки зображень.

2. Як визначаються відносні шляхи зображень під час обробки HTML?

Відносні значення src визначаються на основі базової адреси документа, яка зазвичай походить із розташування завантаженого файла або URL. Якщо HTML створюється з рядка або потоку, укажіть базовий URL для правильного визначення відносних шляхів ресурсів.

3. Вилучення зображень з HTML і конвертування HTML у зображення – це однакові операції?

Ні. Під час вилучення зберігаються ресурси, на які посилаються елементи або стилі, наприклад JPEG, використаний в елементі <img>. Конвертування HTML у зображення відтворює всю сторінку в новому растровому файлі.