smartyellow/docx-js
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Amended images documentation

Browse Source
This commit is contained in:
Dolan Miu
2019-08-06 17:48:07 +01:00
parent b5503e7b9b
commit 0f1f398e6d
1 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
docs/usage/images.md
View File

@ -1,5 +1,7 @@
# Images # Images
!> Images requires an understanding of [Sections](usage/sections.md) and [Paragraphs](usage/paragraph.md).
To create a `floating` image on top of text: To create a `floating` image on top of text:
```ts ```ts
@ -18,14 +20,27 @@ Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
By default with no arguments, its an `inline` image: By default with no arguments, its an `inline` image:
```ts ```ts
Media.addImage(doc, fs.readFileSync("./demo/images/parrots.bmp")); const image = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
``` ```
You can also create images manually and add them later: Add it into the document by adding the image into a paragraph:
```ts ```ts
const image = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif")); doc.addSection({
doc.addImage(image); children: [new Paragraph(image)],
});
```
Or:
```ts
doc.addSection({
children: [
new Paragraph({
children: [image],
}),
],
});
``` ```
## Intro ## Intro
@ -34,7 +49,7 @@ Adding images can be done in two ways:
1. Call the `createImage` method to add the image directly into the `document`: 1. Call the `createImage` method to add the image directly into the `document`:
```js ```ts
Media.addImage(doc, [IMAGE_BUFFER], [WIDTH], [HEIGHT], [POSITION_OPTIONS]); Media.addImage(doc, [IMAGE_BUFFER], [WIDTH], [HEIGHT], [POSITION_OPTIONS]);
``` ```
@ -42,7 +57,9 @@ Adding images can be done in two ways:
```ts ```ts
const image = Media.addImage(doc, [IMAGE_BUFFER]); const image = Media.addImage(doc, [IMAGE_BUFFER]);
doc.addImage(image); doc.addSection({
children: [new Paragraph(image)],
});
``` ```
`docx` supports `jpeg`, `jpg`, `bmp`, `gif` and `png` `docx` supports `jpeg`, `jpg`, `bmp`, `gif` and `png`
@ -210,7 +227,7 @@ Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
Importing Images from file system path Importing Images from file system path
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo5.ts ':include') [Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo5.ts ":include")
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo5.ts_ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo5.ts_
@ -218,7 +235,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo5.ts_
Example showing how to add image to headers and footers Example showing how to add image to headers and footers
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo9.ts ':include') [Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo9.ts ":include")
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo9.ts_ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo9.ts_
@ -226,6 +243,6 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo9.ts_
Example showing how to float images on top of text and optimally give a `margin` Example showing how to float images on top of text and optimally give a `margin`
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo38.ts ':include') [Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo38.ts ":include")
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo38.ts_ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo38.ts_