Unable to inline canvas contents, canvas is tainted

[majingxuan123]

Version of js-screen-shot

1.9.9-rc.2

Operating system and its version

Windows

Browser and its version

117.0.5938.152

Sandbox to reproduce

No response

What happened?

我的环境是
vue2 vant2 elementui
我发现在某个情况下 使用这个截图插件、会提示我一个错误：#1 227ms Unable to clone canvas as it is tainted

我在某个二维码组件内也有使用canvas
一开始我根据错误信息以为是这个canvas 和我页面上的二维码冲突了、
因为我发现先点截图、然后会报错、接着点击我的那个二维码组件（全屏黑色遮罩 中间一个普通的二维码） 我发现左上角有截图插件的工具栏？

但是我将页面上的组件删除依然如此

我之后输出了具体的错误信息 #1 227ms Unable to clone canvas as it is tainted DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source height is 0.

我怀疑对象可能尚未完全加载，因此返回零。

这是我的启动截图代码：
new ScreenShort({
loadCrossImg: true,
enableWebRtc: false, // 是否显示选项框
level: 99, // 层级级别
completeCallback: this.successFn,
closeCallback: this.closeFn
})

在另一个几乎完全相同 没有使用vant2ui的页面上可以正常使用

附上我的二维码组件 qrcodejs2 version：0.0.2

<template>
  <div>
    <div :id="id" :ref="id" style="width: 100%;height: 100%;" />
    <el-button v-if="showDownload" style="margin-top: 3px;margin-left: 30%" size="mini" type="primary" @click="downloadCode">{{ $t('download') }}</el-button>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'

export default {
  name: 'QrcodeCompoment',
  props: {
    showDownload: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      required: true
    },
    text: { // 后端返回的二维码地址
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 128
    },
    height: {
      type: Number,
      default: 128
    },
    colorDark: {
      type: String,
      default: '#000000'
    },
    colorLight: {
      type: String,
      default: '#ffffff'
    }
  },
  data() {
    return {
      qrcode: '',
      oldIds: [this.id]
    }
  },
  watch: {
    text(newText) {
      if (this.qrcode) { // 有新的二维码地址了，先把之前的清除掉
        this.oldIds.forEach((id) => {
          // 删除id为1的元素下的canvas
          const canvas = this.$refs[id]
          if (canvas) {
            // delete all children
            while (canvas.firstChild) {
              canvas.removeChild(canvas.firstChild)
            }
          }
        })
      }
      this.createQrcode(newText)
    },
    id() {
      this.oldIds.push(this.id)
    }
  },
  mounted() {
    if (this.text) {
      this.createQrcode()
    }
  },
  methods: {
    createQrcode(text) {
      this.$nextTick(() => {
        this.qrcode = new QRCode(this.$refs[this.id], {
          text: text || this.text, // 页面地址 ,如果页面需要参数传递请注意哈希模式#
          width: this.width, // 二维码宽度 （不支持100%）
          height: this.height, // 二维码高度 （不支持100%）
          colorDark: this.colorDark,
          colorLight: this.colorLight,
          correctLevel: QRCode.CorrectLevel.H
        })
      })
    },
    // 制作另一个二维码
    updateCode() {
      this.qrcode.makeCode('http://naver.com')
    },
    // 保存下载二维码
    downloadCode() {
      const refObj = this.$refs[ this.id]
      const canvas = refObj.querySelector('canvas')
      const imgurl = canvas.toDataURL('image/jpeg')
      const a = document.createElement('a')
      a.href = imgurl
      a.download = this.id + '-qrcode.png' // 图片名称
      a.click()
    }
  }
}
</script>

报错信息

#1 227ms Unable to clone canvas as it is tainted DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source height is 0.
    at DocumentCloner.createCanvasClone (webpack-internal:///./src/utils/screenShotPlugin.umd.js:767:709)
    at DocumentCloner.createElementClone (webpack-internal:///./src/utils/screenShotPlugin.umd.js:766:361)
    at DocumentCloner.cloneNode (webpack-internal:///./src/utils/screenShotPlugin.umd.js:767:3139)
    at DocumentCloner.appendChildNode (webpack-internal:///./src/utils/screenShotPlugin.umd.js:767:2278)
    at DocumentCloner.cloneChildNodes (webpack-internal:///./src/utils/screenShotPlugin.umd.js:767:2776)
    at DocumentCloner.cloneNode (webpack-internal:///./src/utils/screenShotPlugin.umd.js:767:3748)
    at DocumentCloner.appendChildNode (webpack-internal:///./src/utils/screenShotPlugin.umd.js:767:2278)
    at DocumentCloner.cloneChildNodes (webpack-internal:///./src/utils/screenShotPlugin.umd.js:767:2776)
    at DocumentCloner.cloneNode (webpack-internal:///./src/utils/screenShotPlugin.umd.js:767:3748)
    at new DocumentCloner (webpack-internal:///./src/utils/screenShotPlugin.umd.js:763:10763)

[likaia]

Hello @majingxuan123. Your feedback has been received, and you will be notified in the issue area when the problem is resolved.
你好 @majingxuan123，已收到你反馈的问题，问题解决后将在issue区域通知你。

[majingxuan123]

问题的原因是宽度为0
所以解决的方式是设置长宽
canvasWidth: 650
canvasHeight: 650

[majingxuan123]

Hello @majingxuan123. Your feedback has been received, and you will be notified in the issue area when the problem is resolved. 你好 @majingxuan123，已收到你反馈的问题，问题解决后将在issue区域通知你。

问题的原因是宽度为0
所以解决的方式是设置长宽，我已经知道问题所在了 感谢