有没有办法用纯javascript将图像复制到剪贴板而不使用库？

我尝试过像document.execCommand（'copy'）那样使用document.execCommand，但没有成功（尽管console.log说它成功了，但没有任何东西被复制到我的剪贴板）。我还使用了navigator.clipboard API，但这对我的jpg图像不起作用，下面是它的代码：

navigator.clipboard.write(
[
    new ClipboardItem({
        'image/jpeg': new Blob( ['media/anime_0.jpg'],{type:'image/jpeg'} )
    })
])
.then(e=>{console.log('Copied to clipboard')})
.catch(e=>{console.log(e)})

上述代码产生以下错误：

DOMException: Sanitized MIME type image/jpeg not supported on write.

---

有人知道我是否做错了什么，或者是否有可能在不使用外部库的情况下将图像复制到剪贴板？

感谢Keith提供以下链接：

这是我在我的应用程序中使用的解决方案（它只将图像保存为png，因为jpeg/jpg文件不断给我带来DomeException错误）

const img = new Image
const c = document.createElement('canvas')
const ctx = c.getContext('2d')

function setCanvasImage(path,func){
    img.onload = function(){
        c.width = this.naturalWidth
        c.height = this.naturalHeight
        ctx.drawImage(this,0,0)
        c.toBlob(blob=>{
            func(blob)
        },'image/png')
    }
    img.src = path
}

setCanvasImage('media/anime_0.jpg',(imgBlob)=>{
    console.log('doing it!')
    navigator.clipboard.write(
        [
            new ClipboardItem({'image/png': imgBlob})
        ]
    )
    .then(e=>{console.log('Image copied to clipboard')})
    .catch(e=>{console.log(e)})
})

---

非常确定

Blob

实际上应该包含原始图像数据（可能是通过Fetch API加载的），而不仅仅是一个URL。您能指定“原始图像数据”是什么意思吗？图像的base64/UInt8数组形式会被视为原始图像数据吗？图像到blob->+1，写入画布并从中提取PNG是我认为最好的路径，应该在Chrome和Safari中都能工作（他们都支持navigator.clipboard中的PNG）。对于另一个代码示例，下面是显示相关逻辑的（将图像读/写到画布，并通过navigator.clipboard进行读/写）。