js 如何实现复制图片到剪切板

Question

类似网页上这个右键复制图片功能

我的需求是有个按钮，点击了就复制了某张图片。

Answer 1

把图片画到隐藏的canvas上
通过canvas.toBlob获取blob对象，然后创建ClipboardItem

const clipboardItem = new ClipboardItem({'image/png': blob})

最后复制到粘贴板

navigator.clipboard.write([clipboardItem]);

如果能直接获取到二进制图片可以省略canvas的步骤。

看demo
https://codepen.io/hungtcs/pe...

Answer 2

这个是复制地址，至于为什么你会理解成复制图片呢？原因是很多程序对粘贴(ctrl + c) 做了处理，例如思否的编辑器，如果你粘贴了一个图片的链接就会尝试上传到服务器，并且显示为图片

所以你要处理粘贴事件，判断粘贴的是不是图片超链接，最后处理即可

Answer 3

试试 Clipboard.write() API？我没实际用过，目测可行。又，兼容性一般。

Answer 4

你去QQ复制一张图片，试一试粘贴到微信，再试一下粘贴到 word。

Answer 5

https://segmentfault.com/a/11...

Answer 6

首先复制到剪切板，复制的是数据。图片看到的只是一种表现形式，图片可以用 js 对象 File、Blob、DataURL(base64) 体现出来。

又看到 document.execCommand('copy') api 拷贝的是可编辑区域的选中内容，所以可以通过拷贝 base64 的形式来完成图片的拷贝

$('#btn').addEventListener('click', async (e) => {
    // 首先要拿到图片的 file 对象
    let file = inputFile.files[0]
    let base64 = await fileToDataURL(file)
    let isSuccess = createInputAndCopy(base64)
})

function createInputAndCopy (strValue) {
    let inputEle = document.createElement('input')
    inputEle.setAttribute('readonly', true)
    inputEle.setAttribute('value', strValue)
    document.body.appendChild(inputEle)
    // 选中
    inputEle.select()
    let isCopyed = document.execCommand('copy')
    // document.body.removeChild(inputEle)
    return isCopyed
}

function fileToDataURL (file) {
    let reader  = new FileReader()
    return new Promise((resolve, reject) => {
        reader.onload = (e) => {
            let base64 = e.target.result
            resolve(base64)
        }
        reader.readAsDataURL(file)
    })
}

Answer 7

能想到的就是期待clipboard API兼容吧 。。。