html2canvas 源码解读 #

// element 为目标绘制节点，options为可选参数
html2canvas(element[,options]);

import html2canvas from 'html2canvas'

const options = {}

// 输入dom节点，返回包含dom视图内容的canvas对象
html2canvas(dom, options).then(function (canvas) {
  document.body.appendChild(canvas)
})

class ElementContainer {
  // 所有节点上的样式经过转换计算之后的信息
  readonly styles: CSSParsedDeclaration;
  // 节点的文本节点信息, 包括文本内容和其他属性
  readonly textNodes: TextContainer[] = [];
  // 当前节点的子节点
  readonly elements: ElementContainer[] = [];
  // 当前节点的位置信息（宽/高、横/纵坐标）
  bounds: Bounds;
  // 用来决定如何渲染的标志
  flags = 0;
  ...
}

const html2canvas = (
  element: HTMLElement,
  options: Partial<Options> = {}
): Promise<HTMLCanvasElement> => {
  return renderElement(element, options)
}

const renderElement = async (
  element: HTMLElement,
  opts: Partial<Options>
): Promise<HTMLCanvasElement> => {
  const renderOptions = { ...defaultOptions, ...opts } // 合并默认配置和用户配置
  if (foreignObjectRendering) {
    // foreignObject渲染
    const renderer = new ForeignObjectRenderer(context, renderOptions)
    return await renderer.render(clonedElement)
  } else {
    // canvas渲染
    const root = parseTree(clonedElement) // 解析用户传入的DOM元素（为了不影响原始的DOM，实际上会克隆一个新的DOM元素），获取节点信息
    const renderer = new CanvasRenderer(renderOptions) // 根据渲染的配置数据生成canvasRenderer实例
    return await renderer.render(root) // canvasRenderer实例会根据解析到的节点信息，依据浏览器渲染层叠内容的规则，将DOM元素内容渲染到canvas中
  }
}

const parseTree = (context: Context, element: HTMLElement): ElementContainer => {
  // 根据不同的元素创建不同的ElementContainer获取元素节点信息
  const container = createContainer(context, element)
  // 用来决定如何渲染的标志
  container.flags |= FLAGS.CREATES_REAL_STACKING_CONTEXT
  // 递归dom元素解析节点信息
  parseNodeTree(context, element, container, container)
  return container
}

async render(element: ElementContainer): Promise<HTMLCanvasElement> {
  // 解析层叠信息
  const stack = parseStackingContexts(element);
  // 渲染层叠内容
  await this.renderStack(stack);
  return this.canvas;
}

const parseStackingContexts = (container: ElementContainer): StackingContext => {
  // 解析层叠信息
  const paintContainer = new ElementPaint(container, null)
  // 生成指定的层叠数据
  const root = new StackingContext(paintContainer)
  const listItems: ElementPaint[] = []
  parseStackTree(paintContainer, root, root, listItems)
  processListItems(paintContainer.container, listItems)
  return root
}

   // 当前元素
   element: ElementPaint
   // z-index 为负, 形成层叠上下文
   negativeZIndex: StackingContext[];
   // z-index 为 0、auto、transform 或 opacity, 形成层叠上下文
   zeroOrAutoZIndexOrTransformedOrOpacity: StackingContext[];
   // 定位和 z-index 形成的层叠上下文
   positiveZIndex: StackingContext[];
   // 没有定位和 float 形成的层叠上下文
   nonPositionedFloats: StackingContext[];
   // 没有定位和内联形成的层叠上下文
   nonPositionedInlineLevel: StackingContext[];
   // 内联节点
   inlineLevel: ElementPaint[];
   // 不是内联的节点
   nonInlineLevel: ElementPaint[];

async renderStackContent(stack: StackingContext) {
    // 1. 最底层是background/border
    await this.renderNodeBackgroundAndBorders(stack.element);

    // 2. 第二层是负z-index
    for (const child of stack.negativeZIndex) {
        await this.renderStack(child);
    }

    // 3. 第三层是block块状盒子
    await this.renderNodeContent(stack.element);

    for (const child of stack.nonInlineLevel) {
        await this.renderNode(child);
    }

    // 4. 第四层是float浮动盒子
    for (const child of stack.nonPositionedFloats) {
        await this.renderStack(child);
    }

    // 5. 第五层是inline/inline-block水平盒子
    for (const child of stack.nonPositionedInlineLevel) {
        await this.renderStack(child);
    }
    for (const child of stack.inlineLevel) {
        await this.renderNode(child);
    }

    // 6. 第六层是以下三种：
    // (1) ‘z-index: auto’或‘z-index: 0’。
    // (2) ‘transform: none’
    // (3) opacity小于1
    for (const child of stack.zeroOrAutoZIndexOrTransformedOrOpacity) {
        await this.renderStack(child);
    }

    // 7. 第七层是正z-index
    for (const child of stack.positiveZIndex) {
        await this.renderStack(child);
    }
}

async render(element: HTMLElement): Promise<HTMLCanvasElement> {
    // 将node节点通过foreignObject包裹转换为svg
    const svg = createForeignObjectSVG(
        this.options.width * this.options.scale,
        this.options.height * this.options.scale,
        this.options.scale,
        this.options.scale,
        element
    );
    // 将node节点通过 XMLSerializer().serializeToString() 序列化为字符串
    const img = await loadSerializedSVG(svg);
    this.ctx.drawImage(img, -this.options.x * this.options.scale, -this.options.y * this.options.scale);
    return this.canvas;
}

const createForeignObjectSVG = (
  width: number,
  height: number,
  x: number,
  y: number,
  node: Node
): SVGForeignObjectElement => {
  const xmlns = 'http://www.w3.org/2000/svg'
  const svg = document.createElementNS(xmlns, 'svg')
  const foreignObject = document.createElementNS(xmlns, 'foreignObject')
  svg.setAttributeNS(null, 'width', width.toString())
  svg.setAttributeNS(null, 'height', height.toString())

  foreignObject.setAttributeNS(null, 'width', '100%')
  foreignObject.setAttributeNS(null, 'height', '100%')
  foreignObject.setAttributeNS(null, 'x', x.toString())
  foreignObject.setAttributeNS(null, 'y', y.toString())
  foreignObject.setAttributeNS(null, 'externalResourcesRequired', 'true')
  svg.appendChild(foreignObject)

  foreignObject.appendChild(node)

  return svg
}