首先复制到剪切板,复制的是数据。图片看到的只是一种表现形式,图片可以用 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)
})
}