javascriptimageblobclipboard

Is there any way to copy image to clipboard with pure javascript without libraries?


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?


Solution

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