vue点击复制图片剪切板
时间: 2023-09-14 19:14:32 浏览: 102
Vue实现剪贴板复制功能
这个问题属于技术问题,可以回答。
关于vue点击复制图片剪切板,你可以通过以下代码实现:
<!-- HTML代码 -->
<button @click="copyImage()">复制图片</button>
<!-- JS代码 -->
copyImage() {
// 获取图片元素
let img = document.querySelector('img')
// 创建一个临时的div元素
let tempDiv = document.createElement('div')
// 将图片添加到临时div中
tempDiv.appendChild(img.cloneNode())
// 将临时div中的图片转换为base64编码的字符串
let base64Str = tempDiv.innerHTML.replace(/^<img[^>]+data:image\/(png|jpg|jpeg);base64,/, '').replace(/\s*\/>$/, '')
// 将base64编码的字符串转换为blob对象
let blobObj = this.dataURLtoBlob(base64Str)
// 将blob对象存储到剪切板中
navigator.clipboard.write([
new ClipboardItem({
[blobObj.type]: blobObj
})
])
},
dataURLtoBlob(dataURL) {
let arr = dataURL.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
}
阅读全文