@syzlm/ofdparser 0.0.1

package/src/ofd/render.ts

@@ -0,0 +1,393 @@
+import VaildOFDError from '../errors/OFDErrors';
+import {
+  ResultData,
+  Page,
+  LayerPageBlock,
+  Signatures,
+  // Res
+} from '../core/ofd-core/index.d';
+// import ParseFile from '../lib/ParseFile';
+import { parseColor, getDrawParam, setStyle, formatSTBox, pageZIndex } from './ofd-utils';
+import ConverterDpi from './ConverterDpi';
+import renderTextObject from './svg-text';
+import renderPathObject from './svg-path';
+import renderImageObject, { renderBitImage } from './svg-image';
+
+/**
+ * 渲染OFD
+ * @param data OFD元数据
+ * @param zip 解压
+ * @param defaultWall 最大宽度
+ * @param isSeal 是否是签章渲染
+ */
+export const OFDRender = (data: ResultData, defaultWidth?: number, isSeal = false) => {
+  // 优化 当OFD文件不存在 PageArea，获取Pages最大的PhysicalBox
+  if (data.PageArea && !data.PageArea.PhysicalBox && !data.Pages) {
+    throw new VaildOFDError(9999, 'OFD 绘制区域坐标为空！');
+  }
+  if (!data.Pages || !data.Pages.length) {
+    throw new VaildOFDError(9999, 'OFD Pages为空，不绘制！');
+  }
+  const { PhysicalBox } = data.PageArea || { PhysicalBox: '' };
+
+  // 确定绘制区域
+  // const { width } = formatSTBox(PhysicalBox);
+  const div = document.createElement('div');
+  // 渲染签章
+  if (isSeal) {
+    setStyle(div, {
+      position: 'relative',
+      overflow: 'hidden',
+    });
+  }
+  // 非签章渲染
+  if (!isSeal) {
+    setStyle(div, {
+      position: 'relative',
+      overflow: 'hidden',
+      // 'min-width': `${width}px`,
+      // 'min-height': `${height}px`,
+      background: '#fff',
+    });
+  }
+
+  // const pageDivs: any[] = [];
+  let columnTop = 0;
+  let maxWidth = 0;
+  // 传入宽高容器限制，需要计算缩放比例
+  let scale = 1;
+  data.Pages.forEach(item => {
+    const { Area, Template, PageID } = item;
+    /**
+     *
+     * 定义该页页面区域的大小和位置,仅对该页有效。该节点不出现时。
+     * 则使用模板页中的定义,如果模板页不存在或模板页中没有定义页面区域,
+     * 则使用文件CommonData中的定义
+     */
+    if (!Area || !Area.PhysicalBox) {
+      // Page 未确定起点坐标不绘制
+      // 查找 Template
+      if ((!Template || !data?.Tpls || !data.Tpls[Template.TemplateID]) && !PhysicalBox) {
+        return;
+      }
+    }
+    // 根据规则查找 页面坐标
+    let PageBox = Area.PhysicalBox;
+
+    if (!PageBox && Template?.TemplateID && data.Tpls && data.Tpls[Template.TemplateID]) {
+      PageBox = data.Tpls[Template.TemplateID][0].Area.PhysicalBox;
+    }
+    if (!PageBox) {
+      PageBox = PhysicalBox;
+    }
+
+    const [, , wh] = PageBox.split(' ');
+    if (defaultWidth && wh) {
+      scale = Number((defaultWidth / Number(wh)).toFixed(1));
+    }
+
+    if (!isSeal) {
+      // 防止签章多次渲染变小
+      ConverterDpi.setInitScale(scale);
+    }
+
+    // 设置缩放比例
+    ConverterDpi.setScale(scale, isSeal);
+
+    const {
+      left: pageLeft,
+      // top: pageTop,
+      width: pageWidth,
+      height: pageHeight,
+    } = formatSTBox(PageBox);
+    //
+    let {
+      width: physicalWidth,
+      //  height: physicalHeight
+    } = formatSTBox(PhysicalBox);
+
+    const pageDiv = document.createElement('div');
+    // const pHeight = pageHeight > physicalHeight ? pageHeight : physicalHeight;
+    const pHeight = pageHeight;
+    const pWidth = pageWidth > physicalWidth ? pageWidth : physicalWidth;
+    setStyle(pageDiv, {
+      overflow: 'hidden',
+      position: 'absolute',
+      width: `${pWidth}px`,
+      top: `${columnTop}px`,
+      left: `${pageLeft}px`,
+      height: `${pHeight}px`,
+    });
+    columnTop += pHeight;
+    // 使用Page最大宽度
+    if (pWidth > maxWidth) {
+      maxWidth = pWidth;
+      div.style.width = `${maxWidth}px`;
+    }
+
+    // page渲染
+    renderPage(item, data, pageDiv);
+    // 判断是否有签章并渲染
+    if (data.PageSignatures?.[PageID]) {
+      renderSignature(data.PageSignatures[PageID], pageDiv);
+    }
+    div.appendChild(pageDiv);
+    if (Template && Template.TemplateID) {
+      // 查找是否有背景
+      const ZOrder = String(Template.ZOrder || 'Background') as
+        | 'Background'
+        | 'Body'
+        | 'Foreground';
+      if (data.Tpls && data.Tpls[Template.TemplateID]) {
+        const TplsDivs = renderTplsPage(
+          data.Tpls[Template.TemplateID],
+          data,
+          pageZIndex[ZOrder] - 1,
+        ) as HTMLElement[];
+        if (TplsDivs?.length) {
+          TplsDivs.forEach(divItem => {
+            pageDiv.appendChild(divItem);
+          });
+        }
+      }
+    }
+  });
+  div.style.height = `${columnTop}px`;
+
+  return div;
+};
+
+/**
+ * 序列化绘制 Template pages
+ * @param pages
+ * @param data
+ * @param zIndex
+ * @param pageDivs
+ */
+export const renderTplsPage = (pages: Page[], data: ResultData, zIndex: number) => {
+  const result: any[] = [];
+  if (pages?.length) {
+    pages.forEach(item => {
+      const { Area } = item;
+      // if (!Area || !Area.PhysicalBox) {
+      //   // Template Page 未确定起点坐标不绘制
+      //   return;
+      // }
+      const {
+        left: tplLeft,
+        top: tplTop,
+        width: tplWidth,
+        height: tplHeight,
+      } = formatSTBox(Area.PhysicalBox);
+      const div = document.createElement('div');
+
+      setStyle(div, {
+        overflow: 'hidden',
+        position: 'absolute',
+        width: tplWidth ? `${tplWidth}px` : '100%',
+        top: `${tplTop}px`,
+        left: `${tplLeft}px`,
+        height: tplHeight ? `${tplHeight}px` : '100%',
+        'z-index': zIndex,
+      });
+
+      renderPage(item, data, div);
+      result.push(div);
+    });
+  }
+  return result;
+};
+
+export const renderPage = (page: Page, data: ResultData, content?: HTMLElement) => {
+  const { Area, Content: PageContent, Annot } = page;
+  const {
+    left: pageLeft,
+    top: pageTop,
+    width: pageWidth,
+    height: pageHeight,
+  } = formatSTBox(Area.PhysicalBox);
+  const pageContents: any[] = [];
+
+  let drawFillColor: string = '';
+  let drawStrokeColor: string = '';
+  let drawLineWidth: number = 2;
+
+  if (PageContent?.length) {
+    PageContent.forEach(item => {
+      const { Type = 'Body', PageBlock, DrawParam: drawParam } = item;
+      const ZIndex = pageZIndex[Type as 'Background' | 'Body' | 'Foreground'];
+      if (drawParam && getDrawParam(data.Res, drawParam)) {
+        let currentDrawParam = getDrawParam(data.Res, drawParam);
+        if (currentDrawParam?.Relative) {
+          currentDrawParam = getDrawParam(data.Res, currentDrawParam['Relative']);
+        }
+        if (currentDrawParam?.FillColor && currentDrawParam?.FillColor?.Value) {
+          drawFillColor = parseColor(currentDrawParam.FillColor['Value']);
+        }
+        if (currentDrawParam?.StrokeColor && currentDrawParam?.StrokeColor?.Value) {
+          drawStrokeColor = parseColor(currentDrawParam['StrokeColor']['Value']);
+        }
+        if (currentDrawParam?.LineWidth) {
+          drawLineWidth = Number(currentDrawParam?.LineWidth) > 0 ? 2 : 1;
+        }
+      }
+      if (PageBlock?.length) {
+        const div = document.createElement('div');
+
+        setStyle(div, {
+          // overflow: 'hidden',
+          position: 'absolute',
+          width: pageWidth ? `${pageWidth}px` : '100%',
+          top: `${pageTop}px`,
+          left: `${pageLeft}px`,
+          height: pageHeight ? `${pageHeight}px` : '100%',
+          'z-index': ZIndex,
+        });
+        PageBlock.forEach(item => {
+          const { Type } = item;
+
+          if (Type === 'TextObject') {
+            renderTextObject(
+              item as LayerPageBlock & { [k: string]: unknown },
+              data,
+              div,
+              drawFillColor,
+              drawStrokeColor,
+            );
+          }
+          if (Type === 'PathObject') {
+            renderPathObject(
+              item as LayerPageBlock & { [k: string]: unknown },
+              data,
+              div,
+              drawLineWidth,
+              // 线条填充颜色去除，防止签章纯色
+              '',
+              drawStrokeColor,
+            );
+          }
+          if (Type === 'ImageObject') {
+            renderImageObject(item as LayerPageBlock & { [k: string]: unknown }, data, div);
+          }
+        });
+        if (content) {
+          // Tpls 插入节点
+          content.appendChild(div);
+        } else {
+          pageContents.push(div);
+        }
+      }
+    });
+  }
+  /**
+   * 注释文件类型
+   * 标准文档 表62
+   * Watermark：水印
+   * Stamp：签章
+   */
+  if (
+    Annot &&
+    (Annot.Subtype === 'Watermark' ||
+      Annot.Type === 'Watermark' ||
+      Annot.Subtype === 'Stamp' ||
+      Annot.Type === 'Stamp') &&
+    Annot.Appearance?.length
+  ) {
+    Annot.Appearance.forEach(aItem => {
+      if (aItem.PageBlock?.length) {
+        const annotPageBlock = aItem.PageBlock as LayerPageBlock[];
+        const annotDiv = document.createElement('div');
+        const {
+          left: annotPageLeft,
+          top: annotPageTop,
+          width: annotPageWidth,
+          height: annotPageHeight,
+        } = formatSTBox(aItem.Boundary);
+        setStyle(annotDiv, {
+          overflow: 'hidden',
+          position: 'absolute',
+          width: annotPageWidth ? `${annotPageWidth}px` : '100%',
+          top: `${annotPageTop}px`,
+          left: `${annotPageLeft}px`,
+          height: annotPageHeight ? `${annotPageHeight}px` : '100%',
+          'z-index': pageZIndex[Annot.Type || Annot.Subtype || 'WatermarkAnnot'],
+        });
+        annotPageBlock.forEach(item => {
+          const { Type } = item;
+          if (Type === 'TextObject') {
+            renderTextObject(
+              item as LayerPageBlock & { [k: string]: unknown },
+              data,
+              annotDiv,
+              drawFillColor,
+              drawStrokeColor,
+            );
+          }
+          if (Type === 'PathObject') {
+            renderPathObject(
+              item as LayerPageBlock & { [k: string]: unknown },
+              data,
+              annotDiv,
+              drawLineWidth,
+              drawFillColor,
+              drawStrokeColor,
+            );
+          }
+          if (Type === 'ImageObject') {
+            renderImageObject(item as LayerPageBlock & { [k: string]: unknown }, data, annotDiv);
+          }
+        });
+        if (content) {
+          content.appendChild(annotDiv);
+        } else {
+          pageContents.push(annotDiv);
+        }
+      }
+    });
+  }
+  return pageContents;
+};
+
+/**
+ * 格式化渲染签名
+ * @param signedInfo
+ * @param content
+ */
+const renderSignature = (signedInfo: Signatures[], content: HTMLElement) => {
+  // const div = document.createElement('div');
+  // setStyle(div, {
+  //   overflow: 'hidden',
+  //   position: 'absolute',
+  //   width: '100%',
+  //   top: 0,
+  //   left: 0,
+  //   height: '100%',
+  //   'z-index': 99
+  // });
+  signedInfo.forEach(item => {
+    const pictureInfo = item?.Signature?.SignedInfo?.Seal?.picture;
+    // 获取签章信息
+    if (pictureInfo && item?.Signature?.SignedInfo?.StampAnnot?.length) {
+      const StampAnnot = item.Signature.SignedInfo.StampAnnot;
+      StampAnnot.forEach(cItem => {
+        if (cItem?.Boundary) {
+          renderBitImage(
+            pictureInfo as {
+              type: string;
+              data: Uint8Array;
+              width: string;
+              height: string;
+            },
+            cItem,
+            content,
+          );
+        }
+      });
+    }
+  });
+
+  // if (content) {
+  //   content.appendChild(div);
+  // }
+  // return div;
+};

package/src/ofd/svg-image.ts

@@ -0,0 +1,318 @@
+// import { xml2js } from 'xml-js';
+import JSZip from 'jszip';
+import parseOfd from './parse-ofd';
+// @ts-ignore
+import { Jbig2Image } from '../lib/jbig/jbig2.js';
+
+import {
+  ResultData,
+  LayerPageBlock,
+  StampAnnot
+} from '../core/ofd-core/index.d';
+import OFDErrors from '../errors/OFDErrors';
+
+import {
+  formatSTBox,
+  getMultiMedia,
+  converterDpi,
+  setStyle,
+  drawBMPImage
+} from './ofd-utils';
+
+interface PictureInfo {
+  type: string;
+  data: Uint8Array;
+  width: string;
+  height: string;
+}
+
+/**
+ * uint8array 转base64
+ * @param u8Arr
+ * @returns
+ */
+function uint8arrayToBase64(u8Arr: Uint8Array) {
+  let CHUNK_SIZE = 0x8000; //arbitrary number
+  let index = 0;
+  let length = u8Arr.length;
+  let result = '';
+  let slice;
+  while (index < length) {
+    slice = u8Arr.subarray(index, Math.min(index + CHUNK_SIZE, length));
+    // @ts-ignore
+    result += String.fromCharCode.apply(null, slice);
+    index += CHUNK_SIZE;
+  }
+
+  return window.btoa(result);
+}
+
+const renderImageObject = async (
+  imageObject: LayerPageBlock & { [k: string]: any },
+  data: ResultData,
+  content: HTMLElement,
+  isStampAnnot?: boolean,
+  StampId?: string,
+  PageRef?: string,
+  compositeObjectCTM?: any
+) => {
+  const { Boundary, ResourceID, CTM } = imageObject;
+  const media = getMultiMedia(data.Res, ResourceID);
+  let left = 0,
+    top = 0,
+    width = 0,
+    height = 0;
+  if (Boundary) {
+    let boundary = formatSTBox(Boundary);
+    left = boundary.left;
+    top = boundary.top;
+    width = boundary.width;
+    height = boundary.height;
+  }
+  if (media && media.Path) {
+    // 获取图片格式
+    let mime = 'jpeg';
+    mime = media.Path.replace(/.*\.(.*)$/, '$1');
+    if (/jb2|bmp|gbig2/i.test(mime)) {
+      renderBitImage(
+        {
+          type: mime,
+          // @ts-ignore
+          data: data.OFDElements[media.Path],
+          width: String(width),
+          height: String(height)
+        },
+        imageObject,
+        content
+      );
+      return;
+    }
+    const baseStr = data.OFDElements[media.Path] as string;
+    if (!baseStr) {
+      return false;
+    }
+    const imgSrc = `data:image/${mime};base64,` + baseStr;
+
+    // const imgSrc = ParseFile.parseImageFromZip(media as { Path: string });
+    if (imgSrc) {
+      const domImg = new Image();
+      domImg.src = imgSrc;
+      domImg.onload = () => {
+        const svg = document.createElementNS(
+          'http://www.w3.org/2000/svg',
+          'svg'
+        );
+        const img = document.createElementNS(
+          'http://www.w3.org/2000/svg',
+          'image'
+        );
+        if (isStampAnnot) {
+          setStyle(svg, {
+            viewbox: `0 0 ${width} ${height}`,
+            name: 'seal_img_div',
+            'data-signature-id': StampId || '',
+            'data-page-ref': PageRef || ''
+          });
+          setStyle(img, {
+            preserveAspectRatio: 'none slice'
+          });
+        }
+
+        img.setAttribute('xlink:href', imgSrc);
+        img.href.baseVal = imgSrc;
+
+        img.setAttribute('width', `100%`);
+
+        let transform = '';
+        if (CTM) {
+          const [a, b, c, d, e, f] = CTM.split(' ').filter(Boolean);
+          if (a && b && c && d) {
+            const domWidth = converterDpi(a) / width;
+
+            transform = `matrix(${domWidth} ${converterDpi(b) / width} ${
+              converterDpi(c) / height
+            } ${
+              domImg.height < domImg.width
+                ? converterDpi(d) / height
+                : domWidth / (domImg.width / domImg.height)
+            } ${converterDpi(e)} ${converterDpi(f)})`;
+          }
+        }
+        if (compositeObjectCTM) {
+          transform = `${transform} matrix(${compositeObjectCTM.a} ${
+            compositeObjectCTM.b
+          } ${compositeObjectCTM.c} ${compositeObjectCTM.d} ${converterDpi(
+            compositeObjectCTM.e
+          )} ${converterDpi(compositeObjectCTM.f)})`;
+        }
+        img.setAttribute('transform', transform);
+
+        svg.appendChild(img);
+
+        // if (clip) {
+        //   clip = converterBox(clip);
+        //   c = `clip: rect(${clip.y}px, ${clip.w + clip.x}px, ${
+        //     clip.h + clip.y
+        //   }px, ${clip.x}px)`;
+        // }
+
+        if (compositeObjectCTM) {
+          const a = compositeObjectCTM.a;
+          const b = compositeObjectCTM.b;
+          const c = compositeObjectCTM.c;
+          const d = compositeObjectCTM.d;
+          const sx =
+            a > 0
+              ? Math.sign(a) * Math.sqrt(a * a + c * c)
+              : Math.sqrt(a * a + c * c);
+          const sy =
+            d > 0
+              ? Math.sign(d) * Math.sqrt(b * b + d * d)
+              : Math.sqrt(b * b + d * d);
+          const angel = Math.atan2(-b, d);
+          if (!(angel == 0 && a != 0 && d == 1)) {
+            top *= sy;
+            left *= sx;
+          }
+        }
+        svg.setAttribute(
+          'style',
+          `cursor: pointer; overflow: visible; position: absolute; left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px; `
+        );
+        if (content) {
+          content.appendChild(svg);
+        }
+      };
+    }
+
+    // return svg;
+  }
+};
+
+export const renderBitImage = (
+  pictureInfo: PictureInfo,
+  Box: StampAnnot,
+  content: HTMLElement
+) => {
+  if (!Box.Boundary) return;
+  const { type, data } = pictureInfo;
+  const {
+    left,
+    top,
+    width: boundaryWidth,
+    height: boundaryHeight
+  } = formatSTBox(Box.Boundary);
+
+  if (
+    data &&
+    (type.toLocaleLowerCase() === 'png' || /gif|png|jpeg|bmp|jpg/i.test(type))
+  ) {
+    const img = document.createElement('img');
+    let imgSrc =
+      `data:image/${type.toLocaleLowerCase()};base64,` +
+      // @ts-ignore
+      uint8arrayToBase64(data);
+    if (type.toLocaleLowerCase() === 'bmp') {
+      // 使用canvas转换图片格式
+      drawBMPImage(imgSrc).then(r => {
+        if (r) {
+          setStyle(img, {
+            left: `${left}px`,
+            top: `${top}px`,
+            width: `${boundaryWidth}px`,
+            height: `${boundaryHeight}px`,
+            position: 'absolute',
+            'z-index': '9'
+          });
+          img.setAttribute('src', r);
+          content.appendChild(img);
+        }
+      });
+
+      return;
+    }
+
+    setStyle(img, {
+      left: `${left}px`,
+      top: `${top}px`,
+      width: `${boundaryWidth}px`,
+      height: `${boundaryHeight}px`,
+      position: 'absolute',
+      'z-index': '9'
+    });
+
+    img.setAttribute('src', imgSrc);
+    content.appendChild(img);
+    return;
+  }
+  // OFD格式签章
+  if (/ofd/i.test(type)) {
+    // @ts-ignore
+    const baseStr = String.fromCharCode.apply(null, data);
+    const zip = new JSZip();
+    zip
+      .loadAsync(baseStr)
+      .then(r => {
+        const signedOfd = r as any;
+        if (signedOfd.files) {
+          const wh = pictureInfo.width;
+          parseOfd(signedOfd.files, zip, Number(wh), undefined, true).then(
+            res => {
+              const div = document.createElement('div');
+              setStyle(div, {
+                left: `${left}px`,
+                top: `${top}px`,
+                width: `${boundaryWidth}px`,
+                height: `${boundaryHeight}px`,
+                position: 'absolute',
+                overflow: 'hidden',
+                'z-index': '9'
+              });
+              // 清空 container 防止xml重复渲染
+              div.innerHTML = '';
+              div.appendChild(res as HTMLElement);
+              if (content) {
+                content.appendChild(div);
+              }
+            }
+          );
+        } else {
+          console.error('渲染OFD类型签章错误！！');
+        }
+      })
+      .catch(err => new OFDErrors(500, err.message || 'OFD解析失败'));
+    return;
+  }
+  if (data && (/gbig2/i.test(type) || /jb2/i.test(type))) {
+    let jbig2 = new Jbig2Image();
+
+    const imgData = jbig2.parse(data);
+    if (imgData) {
+      const arr = new Uint8ClampedArray(4 * jbig2.width * jbig2.height);
+      for (let i = 0; i < imgData.length; i++) {
+        arr[4 * i] = imgData[i];
+        arr[4 * i + 1] = imgData[i];
+        arr[4 * i + 2] = imgData[i];
+        arr[4 * i + 3] = 255;
+      }
+      let bitImageData = new ImageData(arr, jbig2.width, jbig2.height);
+      const devRatio = window.devicePixelRatio || 1;
+
+      const canvas = document.createElement('canvas');
+      canvas.width = jbig2.width * devRatio;
+      canvas.height = jbig2.height * devRatio;
+      const context = canvas.getContext('2d') as CanvasRenderingContext2D;
+
+      context.putImageData(bitImageData, 0, 0, 0, 0, jbig2.width, jbig2.height);
+      canvas.setAttribute(
+        'style',
+        `left: ${left}px; top: ${top}px; width: ${boundaryWidth}px; height: ${boundaryHeight}px;`
+      );
+      canvas.style.position = 'absolute';
+      content.appendChild(canvas);
+      return canvas;
+    }
+  }
+};
+
+export default renderImageObject;