Как изменить размер документа во время преобразования из HTML? – С#

В современном мире большинство документов имеют формат A4, но иногда содержимое, отображаемое из HTML, имеет другой размер. Это приводит к тому, что на странице остается много пустого пространства, или контент просто не помещается на странице! В этой статье мы рассмотрим, как использовать параметры рендеринга для изменения размера страниц документа под размер содержимого и наоборот.

Как изменить размер документа с помощью Aspose.HTML

Пространство имен Aspose.Html.Rendering предоставляет мощный набор инструментов, таких как низкоуровневые классы опций, интерфейсы, структуры и перечисления для рендеринга документов HTML, MHTML, EPUB и SVG в различные выходные форматы, такие как PDF, XPS, DOCX и изображения. Класс PageSize предоставляет способ указать ширину, высоту и ориентацию страниц при отображении HTML. документы в выходные форматы. Но иногда вам может понадобиться обрезать документы, чтобы создать меньший размер страницы, соответствующий размеру содержимого страницы. Это означает, что внешние поля, границы или пустое пространство будут удалены.

Класс PageSetup предоставляет набор свойств для управления настройками страницы для документов HTML при их отображении в различные форматы файлов. Давайте посмотрим на некоторые из наиболее часто используемых:

• Установить параметры страницы. Свойство AnyPage позволяет задать параметры страницы (размер, поля, ориентация и т. д.) для любой страницы HTML-документа, преобразованного в многостраничный формат, например PDF, XPS, DOCX, PNG, JPG и т. д.
• Изменить размер документа в соответствии с размером содержимого. Вы можете подогнать размер страницы под размер содержимого и наоборот, используя PageLayoutOptions. /pagesetup/pagelayoutoptions/). Это свойство представляет собой набор битовых флагов, управляющих поведением средства визуализации. Вы можете обрезать документы или масштабировать документы, чтобы их содержимое соответствовало размеру страницы.

Вы можете легко использовать примеры C# для преобразования HTML в изображения с пользовательским макетом страницы для преобразования HTML в PDF, XPS и DOCX. Отличия заключаются только в указании:

• соответствующих параметров рендеринга – ImageRenderingOption, PdfRenderingOption, XpsRenderingOption или DocRenderingOption;
• соответствующех устройств вывода – ImageDevice, PdfDevice, XpsDevice или DocDevice.

Конвертировать HTML в PNG с параметрами рендеринга по умолчанию

Чтобы преобразовать HTML в PNG с параметрами рендеринга по умолчанию, выполните несколько шагов:

1. Используйте один из конструкторов HTMLDocument() для инициализации экземпляра document. В следующих примерах мы загружаем локальный файл rendering.html.
2. Инициализируйте экземпляр класса ImageRenderingOption, если вы хотите преобразовать HTML в формат файла изображения. По умолчанию ImageFormat имеет формат PNG. Кроме того, обратите внимание, что по умолчанию свойства HorizontalResolution и VerticalResolution имеют разрешение 300 dpi. Таким образом, отрендеренное изображение будет растянуто по высоте и ширине примерно в 3 раза, так как разрешение исходного контента составляет 96 dpi.
3. Создайте новый экземпляр класса ImageDevice. Используйте конструктор ImageDevice(), который принимает options и путь к выходному файлу savePath как параметры.
4. Используйте метод RenderTo(device) для преобразования HTML в PNG, который принимает объект device в качестве параметр.

Далее фрагмент кода C# показывает пример преобразования HTML-документа в изображение без каких-либо дополнительных опций, т.е. с параметрами рендеринга по умолчанию. В результате конвертации получился документ формата PNG формата А4 с большим количеством пустого места (см. иллюстрации результатов конвертации (а).)

// Prepare path to a source HTML file
string documentPath = Path.Combine(DataDir, "rendering.html");

// Prepare path for converted file saving 
string savePath = Path.Combine(OutputDir, "a4.png");

// Create an instance of the HTMLDocument class
using var document = new HTMLDocument(documentPath);

// Initialize an ImageRenderingOptions object with default options
var opt = new ImageRenderingOptions();

// Create an output rendering device and convert HTML
using var device = new ImageDevice(opt, savePath);
document.RenderTo(device);

Параметры Рендеринга

PageLayoutOptions перечисление пространства имен Aspose.Html.Rendering указывает флаги, которые вместе с другими PageSetup, определяют размеры и макеты страниц. Эти флаги можно комбинировать вместе в соответствии с их описанием.

Name	Description
FitToContentWidth	This flag specifies that the width of pages is determined by the size of the content itself and not by the set page width. Instead, content width is calculated individually for each page.
UseWidestPage	When combined with FitToContentWidth, it specifies that the width of each page will be the same and equal to the widest content size of all pages.
FitToWidestContentWidth	This flag specifies that the width of each page will be the same and equal to the widest content size among all pages.
FitToContentHeight	This flag specifies that the page height is determined by the content’s size, not by the specified page height. If this flag is set, all document content will be placed on one page.
ScaleToPageWidth	This flag indicates that the document’s content will be scaled to fit the page. It collides with the FitToContentWidth flag, and if both flags are specified, only ScaleToPageWidth will take effect.
ScaleToPageHeight	This flag indicates that the document’s content will be scaled to fit the height of the first page. It collides with the FitToContentHeight flag, and if both flags are specified, only ScaleToPageHeight will take effect. All document content will be placed on a single page only.

Вы можете скачать полные примеры C# и файлы данных с GitHub.

Подогнать страницу по ширине при преобразовании HTML в JPG

Чтобы подогнать ширину страницы выходного изображения к ширине содержимого, вам нужно использовать флаг FitToContentWidth или флаг FitToWidestContentWidth, который будет подгонять ширину результирующего документа к ширине самой широкой страницы. Давайте рассмотрим шаги, которые вы должны выполнить:

1. Загрузите HTML-файл. В примере конструктор HTMLDocument(documentPath) загружает HTML-документ из локальной файловой системы.
2. Создайте экземпляр класса ImageRenderingOption. В этом примере мы устанавливаем для свойства PageLayoutOptions значение FitToWidestContentWidth, что означает, что ширина страницы выходного документа будет соответствовать ширине самой широкой страницы контента.
3. Создайте новый экземпляр класса ImageDevice и передайте его в RenderTo(device) для преобразования HTML в JPG.

    // Prepare path to a source HTML file
    string documentPath = Path.Combine(DataDir, "rendering.html");

    // Prepare path for converted file saving 
    string savePath = Path.Combine(OutputDir, "FitWidth.jpg");

    // Create an instance of HTMLDocument class
    using var document = new HTMLDocument(documentPath);

    // Initialize an ImageRenderingOptions object with custom options. Use the FitToWidestContentWidth flag
    var opt = new ImageRenderingOptions(ImageFormat.Jpeg)
    {
        PageSetup =
{
    PageLayoutOptions = PageLayoutOptions.FitToWidestContentWidth
}
    };

    // Create an output rendering device and convert HTML
    using var device = new ImageDevice(opt, savePath);
    document.RenderTo(device);

    

В результате преобразования HTML в JPG был получен документ JPG с шириной страницы, соответствующей ширине содержимого, но с высотой страницы, соответствующей высоте формата A4 (см. иллюстрации результатов преобразования (b)).

Обрезать HTML до размера PNG

Чтобы размер выходной страницы соответствовал высоте изображения в исходном файле, вы должны установить флаг FitToContentHeight в PageLayoutOptions. В следующем примере показано сочетание двух флагов: FitToContentHeight и FitToContentWidth.

// Prepare path to a source HTML file
string documentPath = Path.Combine(DataDir, "rendering.html");

// Prepare path for converted file saving 
string savePath = Path.Combine(OutputDir, "FitPage.png");

// Create an instance of the HTMLDocument class
using var document = new HTMLDocument(documentPath);

// Initialize an ImageRenderingOptions object with custom options. Use FitToContentWidth and FitToContentHeight flags
var opt = new ImageRenderingOptions()
{
    PageSetup =
    {
        PageLayoutOptions = PageLayoutOptions.FitToContentWidth | PageLayoutOptions.FitToContentHeight
    },
    HorizontalResolution=96,
    VerticalResolution=96
};

// Create an output rendering device and convert HTML
using var device = new ImageDevice(opt, savePath);
document.RenderTo(device);

Подгонка размера страницы к содержимому рендеринга HTML в JPG

В следующем примере свойство AnyPage задает размер страницы 20x20 пикселей, что недостаточно для соответствовать содержимому HTML-документа при преобразовании в изображение. Использование PageLayoutOptions с флагами FitToWidestContentWidth и FitToContentHeight приводит к тому, что страница увеличивается в размере, чтобы соответствовать содержимому.

1. Создайте экземпляр HTMLDocument. В следующих примерах мы загружаем локальный файл rendering.html.
2. Инициализируйте экземпляр класса ImageRenderingOption, если вы хотите преобразовать HTML в формат файла JPG.
   • Укажите ImageFormat как Jpeg.
   • Создайте объект PageSetup со свойством PageLayoutOptions с установленными флагами FitToWidestContentWidth и FitToContentHeight. Это гарантирует, что выходное изображение будет соответствовать ширине и высоте содержимого без пустого пространства.
3. Создайте новый экземпляр класса ImageDevice.
4. Используйте метод RenderTo(device) для преобразования HTML в JPG, который принимает объект device в качестве параметра.

// Prepare path to a source HTML file
string documentPath = Path.Combine(DataDir, "rendering.html");

// Prepare path for converted file saving 
string savePath = Path.Combine(OutputDir, "FitSmallPage.jpg");

// Initialize HTMLDocument
using var document = new HTMLDocument(documentPath);

// Initialize an ImageRenderingOptions object with custom options. Use FitToWidestContentWidth and FitToContentHeight flags
var opt = new ImageRenderingOptions(ImageFormat.Jpeg)
{
    PageSetup =
    {
        PageLayoutOptions = PageLayoutOptions.FitToWidestContentWidth | PageLayoutOptions.FitToContentHeight,
        AnyPage = new Page(new Size(20,20))
    }
};

// Create an output rendering device and convert HTML
using var device = new ImageDevice(opt, savePath);
document.RenderTo(device);

Несмотря на установку размера страницы 20x20 пикселей, флаги FitToWidestContentWidth и FitToContentHeight позволяют подогнать результирующий документ JPG к размеру страницы, соответствующему размеру содержимого (см. иллюстрацию результатов преобразования (d)).

Масштабировать размер страницы во время преобразования HTML в PNG

По аналогии с флагами FitTo*, управляющими размерами страниц, существует набор флагов ScaleTo*, управляющих размерами контента и позволяющих масштабировать его. Если размер контента превышает размер страницы, контент масштабируется с соотношением сторон до тех пор, пока он не уместится на странице по ширине и/или высоте, в зависимости от комбинации флагов. В следующем примере показано, как настроить масштабирование содержимого по ширине и высоте:

// Prepare path to a source HTML file
string documentPath = Path.Combine(DataDir, "rendering.html");

// Prepare path for converted file saving 
string savePath = Path.Combine(OutputDir, "ScaleSmallPage.png");

// Initialize an HTMLDocument object
using var document = new HTMLDocument(documentPath);

// Initialize an ImageRenderingOptions object and use ScaleToPageWidth and ScaleToPageHeight flags
var opt = new ImageRenderingOptions()
{
    PageSetup =
    {
        PageLayoutOptions = PageLayoutOptions.ScaleToPageWidth | PageLayoutOptions.ScaleToPageHeight,
        AnyPage = new Page(new Size(200,200))
    }
};

// Create an output rendering device and convert HTML
using var device = new ImageDevice(opt, savePath);
document.RenderTo(device);

В примере свойство AnyPage в PageSetup задает новую Page объект с размером 200x200 пикселей. Это устанавливает размер страницы 200x200 пикселей. Затем мы устанавливаем свойство PageLayoutOptions объекта PageSetup, чтобы включить ScaleToPageWidth и ScaleToPageHeight флаги. Это означает, что содержимое выходного документа будет масштабировано, чтобы соответствовать ширине и/или высоте страницы (см. иллюстрацию результатов преобразования (e).)

Изображения результатов преобразования с кадрированием и изменением размера

На рисунке показаны результаты преобразования файла rendering.html в форматы PNG, JPG и PDF с использованием метода RenderTo() и различных параметров рендеринга, управляющих размером страницы выходного документа.

Примечание. Размер исходного изображения в файле rendering.html – 404 x 303 с разрешением 96 dpi.

a) Результатом преобразования HTML в PNG с параметрами рендеринга по умолчанию является документ PNG формата A4 с большим количеством пустого места. Отрендеренное изображение на странице формата А4 растянуто по высоте и ширине примерно в 3 раза, так как разрешение по умолчанию составляет 300 dpi.

b) В результате преобразования HTML в JPG был получен документ JPG с шириной страницы, соответствующей ширине содержимого, но с высотой страницы, соответствующей высоте формата A4. Отрендеренное изображение на странице формата А4 растянуто по высоте и ширине примерно в 3 раза, так как разрешение по умолчанию составляет 300 dpi.

c) Результат преобразования HTML в PNG с обрезкой выходного документа, чтобы размер страницы соответствовал размеру содержимого.

d) Несмотря на то, что размер страницы был установлен 20x20 px, использование флагов FitToWidestContentWidth и FitToContentHeight позволило получить результирующий JPG-документ с размером страницы, соответствующим размеру содержимого.

e) Результат преобразования HTML в изображение, когда размер содержимого превышает размер страницы. Мы уменьшили содержимое, чтобы оно соответствовало размеру страницы 200x200 пикселей.

Вы можете скачать полные примеры C# и файлы данных с GitHub.

Aspose.HTML предлагает бесплатные онлайн Конвертеры для преобразования файлов HTML, XHTML, MHTML, EPUB, XML и Markdown в различные популярные форматы. Например, вы можете легко конвертировать HTML в PDF, HTML в JPG, HTML в XHTML, SVG в PDF, MHTML в PDF, MD в HTML и т. д. Просто выберите файл, выберите формат для преобразования, и все готово. Это быстро и совершенно бесплатно!

< /а>