时间戳

首页 > 解决方案 > 有没有办法使用没有库的纯 javascript 将图像复制到剪贴板？

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

问题描述

我试过像这个网站一样使用 document.execCommand('copy') ，但它没有用（尽管 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.

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

标签： javascriptimageblobclipboard

解决方案

感谢 Keith 提供的链接：convert image into blob using javascript

这是我用于我的应用程序的解决方案（它只会将图像保存为 png，因为 jpeg/jpg 文件不断给我 DOMException 错误。

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

推荐阅读