Make adding images declarative and simple

src/file/paragraph/paragraph.ts

@@ -10,11 +10,11 @@ import { PageBreak } from "./formatting/page-break";
 import { Bookmark, ConcreteHyperlink, ExternalHyperlink, InternalHyperlink } from "./links";
 import { Math } from "./math";
 import { IParagraphPropertiesOptions, ParagraphProperties } from "./properties";
-import { PictureRun, Run, SequentialIdentifier, SymbolRun, TextRun } from "./run";
+import { ImageRun, Run, SequentialIdentifier, SymbolRun, TextRun } from "./run";
 
 export type ParagraphChild =
     | TextRun
-    | PictureRun
+    | ImageRun
     | SymbolRun
     | Bookmark
     | PageBreak
@@ -34,7 +34,7 @@ export interface IParagraphOptions extends IParagraphPropertiesOptions {
 export class Paragraph extends XmlComponent {
     private readonly properties: ParagraphProperties;
 
-    constructor(options: string | PictureRun | IParagraphOptions) {
+    constructor(options: string | IParagraphOptions) {
         super("w:p");
 
         if (typeof options === "string") {
@@ -44,13 +44,6 @@ export class Paragraph extends XmlComponent {
             return;
         }
 
-        if (options instanceof PictureRun) {
-            this.properties = new ParagraphProperties({});
-            this.root.push(this.properties);
-            this.root.push(options);
-            return;
-        }
-
         this.properties = new ParagraphProperties(options);
 
         this.root.push(this.properties);

src/file/paragraph/run/image-run.ts

@@ -0,0 +1,68 @@
+import { uniqueId } from "convenience-functions";
+
+import { Drawing, IFloating } from "../../drawing";
+import { IMediaTransformation } from "../../media";
+import { IMediaData } from "../../media/data";
+import { Run } from "../run";
+import { IContext, IXmlableObject } from "/file/xml-components";
+
+export interface IImageOptions {
+    readonly data: Buffer | string | Uint8Array | ArrayBuffer;
+    readonly transformation: IMediaTransformation;
+    readonly floating?: IFloating;
+}
+
+export class ImageRun extends Run {
+    private readonly key = `${uniqueId()}.png`;
+    private readonly imageData: IMediaData;
+
+    constructor(options: IImageOptions) {
+        super({});
+        const newData = typeof options.data === "string" ? this.convertDataURIToBinary(options.data) : options.data;
+
+        this.imageData = {
+            stream: newData,
+            fileName: this.key,
+            transformation: {
+                pixels: {
+                    x: Math.round(options.transformation.width),
+                    y: Math.round(options.transformation.height),
+                },
+                emus: {
+                    x: Math.round(options.transformation.width * 9525),
+                    y: Math.round(options.transformation.height * 9525),
+                },
+                flip: options.transformation.flip,
+                rotation: options.transformation.rotation ? options.transformation.rotation * 60000 : undefined,
+            },
+        };
+        const drawing = new Drawing(this.imageData, { floating: options.floating });
+
+        this.root.push(drawing);
+    }
+
+    public prepForXml(context: IContext): IXmlableObject | undefined {
+        context.file.Media.addImage(this.key, this.imageData);
+
+        return super.prepForXml(context);
+    }
+
+    private convertDataURIToBinary(dataURI: string): Uint8Array {
+        // https://gist.github.com/borismus/1032746
+        // https://github.com/mafintosh/base64-to-uint8array
+        const BASE64_MARKER = ";base64,";
+
+        const base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
+
+        if (typeof atob === "function") {
+            return new Uint8Array(
+                atob(dataURI.substring(base64Index))
+                    .split("")
+                    .map((c) => c.charCodeAt(0)),
+            );
+        } else {
+            const b = require("buf" + "fer");
+            return new b.Buffer(dataURI, "base64");
+        }
+    }
+}

src/file/paragraph/run/index.ts

@@ -2,7 +2,7 @@ export * from "./run";
 export * from "./properties";
 export * from "./text-run";
 export * from "./symbol-run";
-export * from "./picture-run";
+export * from "./image-run";
 export * from "./run-fonts";
 export * from "./sequential-identifier";
 export * from "./underline";

src/file/paragraph/run/picture-run.ts

@@ -1,14 +0,0 @@
-import { Drawing } from "../../drawing";
-import { IDrawingOptions } from "../../drawing/drawing";
-import { IMediaData } from "../../media/data";
-import { Run } from "../run";
-
-export class PictureRun extends Run {
-    constructor(imageData: IMediaData, drawingOptions?: IDrawingOptions) {
-        super({});
-
-        const drawing = new Drawing(imageData, drawingOptions);
-
-        this.root.push(drawing);
-    }
-}