html2canvas 截图生成base64 图片，

Question

问题：html2canvas 截图生成base64 图片，iframe 无法截图

问题描述：地图部分是一个 iframe 通过html2canvas 截图发现 地图部分为白色。
尝试 将地图部分和非地图部分 分别截图后再合并成一张图片。但是有层级关系。如果地图沾满全屏的话 ，组件就会被遮挡

合并代码。 是否还有其它方法 或者其它的插件可以解决这个问题吗

function mergeImage(base1, base2, pageSize, iframePostions) {
  return new Promise((resolve, reject) => {
    const canvas = document.createElement("canvas")
    canvas.width = pageSize.width
    canvas.height = pageSize.height
    const ctx: any = canvas.getContext("2d")

    const image = new Image() // MAP图片
    image.crossOrigin = "Anonymous" // 支持跨域图片
    image.onload = () => {
      ctx.drawImage(image, 0, 0, pageSize.width, pageSize.height)

      const image2 = new Image() // div图片
      image2.crossOrigin = "Anonymous" // 支持跨域图片
      image2.onload = () => {
        ctx.drawImage(image2, iframePostions.left, iframePostions.top, iframePostions.width, iframePostions.height)

        // 合并后的图片
        const base64 = canvas.toDataURL("image/png")
        resolve(base64)
      }
      image2.src = base2
    }
    image.src = base1
  })
}

Answer 1

http://t.csdnimg.cn/aySYa
看一下这个文章