easy-template-x 4.0.0 → 4.1.1

package/README.md

@@ -303,9 +303,10 @@ Input data:
         _type: "image",
         source: fs.readFileSync("hero.png"),
         format: MimeType.Png,
-        altText: "Kung Fu Hero", // Optional
         width: 200,
-        height: 200
+        height: 200,
+        altText: "Kung Fu Hero", // Optional
+        transparencyPercent: 80 // Optional
     }
 }
 ```

package/dist/cjs/{easy-template-x.js → easy-template-x.cjs}

@@ -23,7 +23,6 @@ function _interopNamespaceDefault(e) {
 }
 
 var JSON5__namespace = /*#__PURE__*/_interopNamespaceDefault(JSON5);
-var JSZip__namespace = /*#__PURE__*/_interopNamespaceDefault(JSZip);
 
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
@@ -48,6 +47,12 @@ function _toPropertyKey(t) {
   return "symbol" == typeof i ? i : i + "";
 }
 
+class ArgumentError extends Error {
+  constructor(message) {
+    super(message);
+  }
+}
+
 class MalformedFileError extends Error {
   constructor(expectedFileType) {
     super(`Malformed file detected. Make sure the file is a valid ${expectedFileType} file.`);
@@ -64,7 +69,7 @@ class MaxXmlDepthError extends Error {
   }
 }
 
-class MissingArgumentError extends Error {
+class MissingArgumentError extends ArgumentError {
   constructor(argName) {
     super(`Argument '${argName}' is missing.`);
     _defineProperty(this, "argName", void 0);
@@ -1421,19 +1426,19 @@ class ImagePlugin extends TemplatePlugin {
       return;
     }
 
-    // add the image file into the archive
+    // Add the image file into the archive
     const mediaFilePath = await context.docx.mediaFiles.add(content.source, content.format);
     const relType = MimeTypeHelper.getOfficeRelType(content.format);
     const relId = await context.currentPart.rels.add(mediaFilePath, relType);
     await context.docx.contentTypes.ensureContentType(content.format);
 
-    // create the xml markup
+    // Create the xml markup
     const imageId = nextImageId++;
-    const imageXml = this.createMarkup(imageId, relId, content.altText, content.width, content.height);
+    const imageXml = this.createMarkup(imageId, relId, content);
     XmlNode.insertAfter(imageXml, wordTextNode);
     XmlNode.remove(wordTextNode);
   }
-  createMarkup(imageId, relId, altText, width, height) {
+  createMarkup(imageId, relId, content) {
     // http://officeopenxml.com/drwPicInline.php
 
     //
@@ -1450,15 +1455,15 @@ class ImagePlugin extends TemplatePlugin {
     const markupText = `
             <w:drawing>
                 <wp:inline distT="0" distB="0" distL="0" distR="0">
-                    <wp:extent cx="${this.pixelsToEmu(width)}" cy="${this.pixelsToEmu(height)}"/>
+                    <wp:extent cx="${this.pixelsToEmu(content.width)}" cy="${this.pixelsToEmu(content.height)}"/>
                     <wp:effectExtent l="0" t="0" r="0" b="0"/>
-                    ${this.docProperties(imageId, name, altText)}
+                    ${this.docProperties(imageId, name, content)}
                     <wp:cNvGraphicFramePr>
                         <a:graphicFrameLocks xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" noChangeAspect="1"/>
                     </wp:cNvGraphicFramePr>
                     <a:graphic xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
                         <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">
-                            ${this.pictureMarkup(imageId, relId, name, width, height)}
+                            ${this.pictureMarkup(imageId, relId, name, content)}
                         </a:graphicData>
                     </a:graphic>
                 </wp:inline>
@@ -1469,9 +1474,9 @@ class ImagePlugin extends TemplatePlugin {
 
     return markupXml;
   }
-  docProperties(imageId, name, altText) {
-    if (altText) {
-      return `<wp:docPr id="${imageId}" name="${name}" descr="${altText}"/>`;
+  docProperties(imageId, name, content) {
+    if (content.altText) {
+      return `<wp:docPr id="${imageId}" name="${name}" descr="${content.altText}"/>`;
     }
     return `
             <wp:docPr id="${imageId}" name="${name}">
@@ -1483,10 +1488,10 @@ class ImagePlugin extends TemplatePlugin {
             </wp:docPr>
         `;
   }
-  pictureMarkup(imageId, relId, name, width, height) {
+  pictureMarkup(imageId, relId, name, content) {
     // http://officeopenxml.com/drwPic.php
 
-    // legend:
+    // Legend:
     // nvPicPr - non-visual picture properties - id, name, etc.
     // blipFill - binary large image (or) picture fill - image size, image fill, etc.
     // spPr - shape properties - frame size, frame fill, etc.
@@ -1501,6 +1506,7 @@ class ImagePlugin extends TemplatePlugin {
                 </pic:nvPicPr>
                 <pic:blipFill>
                     <a:blip r:embed="${relId}">
+                        ${this.transparencyMarkup(content.transparencyPercent)}
                         <a:extLst>
                             <a:ext uri="{28A0092B-C50C-407E-A947-70E740481C1C}">
                                 <a14:useLocalDpi xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main" val="0"/>
@@ -1515,7 +1521,7 @@ class ImagePlugin extends TemplatePlugin {
                 <pic:spPr bwMode="auto">
                     <a:xfrm>
                         <a:off x="0" y="0"/>
-                        <a:ext cx="${this.pixelsToEmu(width)}" cy="${this.pixelsToEmu(height)}"/>
+                        <a:ext cx="${this.pixelsToEmu(content.width)}" cy="${this.pixelsToEmu(content.height)}"/>
                     </a:xfrm>
                     <a:prstGeom prst="rect">
                         <a:avLst/>
@@ -1528,6 +1534,16 @@ class ImagePlugin extends TemplatePlugin {
             </pic:pic>
         `;
   }
+  transparencyMarkup(transparencyPercent) {
+    if (transparencyPercent === null || transparencyPercent === undefined) {
+      return '';
+    }
+    if (transparencyPercent < 0 || transparencyPercent > 100) {
+      throw new ArgumentError(`Transparency percent must be between 0 and 100, but was ${transparencyPercent}.`);
+    }
+    const alpha = Math.round((100 - transparencyPercent) * 1000);
+    return `<a:alphaModFix amt="${alpha}" />`;
+  }
   pixelsToEmu(pixels) {
     // https://stackoverflow.com/questions/20194403/openxml-distance-size-units
     // https://docs.microsoft.com/en-us/windows/win32/vml/msdn-online-vml-units#other-units-of-measurement
@@ -3001,7 +3017,7 @@ class ZipObject {
 
 class Zip {
   static async load(file) {
-    const zip = await JSZip__namespace.loadAsync(file);
+    const zip = await JSZip.loadAsync(file);
     return new Zip(zip);
   }
   constructor(zip) {
@@ -3089,7 +3105,7 @@ class TemplateHandler {
     /**
      * Version number of the `easy-template-x` library.
      */
-    _defineProperty(this, "version", "3.2.1" );
+    _defineProperty(this, "version", "4.1.0" );
     _defineProperty(this, "xmlParser", new XmlParser());
     _defineProperty(this, "docxParser", void 0);
     _defineProperty(this, "compiler", void 0);
@@ -3237,6 +3253,7 @@ class TemplateHandler {
   }
 }
 
+exports.ArgumentError = ArgumentError;
 exports.Base64 = Base64;
 exports.Binary = Binary;
 exports.COMMENT_NODE_NAME = COMMENT_NODE_NAME;

package/dist/es/{easy-template-x.js → easy-template-x.mjs}

@@ -1,7 +1,7 @@
 import { DOMParser } from '@xmldom/xmldom';
 import getProp from 'lodash.get';
 import * as JSON5 from 'json5';
-import * as JSZip from 'jszip';
+import JSZip from 'jszip';
 
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
@@ -26,6 +26,12 @@ function _toPropertyKey(t) {
   return "symbol" == typeof i ? i : i + "";
 }
 
+class ArgumentError extends Error {
+  constructor(message) {
+    super(message);
+  }
+}
+
 class MalformedFileError extends Error {
   constructor(expectedFileType) {
     super(`Malformed file detected. Make sure the file is a valid ${expectedFileType} file.`);
@@ -42,7 +48,7 @@ class MaxXmlDepthError extends Error {
   }
 }
 
-class MissingArgumentError extends Error {
+class MissingArgumentError extends ArgumentError {
   constructor(argName) {
     super(`Argument '${argName}' is missing.`);
     _defineProperty(this, "argName", void 0);
@@ -1399,19 +1405,19 @@ class ImagePlugin extends TemplatePlugin {
       return;
     }
 
-    // add the image file into the archive
+    // Add the image file into the archive
     const mediaFilePath = await context.docx.mediaFiles.add(content.source, content.format);
     const relType = MimeTypeHelper.getOfficeRelType(content.format);
     const relId = await context.currentPart.rels.add(mediaFilePath, relType);
     await context.docx.contentTypes.ensureContentType(content.format);
 
-    // create the xml markup
+    // Create the xml markup
     const imageId = nextImageId++;
-    const imageXml = this.createMarkup(imageId, relId, content.altText, content.width, content.height);
+    const imageXml = this.createMarkup(imageId, relId, content);
     XmlNode.insertAfter(imageXml, wordTextNode);
     XmlNode.remove(wordTextNode);
   }
-  createMarkup(imageId, relId, altText, width, height) {
+  createMarkup(imageId, relId, content) {
     // http://officeopenxml.com/drwPicInline.php
 
     //
@@ -1428,15 +1434,15 @@ class ImagePlugin extends TemplatePlugin {
     const markupText = `
             <w:drawing>
                 <wp:inline distT="0" distB="0" distL="0" distR="0">
-                    <wp:extent cx="${this.pixelsToEmu(width)}" cy="${this.pixelsToEmu(height)}"/>
+                    <wp:extent cx="${this.pixelsToEmu(content.width)}" cy="${this.pixelsToEmu(content.height)}"/>
                     <wp:effectExtent l="0" t="0" r="0" b="0"/>
-                    ${this.docProperties(imageId, name, altText)}
+                    ${this.docProperties(imageId, name, content)}
                     <wp:cNvGraphicFramePr>
                         <a:graphicFrameLocks xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" noChangeAspect="1"/>
                     </wp:cNvGraphicFramePr>
                     <a:graphic xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
                         <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">
-                            ${this.pictureMarkup(imageId, relId, name, width, height)}
+                            ${this.pictureMarkup(imageId, relId, name, content)}
                         </a:graphicData>
                     </a:graphic>
                 </wp:inline>
@@ -1447,9 +1453,9 @@ class ImagePlugin extends TemplatePlugin {
 
     return markupXml;
   }
-  docProperties(imageId, name, altText) {
-    if (altText) {
-      return `<wp:docPr id="${imageId}" name="${name}" descr="${altText}"/>`;
+  docProperties(imageId, name, content) {
+    if (content.altText) {
+      return `<wp:docPr id="${imageId}" name="${name}" descr="${content.altText}"/>`;
     }
     return `
             <wp:docPr id="${imageId}" name="${name}">
@@ -1461,10 +1467,10 @@ class ImagePlugin extends TemplatePlugin {
             </wp:docPr>
         `;
   }
-  pictureMarkup(imageId, relId, name, width, height) {
+  pictureMarkup(imageId, relId, name, content) {
     // http://officeopenxml.com/drwPic.php
 
-    // legend:
+    // Legend:
     // nvPicPr - non-visual picture properties - id, name, etc.
     // blipFill - binary large image (or) picture fill - image size, image fill, etc.
     // spPr - shape properties - frame size, frame fill, etc.
@@ -1479,6 +1485,7 @@ class ImagePlugin extends TemplatePlugin {
                 </pic:nvPicPr>
                 <pic:blipFill>
                     <a:blip r:embed="${relId}">
+                        ${this.transparencyMarkup(content.transparencyPercent)}
                         <a:extLst>
                             <a:ext uri="{28A0092B-C50C-407E-A947-70E740481C1C}">
                                 <a14:useLocalDpi xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main" val="0"/>
@@ -1493,7 +1500,7 @@ class ImagePlugin extends TemplatePlugin {
                 <pic:spPr bwMode="auto">
                     <a:xfrm>
                         <a:off x="0" y="0"/>
-                        <a:ext cx="${this.pixelsToEmu(width)}" cy="${this.pixelsToEmu(height)}"/>
+                        <a:ext cx="${this.pixelsToEmu(content.width)}" cy="${this.pixelsToEmu(content.height)}"/>
                     </a:xfrm>
                     <a:prstGeom prst="rect">
                         <a:avLst/>
@@ -1506,6 +1513,16 @@ class ImagePlugin extends TemplatePlugin {
             </pic:pic>
         `;
   }
+  transparencyMarkup(transparencyPercent) {
+    if (transparencyPercent === null || transparencyPercent === undefined) {
+      return '';
+    }
+    if (transparencyPercent < 0 || transparencyPercent > 100) {
+      throw new ArgumentError(`Transparency percent must be between 0 and 100, but was ${transparencyPercent}.`);
+    }
+    const alpha = Math.round((100 - transparencyPercent) * 1000);
+    return `<a:alphaModFix amt="${alpha}" />`;
+  }
   pixelsToEmu(pixels) {
     // https://stackoverflow.com/questions/20194403/openxml-distance-size-units
     // https://docs.microsoft.com/en-us/windows/win32/vml/msdn-online-vml-units#other-units-of-measurement
@@ -3067,7 +3084,7 @@ class TemplateHandler {
     /**
      * Version number of the `easy-template-x` library.
      */
-    _defineProperty(this, "version", "3.2.1" );
+    _defineProperty(this, "version", "4.1.0" );
     _defineProperty(this, "xmlParser", new XmlParser());
     _defineProperty(this, "docxParser", void 0);
     _defineProperty(this, "compiler", void 0);
@@ -3215,4 +3232,4 @@ class TemplateHandler {
   }
 }
 
-export { Base64, Binary, COMMENT_NODE_NAME, ContentPartType, DelimiterSearcher, Delimiters, Docx, DocxParser, ImagePlugin, LOOP_CONTENT_TYPE, LinkPlugin, LoopPlugin, MalformedFileError, MaxXmlDepthError, MimeType, MimeTypeHelper, MissingArgumentError, MissingCloseDelimiterError, MissingStartDelimiterError, Path, PluginContent, RawXmlPlugin, Regex, ScopeData, TEXT_CONTENT_TYPE, TEXT_NODE_NAME, TagDisposition, TagOptionsParseError, TagParser, TemplateCompiler, TemplateExtension, TemplateHandler, TemplateHandlerOptions, TemplatePlugin, TextPlugin, UnclosedTagError, UnidentifiedFileTypeError, UnknownContentTypeError, UnopenedTagError, UnsupportedFileTypeError, XmlDepthTracker, XmlNode, XmlNodeType, XmlParser, XmlPart, Zip, ZipObject, createDefaultPlugins, first, inheritsFrom, isNumber, isPromiseLike, last, normalizeDoubleQuotes, pushMany, sha1, stringValue, toDictionary };
+export { ArgumentError, Base64, Binary, COMMENT_NODE_NAME, ContentPartType, DelimiterSearcher, Delimiters, Docx, DocxParser, ImagePlugin, LOOP_CONTENT_TYPE, LinkPlugin, LoopPlugin, MalformedFileError, MaxXmlDepthError, MimeType, MimeTypeHelper, MissingArgumentError, MissingCloseDelimiterError, MissingStartDelimiterError, Path, PluginContent, RawXmlPlugin, Regex, ScopeData, TEXT_CONTENT_TYPE, TEXT_NODE_NAME, TagDisposition, TagOptionsParseError, TagParser, TemplateCompiler, TemplateExtension, TemplateHandler, TemplateHandlerOptions, TemplatePlugin, TextPlugin, UnclosedTagError, UnidentifiedFileTypeError, UnknownContentTypeError, UnopenedTagError, UnsupportedFileTypeError, XmlDepthTracker, XmlNode, XmlNodeType, XmlParser, XmlPart, Zip, ZipObject, createDefaultPlugins, first, inheritsFrom, isNumber, isPromiseLike, last, normalizeDoubleQuotes, pushMany, sha1, stringValue, toDictionary };

package/dist/types/errors/argumentError.d.ts

@@ -0,0 +1,3 @@
+export declare class ArgumentError extends Error {
+    constructor(message: string);
+}

package/dist/types/errors/index.d.ts

@@ -1,3 +1,4 @@
+export * from './argumentError';
 export * from './malformedFileError';
 export * from './maxXmlDepthError';
 export * from './missingArgumentError';

package/dist/types/errors/missingArgumentError.d.ts

@@ -1,4 +1,5 @@
-export declare class MissingArgumentError extends Error {
+import { ArgumentError } from './argumentError';
+export declare class MissingArgumentError extends ArgumentError {
     readonly argName: string;
     constructor(argName: string);
 }

package/dist/types/plugins/image/imageContent.d.ts

@@ -5,8 +5,9 @@ export type ImageFormat = MimeType.Jpeg | MimeType.Png | MimeType.Gif | MimeType
 export interface ImageContent extends PluginContent {
     _type: 'image';
     source: Binary;
-    altText?: string;
     format: ImageFormat;
     width: number;
     height: number;
+    altText?: string;
+    transparencyPercent?: number;
 }

package/dist/types/plugins/image/imagePlugin.d.ts

@@ -6,5 +6,6 @@ export declare class ImagePlugin extends TemplatePlugin {
     private createMarkup;
     private docProperties;
     private pictureMarkup;
+    private transparencyMarkup;
     private pixelsToEmu;
 }

package/dist/types/zip/jsZipHelper.d.ts

@@ -1,4 +1,4 @@
-import * as JSZip from 'jszip';
+import JSZip from 'jszip';
 import { Constructor } from '../types';
 import { Binary } from '../utils';
 export declare class JsZipHelper {

package/dist/types/zip/zipObject.d.ts

@@ -1,4 +1,4 @@
-import * as JSZip from 'jszip';
+import JSZip from 'jszip';
 import { Constructor } from '../types';
 import { Binary } from '../utils';
 export declare class ZipObject {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-template-x",
-  "version": "4.0.0",
+  "version": "4.1.1",
   "description": "Generate docx documents from templates, in Node or in the browser.",
   "keywords": [
     "docx",
@@ -21,15 +21,19 @@
     "url": "https://github.com/alonrbar/easy-template-x/issues"
   },
   "type": "module",
-  "main": "dist/cjs/easy-template-x.js",
-  "module": "dist/es/easy-template-x.js",
+  "main": "dist/cjs/easy-template-x.cjs",
+  "module": "dist/es/easy-template-x.mjs",
+  "exports": {
+    "require": "./dist/cjs/easy-template-x.cjs",
+    "import": "./dist/es/easy-template-x.mjs"
+  },
   "typings": "dist/types/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
-    "clean": "rimraf .tmp dist test-reports",
+    "clean": "rimraf .tmp dist test-reports && yarn clean-dist-verify",
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"./{src,test}/**/!(*.d).ts\"",
     "test": "jest --verbose",
@@ -37,7 +41,13 @@
     "build-src": "rollup -c",
     "build-types": "tsc -p tsconfig.types.json --emitDeclarationOnly",
     "build": "yarn build-types && yarn build-src",
-    "release": "yarn clean && yarn quality && yarn build"
+    "release": "yarn clean && yarn quality && yarn build && yarn dist-verify",
+    "dist-verify": "yarn dist-verify-cjs && yarn dist-verify-es",
+    "dist-verify-cjs": "cd dist-verify/cjs && npm install && node main.js",
+    "dist-verify-es": "cd dist-verify/es && npm install && node main.js",
+    "clean-dist-verify": "yarn clean-dist-verify-cjs && yarn clean-dist-verify-es",
+    "clean-dist-verify-cjs": "rimraf dist-verify/cjs/node_modules dist-verify/cjs/package-lock.json",
+    "clean-dist-verify-es": "rimraf dist-verify/es/node_modules dist-verify/es/package-lock.json"
   },
   "packageManager": "yarn@4.3.1",
   "dependencies": {

package/src/errors/argumentError.ts

@@ -0,0 +1,6 @@
+export class ArgumentError extends Error {
+
+    constructor(message: string) {
+        super(message);
+    }
+}

package/src/errors/index.ts

@@ -1,3 +1,4 @@
+export * from './argumentError';
 export * from './malformedFileError';
 export * from './maxXmlDepthError';
 export * from './missingArgumentError';

package/src/errors/missingArgumentError.ts

@@ -1,4 +1,6 @@
-export class MissingArgumentError extends Error {
+import { ArgumentError } from './argumentError';
+
+export class MissingArgumentError extends ArgumentError {
 
     public readonly argName: string;
 

package/src/plugins/image/imageContent.ts

@@ -7,11 +7,15 @@ export type ImageFormat = MimeType.Jpeg | MimeType.Png | MimeType.Gif | MimeType
 export interface ImageContent extends PluginContent {
     _type: 'image';
     source: Binary;
+    format: ImageFormat;
+    width: number;
+    height: number;
     /**
      * Optional. If this is not set the image will be marked as "decorative".
      */
     altText?: string;
-    format: ImageFormat;
-    width: number;
-    height: number;
+    /**
+     * Optional. A value between 0 and 100. If this is not set the image will be fully opaque.
+     */
+    transparencyPercent?: number;
 }

package/src/plugins/image/imagePlugin.ts

@@ -1,4 +1,5 @@
 import { ScopeData, Tag, TemplateContext } from '../../compilation';
+import { ArgumentError } from '../../errors';
 import { MimeTypeHelper } from '../../mimeType';
 import { XmlGeneralNode, XmlNode } from '../../xml';
 import { TemplatePlugin } from '../templatePlugin';
@@ -30,21 +31,21 @@ export class ImagePlugin extends TemplatePlugin {
             return;
         }
 
-        // add the image file into the archive
+        // Add the image file into the archive
         const mediaFilePath = await context.docx.mediaFiles.add(content.source, content.format);
         const relType = MimeTypeHelper.getOfficeRelType(content.format);
         const relId = await context.currentPart.rels.add(mediaFilePath, relType);
         await context.docx.contentTypes.ensureContentType(content.format);
 
-        // create the xml markup
+        // Create the xml markup
         const imageId = nextImageId++;
-        const imageXml = this.createMarkup(imageId, relId, content.altText, content.width, content.height);
+        const imageXml = this.createMarkup(imageId, relId, content);
 
         XmlNode.insertAfter(imageXml, wordTextNode);
         XmlNode.remove(wordTextNode);
     }
 
-    private createMarkup(imageId: number, relId: string, altText: string, width: number, height: number): XmlNode {
+    private createMarkup(imageId: number, relId: string, content: ImageContent): XmlNode {
 
         // http://officeopenxml.com/drwPicInline.php
 
@@ -62,15 +63,15 @@ export class ImagePlugin extends TemplatePlugin {
         const markupText = `
             <w:drawing>
                 <wp:inline distT="0" distB="0" distL="0" distR="0">
-                    <wp:extent cx="${this.pixelsToEmu(width)}" cy="${this.pixelsToEmu(height)}"/>
+                    <wp:extent cx="${this.pixelsToEmu(content.width)}" cy="${this.pixelsToEmu(content.height)}"/>
                     <wp:effectExtent l="0" t="0" r="0" b="0"/>
-                    ${this.docProperties(imageId, name, altText)}
+                    ${this.docProperties(imageId, name, content)}
                     <wp:cNvGraphicFramePr>
                         <a:graphicFrameLocks xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" noChangeAspect="1"/>
                     </wp:cNvGraphicFramePr>
                     <a:graphic xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
                         <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">
-                            ${this.pictureMarkup(imageId, relId, name, width, height)}
+                            ${this.pictureMarkup(imageId, relId, name, content)}
                         </a:graphicData>
                     </a:graphic>
                 </wp:inline>
@@ -83,9 +84,9 @@ export class ImagePlugin extends TemplatePlugin {
         return markupXml;
     }
 
-    private docProperties(imageId: number, name: string, altText: string): string {
-        if (altText) {
-            return `<wp:docPr id="${imageId}" name="${name}" descr="${altText}"/>`;
+    private docProperties(imageId: number, name: string, content: ImageContent): string {
+        if (content.altText) {
+            return `<wp:docPr id="${imageId}" name="${name}" descr="${content.altText}"/>`;
         }
 
         return `
@@ -99,11 +100,11 @@ export class ImagePlugin extends TemplatePlugin {
         `;
     }
 
-    private pictureMarkup(imageId: number, relId: string, name: string, width: number, height: number) {
+    private pictureMarkup(imageId: number, relId: string, name: string, content: ImageContent) {
 
         // http://officeopenxml.com/drwPic.php
 
-        // legend:
+        // Legend:
         // nvPicPr - non-visual picture properties - id, name, etc.
         // blipFill - binary large image (or) picture fill - image size, image fill, etc.
         // spPr - shape properties - frame size, frame fill, etc.
@@ -118,6 +119,7 @@ export class ImagePlugin extends TemplatePlugin {
                 </pic:nvPicPr>
                 <pic:blipFill>
                     <a:blip r:embed="${relId}">
+                        ${this.transparencyMarkup(content.transparencyPercent)}
                         <a:extLst>
                             <a:ext uri="{28A0092B-C50C-407E-A947-70E740481C1C}">
                                 <a14:useLocalDpi xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main" val="0"/>
@@ -132,7 +134,7 @@ export class ImagePlugin extends TemplatePlugin {
                 <pic:spPr bwMode="auto">
                     <a:xfrm>
                         <a:off x="0" y="0"/>
-                        <a:ext cx="${this.pixelsToEmu(width)}" cy="${this.pixelsToEmu(height)}"/>
+                        <a:ext cx="${this.pixelsToEmu(content.width)}" cy="${this.pixelsToEmu(content.height)}"/>
                     </a:xfrm>
                     <a:prstGeom prst="rect">
                         <a:avLst/>
@@ -146,6 +148,18 @@ export class ImagePlugin extends TemplatePlugin {
         `;
     }
 
+    private transparencyMarkup(transparencyPercent: number) {
+        if (transparencyPercent === null || transparencyPercent === undefined) {
+            return '';
+        }
+        if (transparencyPercent < 0 || transparencyPercent > 100) {
+            throw new ArgumentError(`Transparency percent must be between 0 and 100, but was ${transparencyPercent}.`);
+        }
+
+        const alpha = Math.round((100 - transparencyPercent) * 1000);
+        return `<a:alphaModFix amt="${alpha}" />`;
+    }
+
     private pixelsToEmu(pixels: number): number {
 
         // https://stackoverflow.com/questions/20194403/openxml-distance-size-units

package/src/zip/jsZipHelper.ts

@@ -1,4 +1,4 @@
-import * as JSZip from 'jszip';
+import JSZip from 'jszip';
 import { MissingArgumentError } from '../errors';
 import { Constructor } from '../types';
 import { Binary } from '../utils';

package/src/zip/zip.ts

@@ -1,4 +1,4 @@
-import * as JSZip from 'jszip';
+import JSZip from 'jszip';
 import { Constructor } from '../types';
 import { Binary } from '../utils';
 import { JsZipHelper } from './jsZipHelper';

package/src/zip/zipObject.ts

@@ -1,4 +1,4 @@
-import * as JSZip from 'jszip';
+import JSZip from 'jszip';
 import { Constructor } from '../types';
 import { Binary } from '../utils';
 import { JsZipHelper } from './jsZipHelper';