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 requires an understanding of [Sections](usage/sections.md) and [Paragraphs](usage/paragraph.md).
To create a `floating` image on top of text:
```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:
```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
const image = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
doc.addImage(image);
doc.addSection({
children: [new Paragraph(image)],
});
```
Or:
```ts
doc.addSection({
children: [
new Paragraph({
children: [image],
}),
],
});
```
## 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`:
```js
```ts
Media.addImage(doc, [IMAGE_BUFFER], [WIDTH], [HEIGHT], [POSITION_OPTIONS]);
```
@ -42,7 +57,9 @@ Adding images can be done in two ways:
```ts
const image = Media.addImage(doc, [IMAGE_BUFFER]);
doc.addImage(image);
doc.addSection({
children: [new Paragraph(image)],
});
```
`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
[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_
@ -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](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_
@ -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](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_