字符串包含无效字符 - Firefox

问：

我遇到了一个奇怪的问题。它与将图像转换为画布有关。所以我可以在互联网上复制图像，并在粘贴时，我想从剪贴板获取数据并将其显示给用户，但是当我尝试将其粘贴到 firefox 上时，我得到“字符串包含无效字符”，之后当我再次尝试粘贴时，效果很好。对于 chrome，我目前正在使用 navigator.clipboard.read，但我也尝试过粘贴事件，它工作得很好，它第一次粘贴数据。 我正在使用 VueJS，这是我拥有的代码：

mounted() {
    window.addEventListener('paste', e => {
        if (!this.supportsReadNavigator) {
            this.handlePasteEvent(e)
        }
    })
},
created() {
    window.addEventListener('keydown', (e) => {
        // this.handleESC(e)
        if ((e.ctrlKey || e.metaKey) && e.key == 'v') {
            this.handlePasteFromClipboard(e)
        }
    });
},
methods: {
    async handlePasteFromClipboard() {
        if (navigator?.clipboard?.read) {
            this.supportsReadNavigator = true
            const data = await navigator.clipboard.read()
            const clipboardContent = data[0]
            const type = clipboardContent.types[0]
            if (type == 'image/png') {
                this?.$refs['clipboard-modal']?.showModal()
                const blob = await clipboardContent.getType('image/png')
                const url = window.URL.createObjectURL(blob)
                this.getDataBlob(url)
            }
        }
    },
    async handlePasteEvent(e) {
        if (e?.clipboardData?.items) {
            const data = e.clipboardData.items;
            const clipboardContent = data[0]
            const type = clipboardContent?.type

            if (clipboardContent.kind === "file" && type.indexOf("image") !== -1) {
                this?.$refs['clipboard-modal']?.showModal()
                const blob = clipboardContent.getAsFile();
                const url = window.URL.createObjectURL(blob)
                this.getDataBlob(url)
            } else if (clipboardContent.kind === "string" && clipboardContent.type === "text/html") {
                const htmlData = e.clipboardData.getData('text/html');
                
                if (!htmlData.includes('<img')) return

                const div = document.createElement('div')
                document.body.appendChild(div)
                div.innerHTML = htmlData

                const img = div.firstElementChild
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                img.crossOrigin = "anonymous"
                
                canvas.width = img?.width;
                canvas.height = img?.height;
                
                ctx.drawImage(img, 0, 0, img.width, img.height);
                document.body.appendChild(canvas)
                
                try {
                    const imageDataURL = await  canvas.toDataURL('image/png');
                    let blob = this.dataURLToBlob(imageDataURL)

                    this?.$refs['clipboard-modal']?.showModal()

                    this.clipboard_img = imageDataURL
                    this.clipboard_img_blob = await this.blobToFile(blob);
                } catch(e) {
                    console.log(e?.message);
                    this.$refs.show.showFlashError(e?.message || 'Something went wrong')
                    this.$nextTick(() => this?.$refs['clipboard-modal']?.hideModal())
                }

                div.style.display = 'none'
                canvas.style.display = 'none'
            }
        }
    },
}

如果你需要，我会提供更多信息。谢谢