html2canvas截图背景色丢失,以及对iframe截图没有效果要怎么解决?

soulninu
  • 73

html2canvas截图方法:

const downloadImage1 = () => {
      // 获取要转换的元素
      const imgDom = document.getElementById('Screen1')
      // imgDom.domain = ''
      let a = document.createElement('a')
      html2canvas(imgDom, {
        useCORS: true, // 开启跨域设置,需要后台设置cors
        dpi: 150,
        scale: 2,
        allowTaint: true, // 允许跨域图片
        background: '#001426',
      }).then((canvas) => {
        console.log(canvas)
        let blob = dataURLToBlob(canvas.toDataURL('image/png'))
        setTimeout(() => {
          a.setAttribute('href', URL.createObjectURL(blob))
          a.setAttribute('download', `${name}.png`)
          a.click()
          URL.revokeObjectURL(blob)
        }, 3000)
      })
    }
  1. 截图成功但背景色为白色的html部分
    image.png
    项目截图:
    9MW)0_9GOHVHQ1I4_~@R14J.png
    代码截图:id: Screen1 获取的html部分是没有body的背景图的,但html2canvas背景色似乎并没有生效。
    5@WHZYA2OLZB%C$<code>4X</code>3~UY.png
  2. 截图成功iframehtml部分

            <iframe
                ref="iframe"
                :src="url"
                scrolling="auto"
                width="100%"
                height="100%"
                frameborder="0"
                :key="url"
                id="Screen1"
              ></iframe>

    项目截图:
    image.png
    代码截图:一片空白
    image.png

回复
阅读 252
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏