含有svg的dom节点转化为canvas

需求： 将plotly.js绘制的等值线图转化为canvas, 直接使用html2canvas转化时无法成功，因为html2canvas不能讲svg转化为canvas，需借助Canvg处理svg.

代码实现：

/**
 * 将指定ID的dom节点转化为canvas
 * @param targetID： string
 * @returns：canvas
 */
import html2canvas from 'html2canvas';
import { Canvg } from 'canvg';
export const svgToCanvas = async (targetID: string) => {
  return new Promise(async (resolve, reject) => {
    const targetDom = document.getElementById(targetID); //divReport为需要截取成图片的dom的id
    const svgElem = targetDom?.getElementsByTagName('svg');
    // 如果节点中含有svg元素，则将其分别转化为canvas
    if (svgElem) {
      Array.from(svgElem).forEach(async function (node, index) {
        const svg = node.outerHTML.trim();
        const parentNode = node?.parentNode;
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        // 使用Canvg将svg转化为canvas
        const v = await Canvg.from(ctx as CanvasRenderingContext2D, svg);
        v.start();
        canvas.style.position += 'absolute';
        canvas.style.left += 0;
        canvas.style.top += 0;
        if (parentNode) {
          parentNode.removeChild(node);
          parentNode.appendChild(canvas);
        }
      });
    }
    // 使用html2canvas将指定节点转化为canvas
    // targetDom 必须dom树中
    const canvasTexture = await html2canvas(targetDom as HTMLElement, {
      useCORS: true,
      height: 320,
      width: 490,
    });
    resolve(canvasTexture);
  });
};

存在问题：等值线图中的颜色条转化为canvas后不能正常显示，显示为黑色条，未知原因。