html图片如何复制到剪贴板,记js复制图片到剪贴板的坑

故事背景，需要直接在页面上点击一键粘贴按钮，自动复制服务生成的图片到剪贴板方便业务一些粘贴发送给客户。

1、开始做法，使用原生的document.execCommand('copy')进行复制，代码如下。虽然也能实现了图片的复制，但粘贴的结果不是很理想，有些只能在微信上粘贴，钉钉、浏览器富文本上不能；有些是微信可以钉钉、富文本不行。总之就会出现有些黏贴不到的情况。

#原生js写法

const targetPic = new Image()

targetPic.onload = e => {

targetPic.setAttribute('contenteditable', true)

document.body.appendChild(targetPic)

const selection = window.getSelection()

const range = document.createRange()

range.selectNode(targetPic)

selection.removeAllRanges()

selection.addRange(range)

document.execCommand('copy')

targetPic.setAttribute('contenteditable', false)

document.body.removeChild(targetPic)

this.isuTip.success('复制成功')

this._recordUserBehavior(32)

this.dispatchEvent(new CustomEvent('has-send-quote', {bubbles: true, composed: true}))

this.cancel()

}

targetPic.src = targetUrl

2、然而需求就是要实现这样一个功能，无奈只能另外寻找法子。

回过头看看，浏览器是如何获取剪切板中的图片？

ocument.addEventListener('paste', function (event) {

var items = event.clipboardData && event.clipboardData.items;

var file = null;

if (items && items.length) {

// 检索剪切板items

for (var i = 0; i < items.length; i++) {

if (items[i].type.indexOf('image') !== -1) {

file = items[i].getAsFile();

break;

}

}

}

// 此时file就是剪切板中的图片文件

});

直接上代码如上所示，就是直接从clipboardData.items 中获取图片文件进行处理的(经过调试发现，原先的方法复制出来的图片，浏览器识别为html格式不是文件格式)。那么直接往clipboardData.items写入图片文件不就可以了？查询了一下，果然有对应的api。使用如下，果然行的通。

const data = await fetch(`/img.img1.png`)

// const data = await fetch('/management/attachments/63848472471ea1095093874a498d25dba07d478a.do')

const blob = await data.blob()

await navigator.clipboard.write([

// eslint-disable-next-line no-undef

new ClipboardItem({

[blob.type]: blob

})

])

console.log('Fetched image copied.')

} catch (err) {

console.error(err.name, err.message)

注： 浏览器为了安全，navigator.clipboard必须在https下才能使用