docxtemplater node 图片

要在 docxtemplater 中插入图片，你可以使用 `pict` 标签和 base64 编码的图片数据。以下是一个示例：

const fs = require('fs');
const Docxtemplater = require('docxtemplater');

// 读取模板
const template = fs.readFileSync('template.docx', 'binary');

// 准备数据
const data = {
  image: {
    data: fs.readFileSync('image.png', 'base64'),
    width: 200,
    height: 200
  }
};

// 创建 docxtemplater 实例
const doc = new Docxtemplater();
doc.loadZip(new JSZip(template));

// 注册 pict 标签
// pict 标签可以用于在文档中插入图片
doc.createParsers();
doc.parser.parse = function(tag) {
  if (tag === 'pict') {
    const { data, width, height } = this.getValue(tag);
    const image = this.scopeManager.getValue(['image']);
    const src = `data:image/png;base64,${data}`;
    const imgNode = {
      name: 'drawing',
      properties: {
        'wp:inline': {
          distT: 0,
          distB: 0,
          distL: 0,
          distR: 0
        }
      },
      children: [
        {
          name: 'wp:extent',
          properties: {
            cx: width * 914400 / 96,
            cy: height * 914400 / 96
          }
        },
        {
          name: 'wp:docPr',
          properties: {
            id: 1,
            name: 'Picture 1',
            descr: 'Picture 1'
          }
        },
        {
          name: 'wp:cNvGraphicFramePr',
          children: [
            {
              name: 'a:graphicFrameLocks',
              properties: {
                xmlns:a: ''
              }
            }
          ]
        },
        {
          name: 'a:graphic',
          properties: {
            xmlns:a: ''
          },
          children: [
            {
              name: 'a:graphicData',
              properties: {
                uri: 'http://schemas.openxmlformats.org/drawingml/2006/picture'
              },
              children: [
                {
                  name: 'pic:pic',
                  properties: {
                    xmlns: pic: 'http://schemas.openxmlformats.org/drawingml/2006/picture'
                  },
                  children: [
                    {
                      name: 'pic:nvPicPr',
                      children: [
                        {
                          name: 'pic:cNvPr',
                          properties: {
                            id: 0,
                            name: 'Picture 1',
                            descr: 'Picture 1'
                          }
                        },
                        {
                          name: 'pic:cNvPicPr',
                          children: [
                            {
                              name: 'a:picLocks',
                              properties: {
                                noChangeAspect: true
                              }
                            }
                          ]
                        }
                      ]
                    },
                    {
                      name: 'pic:blipFill',
                      children: [
                        {
                          name: 'a:blip',
                          properties: {
                            'r:embed': image.mediaData[0].attr['r:embed']
                          }
                        },
                        {
                          name: 'a:stretch',
                          children: [
                            {
                              name: 'a:fillRect',
                              properties: {
                                xmlns:a: ''
                              }
                            }
                          ]
                        }
                      ]
                    },
                    {
                      name: 'pic:spPr',
                      children: [
                        {
                          name: 'a:xfrm',
                          children: [
                            {
                              name: 'a:off',
                              properties: {
                                x: 0,
                                y: 0
                              }
                            },
                            {
                              name: 'a:ext',
                              properties: {
                                cx: width * 914400 / 96,
                                cy: height * 914400 / 96
                              }
                            }
                          ]
                        },
                        {
                          name: 'a:prstGeom',
                          properties: {
                            prst: 'rect',
                            xmlns:a: ''
                          },
                          children: [
                            {
                              name: 'a:avLst',
                              properties: {
                                xmlns:a: ''
                              }
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    };
    image.createImageNode(imgNode, src);
    return imgNode;
  }
  return Docxtemplater.prototype.parser.parse.apply(this, arguments);
};

// 渲染文档
doc.setData(data);
doc.render();

// 保存文档
const result = doc.getZip().generate({ type: 'nodebuffer' });
fs.writeFileSync('output.docx', result);

在上面的示例中，我们注册了 `pict` 标签，并在 `parser.parse` 方法中处理它。我们通过 `this.scopeManager.getValue(['image'])` 获取到图片数据，然后将其插入到文档中。注意，我们需要手动构造一个图片节点，它包含了图片的大小和 base64 编码数据。在创建图片节点时，我们使用了 `createImageNode` 方法，它会将图片数据插入到文档中，并返回一个包含图片的 `wp:docPr` 节点。最后，我们将这个节点插入到 `pict` 标签中即可。