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

Question

I've tried using document.execCommand('copy') like this site but it didn't work (nothing got copied to my clipboard despite the fact that the console.log said it was successful). I also used the navigator.clipboard API but that didn't work for my jpg images, and here is its code:

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)})

The above code produces the following error:

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

Anyone know if I'm doing anything wrong or if it's even possible to copy images to clipboard without using external libraries?

Answer 1

Thanks Keith for the link to: convert image into blob using javascript

This is the solution I used for my app (it will only save images as png, as jpeg/jpg files keep giving me the DOMException error.

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)})
})