字符串包含无效字符 - Firefox

Question

我遇到了一个奇怪的问题。它与将图像转换为画布有关。因此，我可以在互联网上复制图像并在粘贴时我想从剪贴板获取数据并将其显示给用户，但是当我尝试将其粘贴到 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'
            }
        }
    },
}

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

Answer 1

一位志同道合的朋友想出了一个解决方案。这是适合我的代码：https://codesandbox.io/s/zealous-wozniak-79z2ks?file=/src/components/HelloWorld.vue:271-356