exceljs · guyonroche · Jan 22, 2020 · Jan 14, 2020 · Jan 22, 2020 · Jan 22, 2020
diff --git a/README.md b/README.md
@@ -1775,6 +1775,21 @@ worksheet.addImage(imageId2, {
 });
 ```
 
+### Add image with hyperlinks
+
+You can add an image with hyperlinks to a cell, and defines the hyperlinks in image range.
+
+```javascript
+worksheet.addImage(imageId2, {
+  tl: { col: 0, row: 0 },
+  ext: { width: 500, height: 200 },
+  hyperlinks: {
+    hyperlink: 'http://www.somewhere.com',
+    tooltip: 'http://www.somewhere.com'
+  }
+});
+```
+
 ## Sheet Protection
 
 Worksheets can be protected from modification by adding a password.

diff --git a/README_zh.md b/README_zh.md
@@ -1328,6 +1328,21 @@ worksheet.addImage(imageId2, {
 });
 ```
 
+### <a id="add-image-with-hyperlinks">添加带超链接的图片</a>
+
+You can add an image with hyperlinks to a cell.
+
+```javascript
+worksheet.addImage(imageId2, {
+  tl: { col: 0, row: 0 },
+  ext: { width: 500, height: 200 },
+  hyperlinks: {
+    hyperlink: 'http://www.somewhere.com',
+    tooltip: 'http://www.somewhere.com'
+  }
+});
+```
+
 ## <a id="file-io">文件 I/O</a>
 
 ### <a id="xlsx">XLSX</a>

diff --git a/index.d.ts b/index.d.ts
@@ -878,6 +878,11 @@ export interface ImagePosition {
 	ext: { width: number; height: number };
 }
 
+export interface ImageHyperlinkValue {
+	hyperlink: string;
+	tooltip?: string;
+}
+
 export interface Range extends Location {
 	sheetName: string;
 
@@ -1142,7 +1147,7 @@ export interface Worksheet {
 	 * Using the image id from `Workbook.addImage`,
 	 * embed an image within the worksheet to cover a range
 	 */
-	addImage(imageId: number, range: string | { editAs?: string; } & ImageRange | { editAs?: string; } & ImagePosition): void;
+	addImage(imageId: number, range: string | { editAs?: string; } & ImageRange & {hyperlinks?: ImageHyperlinkValue} | { editAs?: string; } & ImagePosition & {hyperlinks?: ImageHyperlinkValue}): void;
 
 	getImages(): Array<{
 		type: 'image',

diff --git a/lib/doc/image.js b/lib/doc/image.js
@@ -18,6 +18,7 @@ class Image {
         return {
           type: this.type,
           imageId: this.imageId,
+          hyperlinks: this.range.hyperlinks,
           range: {
             tl: this.range.tl.model,
             br: this.range.br && this.range.br.model,
@@ -29,7 +30,7 @@ class Image {
     }
   }
 
-  set model({type, imageId, range}) {
+  set model({type, imageId, range, hyperlinks}) {
     this.type = type;
     this.imageId = imageId;
 
@@ -47,10 +48,11 @@ class Image {
           br: range.br && new Anchor(this.worksheet, range.br, 0),
           ext: range.ext,
           editAs: range.editAs,
+          hyperlinks: hyperlinks || range.hyperlinks,
         };
       }
     }
   }
 }
 
-module.exports = Image;
+module.exports = Image;
diff --git a/lib/xlsx/xform/drawing/c-nv-pic-pr-xform.js b/lib/xlsx/xform/drawing/c-nv-pic-pr-xform.js
@@ -0,0 +1,39 @@
+const BaseXform = require('../base-xform');
+
+class CNvPicPrXform extends BaseXform {
+
+  get tag() {
+    return 'xdr:cNvPicPr';
+  }
+
+  render(xmlStream) {
+    xmlStream.openNode(this.tag);
+    xmlStream.leafNode('a:picLocks', {
+      noChangeAspect: '1',
+    });
+    xmlStream.closeNode();
+  }
+
+  parseOpen(node) {
+    switch (node.name) {
+      case this.tag:
+        return true;
+      default:
+        return true;
+    }
+  }
+
+  parseText() {}
+
+  parseClose(name) {
+    switch (name) {
+      case this.tag:
+        return false;
+      default:
+        // unprocessed internal nodes
+        return true;
+    }
+  }
+}
+
+module.exports = CNvPicPrXform;
diff --git a/lib/xlsx/xform/drawing/c-nv-pr-xform.js b/lib/xlsx/xform/drawing/c-nv-pr-xform.js
@@ -0,0 +1,68 @@
+const BaseXform = require('../base-xform');
+const HlickClickXform = require('./hlink-click-xform');
+const ExtLstXform = require('./ext-lst-xform');
+
+class CNvPrXform extends BaseXform {
+  constructor() {
+    super();
+
+    this.map = {
+      'a:hlinkClick': new HlickClickXform(),
+      'a:extLst': new ExtLstXform(),
+    };
+  }
+
+  get tag() {
+    return 'xdr:cNvPr';
+  }
+
+  render(xmlStream, model) {
+    xmlStream.openNode(this.tag, {
+      id: model.index,
+      name: `Picture ${model.index}`,
+    });
+    this.map['a:hlinkClick'].render(xmlStream, model);
+    this.map['a:extLst'].render(xmlStream, model);
+    xmlStream.closeNode();
+  }
+
+  parseOpen(node) {
+    if (this.parser) {
+      this.parser.parseOpen(node);
+      return true;
+    }
+
+    switch (node.name) {
+      case this.tag:
+        this.reset();
+        break;
+      default:
+        this.parser = this.map[node.name];
+        if (this.parser) {
+          this.parser.parseOpen(node);
+        }
+        break;
+    }
+    return true;
+  }
+
+  parseText() {}
+
+  parseClose(name) {
+    if (this.parser) {
+      if (!this.parser.parseClose(name)) {
+        this.parser = undefined;
+      }
+      return true;
+    }
+    switch (name) {
+      case this.tag:
+        this.model = this.map['a:hlinkClick'].model;
+        return false;
+      default:
+        return true;
+    }
+  }
+}
+
+module.exports = CNvPrXform;
diff --git a/lib/xlsx/xform/drawing/ext-lst-xform.js b/lib/xlsx/xform/drawing/ext-lst-xform.js
@@ -0,0 +1,43 @@
+const BaseXform = require('../base-xform');
+
+class ExtLstXform extends BaseXform {
+  get tag() {
+    return 'a:extLst';
+  }
+
+  render(xmlStream) {
+    xmlStream.openNode(this.tag);
+    xmlStream.openNode('a:ext', {
+      uri: '{FF2B5EF4-FFF2-40B4-BE49-F238E27FC236}',
+    });
+    xmlStream.leafNode('a16:creationId', {
+      'xmlns:a16': 'http://schemas.microsoft.com/office/drawing/2014/main',
+      id: '{00000000-0008-0000-0000-000002000000}',
+    });
+    xmlStream.closeNode();
+    xmlStream.closeNode();
+  }
+
+  parseOpen(node) {
+    switch (node.name) {
+      case this.tag:
+        return true;
+      default:
+        return true;
+    }
+  }
+
+  parseText() {}
+
+  parseClose(name) {
+    switch (name) {
+      case this.tag:
+        return false;
+      default:
+        // unprocessed internal nodes
+        return true;
+    }
+  }
+}
+
+module.exports = ExtLstXform;
diff --git a/lib/xlsx/xform/drawing/hlink-click-xform.js b/lib/xlsx/xform/drawing/hlink-click-xform.js
@@ -0,0 +1,42 @@
+const BaseXform = require('../base-xform');
+
+class HLinkClickXform extends BaseXform {
+
+  get tag() {
+    return 'a:hlinkClick';
+  }
+
+  render(xmlStream, model) {
+    if (!(model.hyperlinks && model.hyperlinks.rId)) {
+      return;
+    }
+    xmlStream.leafNode(this.tag, {
+      'xmlns:r': 'http://schemas.openxmlformats.org/officeDocument/2006/relationships',
+      'r:id': model.hyperlinks.rId,
+      'tooltip': model.hyperlinks.tooltip,
+    });
+  }
+
+  parseOpen(node) {
+    switch (node.name) {
+      case this.tag:
+        this.model = {
+          hyperlinks: {
+            rId: node.attributes['r:id'],
+            tooltip: node.attributes.tooltip,
+          },
+        };
+        return true;
+      default:
+        return true;
+    }
+  }
+
+  parseText() {}
+
+  parseClose() {
+    return false;
+  }
+}
+
+module.exports = HLinkClickXform;
diff --git a/lib/xlsx/xform/drawing/nv-pic-pr-xform.js b/lib/xlsx/xform/drawing/nv-pic-pr-xform.js
@@ -1,46 +1,64 @@
 const BaseXform = require('../base-xform');
-const StaticXform = require('../static-xform');
+const CNvPrXform = require('./c-nv-pr-xform');
+const CNvPicPrXform = require('./c-nv-pic-pr-xform');
 
 class NvPicPrXform extends BaseXform {
+  constructor() {
+    super();
+
+    this.map = {
+      'xdr:cNvPr': new CNvPrXform(),
+      'xdr:cNvPicPr': new CNvPicPrXform(),
+    };
+  }
+
   get tag() {
     return 'xdr:nvPicPr';
   }
 
   render(xmlStream, model) {
-    const xform = new StaticXform({
-      tag: this.tag,
-      c: [
-        {
-          tag: 'xdr:cNvPr',
-          $: {id: model.index, name: `Picture ${model.index}`},
-          c: [
-            {
-              tag: 'a:extLst',
-              c: [
-                {
-                  tag: 'a:ext',
-                  $: {uri: '{FF2B5EF4-FFF2-40B4-BE49-F238E27FC236}'},
-                  c: [
-                    {
-                      tag: 'a16:creationId',
-                      $: {
-                        'xmlns:a16': 'http://schemas.microsoft.com/office/drawing/2014/main',
-                        id: '{00000000-0008-0000-0000-000002000000}',
-                      },
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-        {
-          tag: 'xdr:cNvPicPr',
-          c: [{tag: 'a:picLocks', $: {noChangeAspect: '1'}}],
-        },
-      ],
-    });
-    xform.render(xmlStream);
+    xmlStream.openNode(this.tag);
+    this.map['xdr:cNvPr'].render(xmlStream, model);
+    this.map['xdr:cNvPicPr'].render(xmlStream, model);
+    xmlStream.closeNode();
+  }
+
+  parseOpen(node) {
+    if (this.parser) {
+      this.parser.parseOpen(node);
+      return true;
+    }
+
+    switch (node.name) {
+      case this.tag:
+        this.reset();
+        break;
+      default:
+        this.parser = this.map[node.name];
+        if (this.parser) {
+          this.parser.parseOpen(node);
+        }
+        break;
+    }
+    return true;
+  }
+
+  parseText() {}
+
+  parseClose(name) {
+    if (this.parser) {
+      if (!this.parser.parseClose(name)) {
+        this.parser = undefined;
+      }
+      return true;
+    }
+    switch (name) {
+      case this.tag:
+        this.model = this.map['xdr:cNvPr'].model;
+        return false;
+      default:
+        return true;
+    }
   }
 }