Images

!> Images requires an understanding of Sections and Paragraphs.

To create a floating image on top of text:

Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
    floating: {
        horizontalPosition: {
            offset: 1014400,
        },
        verticalPosition: {
            offset: 1014400,
        },
    },
});

By default with no arguments, its an inline image:

const image = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));

Add it into the document by adding the image into a paragraph:

doc.addSection({
    children: [new Paragraph(image)],
});

Or:

doc.addSection({
    children: [
        new Paragraph({
            children: [image],
        }),
    ],
});

Intro

Adding images can be done in two ways:

Call the createImage method to add the image directly into the document:

Media.addImage(doc, [IMAGE_BUFFER], [WIDTH], [HEIGHT], [POSITION_OPTIONS]);

Create an image first, then add it into the document:

const image = Media.addImage(doc, [IMAGE_BUFFER]);
doc.addSection({
    children: [new Paragraph(image)],
});

docx supports jpeg, jpg, bmp, gif and png

Positioning

Positioning is the method on how to place the image on the document

Three types of image positioning is supported:

Floating
Inline

By default, picture are exported as Inline elements.

Usage

Pass options into the [POSITION_OPTIONS] metioned in the Intro above.

Floating

To change the position the image to be on top of the text, simply add the floating property to the last argument. By default, the offsets are relative to the top left corner of the page. Offset units are in emus:

const imageData = document.createImage(buffer, 903, 1149, {
    floating: {
        horizontalPosition: {
            offset: 1014400, // relative: HorizontalPositionRelativeFrom.PAGE by default
        },
        verticalPosition: {
            offset: 1014400, // relative: VerticalPositionRelativeFrom.PAGE by default
        },
    },
});

const imageData = document.createImage(buffer, 903, 1149, {
    floating: {
        horizontalPosition: {
            relative: HorizontalPositionRelativeFrom.RIGHT_MARGIN,
            offset: 1014400,
        },
        verticalPosition: {
            relative: VerticalPositionRelativeFrom.BOTTOM_MARGIN,
            offset: 1014400,
        },
    },
});

Options

Full options you can pass into floating are:

Property	Type	Notes
horizontalPosition	`HorizontalPositionOptions`	Required
verticalPosition	`VerticalPositionOptions`	Required
allowOverlap	`boolean`	Optional
lockAnchor	`boolean`	Optional
behindDocument	`boolean`	Optional
layoutInCell	`boolean`	Optional

HorizontalPositionOptions are:

Property	Type	Notes	Possible Values
relative	`HorizontalPositionRelativeFrom`	Required	`CHARACTER`, `COLUMN`, `INSIDE_MARGIN`, `LEFT_MARGIN`, `MARGIN`, `OUTSIDE_MARGIN`, `PAGE`, `RIGHT_MARGIN`
align	`HorizontalPositionAlign`	You can either have `align` or `offset`, not both	`CENTER`, `INSIDE`, `LEFT`, `OUTSIDE`, `RIGHT`
offset	`number`	You can either have `align` or `offset`, not both	`0` to `Infinity`

VerticalPositionOptions are:

Property	Type	Notes	Possible Values
relative	`VerticalPositionRelativeFrom`	Required	`BOTTOM_MARGIN`, `INSIDE_MARGIN`, `LINE`, `MARGIN`, `OUTSIDE_MARGIN`, `PAGE`, `PARAGRAPH`, `TOP_MARGIN`
align	`VerticalPositionAlign`	You can either have `align` or `offset`, not both	`BOTTOM`, `CENTER`, `INSIDE`, `OUTSIDE`, `TOP`
offset	`number`	You can either have `align` or `offset`, not both	`0` to `Infinity`

Wrap text

Wrapping only works for floating elements. Text will "wrap" around the floating image.

Add wrap options inside the floating options:

wrap: {
    type: [TextWrappingType],
    side: [TextWrappingSide],
},

For example:

Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
    floating: {
        horizontalPosition: {
            offset: 2014400,
        },
        verticalPosition: {
            offset: 2014400,
        },
        wrap: {
            type: TextWrappingType.SQUARE,
            side: TextWrappingSide.BOTH_SIDES,
        },
    },
});

Wrap options have the following properties are:

Property	Type	Notes	Possible Values
type	`TextWrappingType`	Optional	`NONE`, `SQUARE`, `TIGHT`, `TOP_AND_BOTTOM`
side	`TextWrappingSide`	Optional	`BOTH_SIDES`, `LEFT`, `RIGHT`, `LARGEST`

Margins

Margins give some space between the text and the image. Margins only work for floating elements. Additionally, the image must also be in wrap mode (see above).

?> Be sure to also set wrap in your options!

To use, add the margins options inside the floating options:

margins: {
    top: number,
    bottom: number,
    left: number,
    right: number
},

For example:

Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
    floating: {
        horizontalPosition: {
            offset: 2014400,
        },
        verticalPosition: {
            offset: 2014400,
        },
        wrap: {
            type: TextWrappingType.SQUARE,
            side: TextWrappingSide.BOTH_SIDES,
        },
        margins: {
            top: 201440,
            bottom: 201440,
        },
    },
});