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

Merge pull request #822 from dolanmiu/feat/rotating-images

Browse Source 
#815 Rotation and flipping images
This commit is contained in:
Dolan
2021-03-15 02:56:08 +00:00
committed by GitHub
parent a3febae8a3 bd40b11ce4
commit 40b3bc0b90
33 changed files with 615 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.nycrc
View File

@ -1,9 +1,9 @@
{
"check-coverage": true,
"lines": 98.67,
"functions": 97.08,
"branches": 95.6,
"statements": 98.68,
"lines": 98.79,
"functions": 97.54,
"branches": 95.64,
"statements": 98.8,
"include": [
"src/**/*.ts"
],

27
demo/11-declaritive-styles-2.ts
View File

@ -126,7 +126,14 @@ const doc = new Document({
},
});
const image = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
const table = new Table({
rows: [
@ -161,8 +168,22 @@ const table = new Table({
],
});
const image1 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
const image2 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
const image1 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
const image2 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
doc.addSection({
properties: {

36
demo/12-scaling-images.ts
View File

@ -5,10 +5,38 @@ import { Document, Media, Packer, Paragraph } from "../build";
const doc = new Document();
const image = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 50, 50);
const image2 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 100, 100);
const image3 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 250, 250);
const image4 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 400, 400);
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 50,
height: 50,
},
});
const image2 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
const image3 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 250,
height: 250,
},
});
const image4 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 400,
height: 400,
},
});
doc.addSection({
children: [new Paragraph("Hello World"), new Paragraph(image), new Paragraph(image2), new Paragraph(image3), new Paragraph(image4)],

9
demo/18-image-from-buffer.ts
View File

@ -7,7 +7,14 @@ const doc = new Document();
const imageBase64Data = `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`;
const image = Media.addImage(doc, Buffer.from(imageBase64Data, "base64"), 100, 100);
const image = Media.addImage({
document: doc,
data: Buffer.from(imageBase64Data, "base64"),
transformation: {
width: 100,
height: 100,
},
});
doc.addSection({
children: [

54
demo/23-base64-images.ts
View File

@ -5,14 +5,56 @@ import { Document, Media, Packer, Paragraph, TextRun } from "../build";
const doc = new Document();
const image = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
const image2 = Media.addImage(doc, fs.readFileSync("./demo/images/dog.png"));
const image3 = Media.addImage(doc, fs.readFileSync("./demo/images/cat.jpg"));
const image4 = Media.addImage(doc, fs.readFileSync("./demo/images/parrots.bmp"));
const image5 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
const image2 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/dog.png"),
transformation: {
width: 100,
height: 100,
},
});
const image3 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/cat.jpg"),
transformation: {
width: 100,
height: 100,
},
});
const image4 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/parrots.bmp"),
transformation: {
width: 100,
height: 100,
},
});
const image5 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
const imageBase64Data = `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`;
const image6 = Media.addImage(doc, Buffer.from(imageBase64Data, "base64"), 100, 100);
const image6 = Media.addImage({
document: doc,
data: Buffer.from(imageBase64Data, "base64"),
transformation: {
width: 100,
height: 100,
},
});
doc.addSection({
children: [

9
demo/24-images-to-table-cell.ts
View File

@ -5,7 +5,14 @@ import { Document, Media, Packer, Paragraph, Table, TableCell, TableRow } from "
const doc = new Document();
const image = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
const table = new Table({
rows: [

9
demo/35-hyperlinks.ts
View File

@ -24,7 +24,14 @@ const doc = new Document({
},
});
const image1 = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
const image1 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
doc.addSection({
footers: {

9
demo/36-image-to-table-cell.ts
View File

@ -4,7 +4,14 @@ import * as fs from "fs";
import { Document, Header, Media, Packer, Paragraph, Table, TableCell, TableRow } from "../build";
const doc = new Document();
const image = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
const table = new Table({
rows: [

27
demo/37-images-to-header-and-footer.ts
View File

@ -4,9 +4,30 @@ import * as fs from "fs";
import { Document, Header, Media, Packer, Paragraph } from "../build";
const doc = new Document();
const image = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
const image1 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
const image2 = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
const image1 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
const image2 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
doc.addSection({
headers: {

8
demo/38-text-wrapping.ts
View File

@ -6,7 +6,13 @@ import { Document, Media, Packer, Paragraph, TextWrappingSide, TextWrappingType
const doc = new Document();
const image = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 200,
height: 200,
},
floating: {
horizontalPosition: {
offset: 2014400,

73
demo/5-images.ts
View File

@ -15,12 +15,65 @@ import {
const doc = new Document();
const image1 = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
const image2 = Media.addImage(doc, fs.readFileSync("./demo/images/dog.png").toString("base64"));
const image3 = Media.addImage(doc, fs.readFileSync("./demo/images/cat.jpg"));
const image4 = Media.addImage(doc, fs.readFileSync("./demo/images/parrots.bmp"));
const image5 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
const image6 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
const image1 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
const image2 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/dog.png").toString("base64"),
transformation: {
width: 100,
height: 100,
},
});
const image3 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/cat.jpg"),
transformation: {
width: 100,
height: 100,
flip: {
vertical: true,
},
},
});
const image4 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/parrots.bmp"),
transformation: {
width: 150,
height: 150,
flip: {
horizontal: true,
},
rotation: 225,
},
});
const image5 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 200,
height: 200,
flip: {
horizontal: true,
vertical: true,
},
},
});
const image6 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 200,
height: 200,
rotation: 45,
},
floating: {
zIndex: 10,
horizontalPosition: {
@ -32,7 +85,13 @@ const image6 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 2
},
});
const image7 = Media.addImage(doc, fs.readFileSync("./demo/images/cat.jpg"), 200, 200, {
const image7 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/cat.jpg"),
transformation: {
width: 200,
height: 200,
},
floating: {
zIndex: 5,
horizontalPosition: {

18
demo/50-readme-demo.ts
View File

@ -5,8 +5,22 @@ import { Document, HeadingLevel, Media, Packer, Paragraph, Table, TableCell, Tab
const doc = new Document();
const image1 = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
const image2 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
const image1 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
const image2 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
const table = new Table({
rows: [

18
demo/9-images-in-header-and-footer.ts
View File

@ -5,8 +5,22 @@ import { Document, Footer, Header, Media, Packer, Paragraph } from "../build";
const doc = new Document();
const image1 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
const image2 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
const image1 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
const image2 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
doc.addSection({
headers: {

67
docs/usage/images.md
View File

@ -5,7 +5,13 @@
To create a `floating` image on top of text:
```ts
Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 200,
height: 200,
}
floating: {
horizontalPosition: {
offset: 1014400,
@ -20,7 +26,14 @@ Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
By default with no arguments, its an `inline` image:
```ts
const image = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
```
Add it into the document by adding the image into a paragraph:
@ -50,13 +63,21 @@ Adding images can be done in two ways:
1. Call the `createImage` method to add the image directly into the `document`:
```ts
Media.addImage(doc, [IMAGE_BUFFER], [WIDTH], [HEIGHT], [POSITION_OPTIONS]);
Media.addImage({});
```
2. Create an `image` first, then add it into the `document`:
```ts
const image = Media.addImage(doc, [IMAGE_BUFFER]);
const image = Media.addImage({
document: doc,
data: [IMAGE_BUFFER],
transformation: {
width: [IMAGE_SIZE],
height: [IMAGE_SIZE],
},
});
doc.addSection({
children: [new Paragraph(image)],
});
@ -86,7 +107,13 @@ Pass `options` into the `[POSITION_OPTIONS]` metioned in the [Intro above](#Intr
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](https://startbigthinksmall.wordpress.com/2010/01/04/points-inches-and-emus-measuring-units-in-office-open-xml/):
```ts
const imageData = document.createImage(buffer, 903, 1149, {
const image = Media.addImage({
document: doc,
data: buffer,
transformation: {
width: 903,
height: 1149,
},
floating: {
horizontalPosition: {
offset: 1014400, // relative: HorizontalPositionRelativeFrom.PAGE by default
@ -99,7 +126,13 @@ const imageData = document.createImage(buffer, 903, 1149, {
```
```ts
const imageData = document.createImage(buffer, 903, 1149, {
const image = Media.addImage({
document: doc,
data: buffer,
transformation: {
width: 903,
height: 1149,
},
floating: {
horizontalPosition: {
relative: HorizontalPositionRelativeFrom.RIGHT_MARGIN,
@ -159,7 +192,13 @@ wrap: {
For example:
```ts
Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 200,
height: 200,
},
floating: {
horizontalPosition: {
offset: 2014400,
@ -202,7 +241,13 @@ margins: {
For example:
```ts
Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 200,
height: 200,
},
floating: {
horizontalPosition: {
offset: 2014400,
@ -228,7 +273,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/5-images.ts ':include')
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/5-images.ts ":include")
_Source: https://github.com/dolanmiu/docx/blob/master/demo/5-images.ts_
@ -236,7 +281,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/5-images.ts_
Example showing how to add image to headers and footers
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/9-images-in-header-and-footer.ts ':include')
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/9-images-in-header-and-footer.ts ":include")
_Source: https://github.com/dolanmiu/docx/blob/master/demo/9-images-in-header-and-footer.ts_
@ -244,6 +289,6 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/9-images-in-header-an
Example showing how to float images on top of text and optimally give a `margin`
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/38-text-wrapping.ts ':include')
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/38-text-wrapping.ts ":include")
_Source: https://github.com/dolanmiu/docx/blob/master/demo/38-text-wrapping.ts_

2
src/export/packer/image-replacer.spec.ts
View File

@ -42,7 +42,7 @@ describe("ImageReplacer", () => {
{
stream: Buffer.from(""),
fileName: "test-image.png",
dimensions: {
transformation: {
pixels: {
x: 100,
y: 100,

2
src/file/drawing/anchor/anchor.spec.ts
View File

@ -11,7 +11,7 @@ function createAnchor(drawingOptions: IDrawingOptions): Anchor {
{
fileName: "test.png",
stream: new Buffer(""),
dimensions: {
transformation: {
pixels: {
x: 0,
y: 0,

10
src/file/drawing/anchor/anchor.ts
View File

@ -1,5 +1,5 @@
// http://officeopenxml.com/drwPicFloating.php
import { IMediaData, IMediaDataDimensions } from "file/media";
import { IMediaData, IMediaDataTransformation } from "file/media";
import { XmlComponent } from "file/xml-components";
import { IDrawingOptions } from "../drawing";
import { HorizontalPosition, IFloating, SimplePos, VerticalPosition } from "../floating";
@ -12,7 +12,7 @@ import { GraphicFrameProperties } from "./../graphic-frame/graphic-frame-propert
import { AnchorAttributes } from "./anchor-attributes";
export class Anchor extends XmlComponent {
constructor(mediaData: IMediaData, dimensions: IMediaDataDimensions, drawingOptions: IDrawingOptions) {
constructor(mediaData: IMediaData, transform: IMediaDataTransformation, drawingOptions: IDrawingOptions) {
super("wp:anchor");
const floating: IFloating = {
@ -36,14 +36,14 @@ export class Anchor extends XmlComponent {
behindDoc: floating.behindDocument === true ? "1" : "0",
locked: floating.lockAnchor === true ? "1" : "0",
layoutInCell: floating.layoutInCell === true ? "1" : "0",
relativeHeight: floating.zIndex ? floating.zIndex : dimensions.emus.y,
relativeHeight: floating.zIndex ? floating.zIndex : transform.emus.y,
}),
);
this.root.push(new SimplePos());
this.root.push(new HorizontalPosition(floating.horizontalPosition));
this.root.push(new VerticalPosition(floating.verticalPosition));
this.root.push(new Extent(dimensions.emus.x, dimensions.emus.y));
this.root.push(new Extent(transform.emus.x, transform.emus.y));
this.root.push(new EffectExtent());
if (drawingOptions.floating !== undefined && drawingOptions.floating.wrap !== undefined) {
@ -67,6 +67,6 @@ export class Anchor extends XmlComponent {
this.root.push(new DocProperties());
this.root.push(new GraphicFrameProperties());
this.root.push(new Graphic(mediaData, dimensions.emus.x, dimensions.emus.y));
this.root.push(new Graphic(mediaData, transform));
}
}

8
src/file/drawing/drawing.spec.ts
View File

@ -13,7 +13,7 @@ function createDrawing(drawingOptions?: IDrawingOptions): Drawing {
fileName: "test.jpg",
stream: Buffer.from(imageBase64Data, "base64"),
path: path,
dimensions: {
transformation: {
pixels: {
x: 100,
y: 100,
@ -165,6 +165,9 @@ describe("Drawing", () => {
},
{
"a:xfrm": [
{
_attr: {},
},
{
"a:ext": {
_attr: {
@ -392,6 +395,9 @@ describe("Drawing", () => {
},
{
"a:xfrm": [
{
_attr: {},
},
{
"a:ext": {
_attr: {

4
src/file/drawing/drawing.ts
View File

@ -22,10 +22,10 @@ export class Drawing extends XmlComponent {
super("w:drawing");
if (!drawingOptions.floating) {
this.inline = new Inline(imageData, imageData.dimensions);
this.inline = new Inline(imageData, imageData.transformation);
this.root.push(this.inline);
} else {
this.root.push(new Anchor(imageData, imageData.dimensions, drawingOptions));
this.root.push(new Anchor(imageData, imageData.transformation, drawingOptions));
}
}

6
src/file/drawing/inline/graphic/graphic-data/graphic-data.ts
View File

@ -1,4 +1,4 @@
import { IMediaData } from "file/media";
import { IMediaData, IMediaDataTransformation } from "file/media";
import { XmlComponent } from "file/xml-components";
import { GraphicDataAttributes } from "./graphic-data-attribute";
@ -7,7 +7,7 @@ import { Pic } from "./pic";
export class GraphicData extends XmlComponent {
private readonly pic: Pic;
constructor(mediaData: IMediaData, x: number, y: number) {
constructor(mediaData: IMediaData, transform: IMediaDataTransformation) {
super("a:graphicData");
this.root.push(
@ -16,7 +16,7 @@ export class GraphicData extends XmlComponent {
}),
);
this.pic = new Pic(mediaData, x, y);
this.pic = new Pic(mediaData, transform);
this.root.push(this.pic);
}

8
src/file/drawing/inline/graphic/graphic-data/pic/pic.ts
View File

@ -1,5 +1,5 @@
// http://officeopenxml.com/drwPic.php
import { IMediaData } from "file/media";
import { IMediaData, IMediaDataTransformation } from "file/media";
import { XmlComponent } from "file/xml-components";
import { BlipFill } from "./blip/blip-fill";
@ -10,7 +10,7 @@ import { ShapeProperties } from "./shape-properties/shape-properties";
export class Pic extends XmlComponent {
private readonly shapeProperties: ShapeProperties;
constructor(mediaData: IMediaData, x: number, y: number) {
constructor(mediaData: IMediaData, transform: IMediaDataTransformation) {
super("pic:pic");
this.root.push(
@ -19,11 +19,11 @@ export class Pic extends XmlComponent {
}),
);
this.shapeProperties = new ShapeProperties(x, y);
this.shapeProperties = new ShapeProperties(transform);
this.root.push(new NonVisualPicProperties());
this.root.push(new BlipFill(mediaData));
this.root.push(new ShapeProperties(x, y));
this.root.push(new ShapeProperties(transform));
}
public setXY(x: number, y: number): void {

93
src/file/drawing/inline/graphic/graphic-data/pic/shape-properties/form.spec.ts Normal file
View File

@ -0,0 +1,93 @@
import { expect } from "chai";
import { Formatter } from "export/formatter";
import { Form } from "./form/form";
describe("Form", () => {
describe("#constructor()", () => {
it("should create", () => {
const tree = new Formatter().format(
new Form({
pixels: {
x: 100,
y: 100,
},
emus: {
x: 100,
y: 100,
},
}),
);
expect(tree).to.deep.equal({
"a:xfrm": [
{
_attr: {},
},
{
"a:ext": {
_attr: {
cx: 100,
cy: 100,
},
},
},
{
"a:off": {
_attr: {
x: 0,
y: 0,
},
},
},
],
});
});
it("should create with flip", () => {
const tree = new Formatter().format(
new Form({
pixels: {
x: 100,
y: 100,
},
emus: {
x: 100,
y: 100,
},
flip: {
vertical: true,
horizontal: true,
},
}),
);
expect(tree).to.deep.equal({
"a:xfrm": [
{
_attr: {
flipH: true,
flipV: true,
},
},
{
"a:ext": {
_attr: {
cx: 100,
cy: 100,
},
},
},
{
"a:off": {
_attr: {
x: 0,
y: 0,
},
},
},
],
});
});
});
});

29
src/file/drawing/inline/graphic/graphic-data/pic/shape-properties/form/form.ts
View File

@ -1,15 +1,38 @@
// http://officeopenxml.com/drwSp-size.php
import { XmlComponent } from "file/xml-components";
// http://officeopenxml.com/drwSp-rotate.php
import { IMediaDataTransformation } from "file/media";
import { XmlAttributeComponent, XmlComponent } from "file/xml-components";
import { Extents } from "./extents/extents";
import { Offset } from "./offset/off";
export class FormAttributes extends XmlAttributeComponent<{
readonly flipVertical?: boolean;
readonly flipHorizontal?: boolean;
readonly rotation?: number;
}> {
protected readonly xmlKeys = {
flipVertical: "flipV",
flipHorizontal: "flipH",
rotation: "rot",
};
}
export class Form extends XmlComponent {
private readonly extents: Extents;
constructor(x: number, y: number) {
constructor(options: IMediaDataTransformation) {
super("a:xfrm");
this.extents = new Extents(x, y);
this.root.push(
new FormAttributes({
flipVertical: options.flip?.vertical,
flipHorizontal: options.flip?.horizontal,
rotation: options.rotation,
}),
);
this.extents = new Extents(options.emus.x, options.emus.y);
this.root.push(this.extents);
this.root.push(new Offset());

7
src/file/drawing/inline/graphic/graphic-data/pic/shape-properties/no-fill.ts
View File

@ -1,7 +0,0 @@
import { XmlComponent } from "file/xml-components";
export class NoFill extends XmlComponent {
constructor() {
super("a:noFill");
}
}

16
src/file/drawing/inline/graphic/graphic-data/pic/shape-properties/outline/no-fill.spec.ts Normal file
View File

@ -0,0 +1,16 @@
import { expect } from "chai";
import { Formatter } from "export/formatter";
import { NoFill } from "./no-fill";
describe("NoFill", () => {
describe("#constructor()", () => {
it("should create", () => {
const tree = new Formatter().format(new NoFill());
expect(tree).to.deep.equal({
"a:noFill": {},
});
});
});
});

19
src/file/drawing/inline/graphic/graphic-data/pic/shape-properties/outline/outline.spec.ts Normal file
View File

@ -0,0 +1,19 @@
import { expect } from "chai";
import { Formatter } from "export/formatter";
import { Outline } from "./outline";
describe("Outline", () => {
describe("#constructor()", () => {
it("should create", () => {
const tree = new Formatter().format(new Outline());
expect(tree).to.deep.equal({
"a:ln": [
{
"a:noFill": {},
},
],
});
});
});
});

5
src/file/drawing/inline/graphic/graphic-data/pic/shape-properties/shape-properties.ts
View File

@ -1,4 +1,5 @@
// http://officeopenxml.com/drwSp-SpPr.php
import { IMediaDataTransformation } from "file/media";
import { XmlComponent } from "file/xml-components";
import { Form } from "./form";
// import { NoFill } from "./no-fill";
@ -9,7 +10,7 @@ import { ShapePropertiesAttributes } from "./shape-properties-attributes";
export class ShapeProperties extends XmlComponent {
private readonly form: Form;
constructor(x: number, y: number) {
constructor(transform: IMediaDataTransformation) {
super("pic:spPr");
this.root.push(
@ -18,7 +19,7 @@ export class ShapeProperties extends XmlComponent {
}),
);
this.form = new Form(x, y);
this.form = new Form(transform);
this.root.push(this.form);
this.root.push(new PresetGeometry());

6
src/file/drawing/inline/graphic/graphic.ts
View File

@ -1,4 +1,4 @@
import { IMediaData } from "file/media";
import { IMediaData, IMediaDataTransformation } from "file/media";
import { XmlAttributeComponent, XmlComponent } from "file/xml-components";
import { GraphicData } from "./graphic-data";
@ -14,7 +14,7 @@ class GraphicAttributes extends XmlAttributeComponent<{
export class Graphic extends XmlComponent {
private readonly data: GraphicData;
constructor(mediaData: IMediaData, x: number, y: number) {
constructor(mediaData: IMediaData, transform: IMediaDataTransformation) {
super("a:graphic");
this.root.push(
new GraphicAttributes({
@ -22,7 +22,7 @@ export class Graphic extends XmlComponent {
}),
);
this.data = new GraphicData(mediaData, x, y);
this.data = new GraphicData(mediaData, transform);
this.root.push(this.data);
}

12
src/file/drawing/inline/inline.ts
View File

@ -1,5 +1,5 @@
// http://officeopenxml.com/drwPicInline.php
import { IMediaData, IMediaDataDimensions } from "file/media";
import { IMediaData, IMediaDataTransformation } from "file/media";
import { XmlComponent } from "file/xml-components";
import { DocProperties } from "./../doc-properties/doc-properties";
import { EffectExtent } from "./../effect-extent/effect-extent";
@ -12,7 +12,7 @@ export class Inline extends XmlComponent {
private readonly extent: Extent;
private readonly graphic: Graphic;
constructor(mediaData: IMediaData, private readonly dimensions: IMediaDataDimensions) {
constructor(mediaData: IMediaData, private readonly transform: IMediaDataTransformation) {
super("wp:inline");
this.root.push(
@ -24,8 +24,8 @@ export class Inline extends XmlComponent {
}),
);
this.extent = new Extent(dimensions.emus.x, dimensions.emus.y);
this.graphic = new Graphic(mediaData, dimensions.emus.x, dimensions.emus.y);
this.extent = new Extent(transform.emus.x, transform.emus.y);
this.graphic = new Graphic(mediaData, transform);
this.root.push(this.extent);
this.root.push(new EffectExtent());
@ -35,8 +35,8 @@ export class Inline extends XmlComponent {
}
public scale(factorX: number, factorY: number): void {
const newX = Math.round(this.dimensions.emus.x * factorX);
const newY = Math.round(this.dimensions.emus.y * factorY);
const newX = Math.round(this.transform.emus.x * factorX);
const newY = Math.round(this.transform.emus.y * factorY);
this.extent.setXY(newX, newY);
this.graphic.setXY(newX, newY);

9
src/file/media/data.ts
View File

@ -1,4 +1,4 @@
export interface IMediaDataDimensions {
export interface IMediaDataTransformation {
readonly pixels: {
readonly x: number;
readonly y: number;
@ -7,13 +7,18 @@ export interface IMediaDataDimensions {
readonly x: number;
readonly y: number;
};
readonly flip?: {
readonly vertical?: boolean;
readonly horizontal?: boolean;
};
readonly rotation?: number;
}
export interface IMediaData {
readonly stream: Buffer | Uint8Array | ArrayBuffer;
readonly path?: string;
readonly fileName: string;
readonly dimensions: IMediaDataDimensions;
readonly transformation: IMediaDataTransformation;
}
// Needed because of: https://github.com/s-panferov/awesome-typescript-loader/issues/432

72
src/file/media/media.spec.ts
View File

@ -21,7 +21,14 @@ describe("Media", () => {
describe("#addImage", () => {
it("should add image", () => {
const file = new File();
const image = Media.addImage(file, "");
const image = Media.addImage({
document: file,
data: "",
transformation: {
width: 100,
height: 100,
},
});
let tree = new Formatter().format(new Paragraph(image));
expect(tree["w:p"]).to.be.an.instanceof(Array);
@ -34,7 +41,14 @@ describe("Media", () => {
// tslint:disable-next-line:no-any
const file = new File();
const image1 = Media.addImage(file, "test");
const image1 = Media.addImage({
document: file,
data: "test",
transformation: {
width: 100,
height: 100,
},
});
const tree = new Formatter().format(new Paragraph(image1));
const inlineElements = tree["w:p"][0]["w:r"][0]["w:drawing"][0]["wp:inline"];
const graphicData = inlineElements.find((x) => x["a:graphic"]);
@ -46,7 +60,14 @@ describe("Media", () => {
},
});
const image2 = Media.addImage(file, "test");
const image2 = Media.addImage({
document: file,
data: "test",
transformation: {
width: 100,
height: 100,
},
});
const tree2 = new Formatter().format(new Paragraph(image2));
const inlineElements2 = tree2["w:p"][0]["w:r"][0]["w:drawing"][0]["wp:inline"];
const graphicData2 = inlineElements2.find((x) => x["a:graphic"]);
@ -62,24 +83,32 @@ describe("Media", () => {
describe("#addMedia", () => {
it("should add media", () => {
const image = new Media().addMedia("");
const image = new Media().addMedia("", {
width: 100,
height: 100,
});
expect(image.fileName).to.equal("test.png");
expect(image.dimensions).to.deep.equal({
expect(image.transformation).to.deep.equal({
pixels: {
x: 100,
y: 100,
},
flip: undefined,
emus: {
x: 952500,
y: 952500,
},
rotation: undefined,
});
});
it("should return UInt8Array if atob is present", () => {
global.atob = () => "atob result";
const image = new Media().addMedia("");
const image = new Media().addMedia("", {
width: 100,
height: 100,
});
expect(image.stream).to.be.an.instanceof(Uint8Array);
// tslint:disable-next-line: no-any
@ -89,7 +118,10 @@ describe("Media", () => {
it("should use data as is if its not a string", () => {
global.atob = () => "atob result";
const image = new Media().addMedia(Buffer.from(""));
const image = new Media().addMedia(Buffer.from(""), {
width: 100,
height: 100,
});
expect(image.stream).to.be.an.instanceof(Uint8Array);
// tslint:disable-next-line: no-any
@ -100,20 +132,25 @@ describe("Media", () => {
describe("#getMedia", () => {
it("should get media", () => {
const media = new Media();
media.addMedia("");
media.addMedia("", {
width: 100,
height: 100,
});
const image = media.getMedia("test.png");
expect(image.fileName).to.equal("test.png");
expect(image.dimensions).to.deep.equal({
expect(image.transformation).to.deep.equal({
pixels: {
x: 100,
y: 100,
},
flip: undefined,
emus: {
x: 952500,
y: 952500,
},
rotation: undefined,
});
});
@ -127,7 +164,15 @@ describe("Media", () => {
describe("#Array", () => {
it("Get images as array", () => {
const media = new Media();
media.addMedia("");
media.addMedia("", {
width: 100,
height: 100,
flip: {
vertical: true,
horizontal: true,
},
rotation: 90,
});
const array = media.Array;
expect(array).to.be.an.instanceof(Array);
@ -135,15 +180,20 @@ describe("Media", () => {
const image = array[0];
expect(image.fileName).to.equal("test.png");
expect(image.dimensions).to.deep.equal({
expect(image.transformation).to.deep.equal({
pixels: {
x: 100,
y: 100,
},
flip: {
vertical: true,
horizontal: true,
},
emus: {
x: 952500,
y: 952500,
},
rotation: 5400000,
});
});
});

56
src/file/media/media.ts
View File

@ -1,22 +1,31 @@
import { uniqueId } from "convenience-functions";
import { IDrawingOptions } from "../drawing";
import { IFloating } from "../drawing";
import { File } from "../file";
import { PictureRun } from "../paragraph";
import { IMediaData } from "./data";
// import { Image } from "./image";
interface IMediaTransformation {
readonly width: number;
readonly height: number;
readonly flip?: {
readonly vertical?: boolean;
readonly horizontal?: boolean;
};
readonly rotation?: number;
}
export class Media {
public static addImage(
file: File,
buffer: Buffer | string | Uint8Array | ArrayBuffer,
width?: number,
height?: number,
drawingOptions?: IDrawingOptions,
): PictureRun {
public static addImage(options: {
readonly document: File;
readonly data: Buffer | string | Uint8Array | ArrayBuffer;
readonly transformation: IMediaTransformation;
readonly floating?: IFloating;
}): PictureRun {
// Workaround to expose id without exposing to API
const mediaData = file.Media.addMedia(buffer, width, height);
return new PictureRun(mediaData, drawingOptions);
const mediaData = options.document.Media.addMedia(options.data, options.transformation);
return new PictureRun(mediaData, { floating: options.floating });
}
private readonly map: Map<string, IMediaData>;
@ -35,22 +44,13 @@ export class Media {
return data;
}
public addMedia(buffer: Buffer | string | Uint8Array | ArrayBuffer, width: number = 100, height: number = 100): IMediaData {
const key = `${uniqueId()}.png`;
return this.createMedia(
key,
{
width: width,
height: height,
},
buffer,
);
public addMedia(buffer: Buffer | string | Uint8Array | ArrayBuffer, transformation: IMediaTransformation): IMediaData {
return this.createMedia(`${uniqueId()}.png`, transformation, buffer);
}
private createMedia(
key: string,
dimensions: { readonly width: number; readonly height: number },
transformation: IMediaTransformation,
data: Buffer | string | Uint8Array | ArrayBuffer,
filePath?: string,
): IMediaData {
@ -60,15 +60,17 @@ export class Media {
stream: newData,
path: filePath,
fileName: key,
dimensions: {
transformation: {
pixels: {
x: Math.round(dimensions.width),
y: Math.round(dimensions.height),
x: Math.round(transformation.width),
y: Math.round(transformation.height),
},
emus: {
x: Math.round(dimensions.width * 9525),
y: Math.round(dimensions.height * 9525),
x: Math.round(transformation.width * 9525),
y: Math.round(transformation.height * 9525),
},
flip: transformation.flip,
rotation: transformation.rotation ? transformation.rotation * 60000 : undefined,
},
};

5
src/import-dotx/import-dotx.ts
View File

@ -159,7 +159,10 @@ export class ImportDotx {
for (const r of wrapperImagesReferences) {
const buffer = await zipContent.files[`word/${r.target}`].async("nodebuffer");
const mediaData = media.addMedia(buffer);
const mediaData = media.addMedia(buffer, {
width: 100,
height: 100,
});
wrapper.Relationships.createRelationship(
r.id,