vue实现复制文字复制图片实例详解
导读:收集整理的这篇文章主要介绍了vue实现复制文字复制图片实例详解,觉得挺不错的,现在分享给大家,也给大家做个参考。 目录正文方法复制文本复制图片正文复制文字和图片是我们经常会使用到的需求,...
收集整理的这篇文章主要介绍了vue实现复制文字复制图片实例详解,觉得挺不错的,现在分享给大家,也给大家做个参考。 目录
- 正文
- 方法
- 复制文本
- 复制图片
正文
复制文字和图片是我们经常会使用到的需求,我们这篇文章主要介绍使用navigator.clipboard.wrITe()来实现复制文字和图片。不过这个属性是需要考虑浏览器的兼容性的,可以参考MDN
document.execCommand('copy')
在很久之前我们是使用document.execCommand('copy')来实现复制文本的,但是现在mdn上已经将这个命令废弃了。
当一个 HTML 文档切换到设计模式时,document
暴露 execCommand
方法,该方法允许运行命令来操纵可编辑内容区域的元素。如果传入copy命令,那么就能实现复制的功能。
比如像下面这样
// 复制文字 copyText(link, cb) { let input = document.createElement('textarea'); input.style.cssText = 'position: absolute; top: 0; left: 0; opacity: 0; z-index: -10; '; input.value = link; document.body.apPEndChild(input); input.select(); document.execCommand('copy'); document.body.removeChild(input); if (typeof cb === 'function') { cb(); } }
Clipboard
Clipboard
接口实现了 Clipboard API,如果用户授予了相应的权限,其就能提供系统剪贴板的读写访问能力。在 Web 应用程序中,Clipboard API 可用于实现剪切、复制和粘贴功能。
方法
Clipboard提供了以下方法,方便我们读取剪切板的内容。
- read():从剪贴板读取数据(比如图片),返回一个
Promise
对象。在检索到数据后,PRomise 将兑现一个ClipboardItem
对象的数组来提供剪切板数据。 - readText():从操作系统读取文本;返回一个
Promise
,在从剪切板中检索到文本后,promise 将兑现一个包含剪切板文本数据的DOMString
。 - write(): 写入任意数据至操作系统剪贴板。这是一个异步操作,在操作完成后,返回的 promise 的将被兑现。
- writeText(): 写入文本至操作系统剪贴板。返回一个
Promise
,在文本被完全写入剪切板后,返回的 promise 将被兑现。
复制文本
复制文本的方法很简单,就是使用navigator.clipboard.writeText()
方法。
具体代码实现如下:
copyTextToClipboard(text) { return new Promise((resolve, reject) => { navigator.clipboard.writeText(text).then( () => { resolve(true) } , () => { reject(new Error('复制失败')) } ) } )}
复制图片
复制图片主要用到navigator.clipboard.write()方法。 因为我们在页面中通常是要根据一个img元素复制图片,主要实现思路如下:
- 先将
img元素
转成base64
- 再将
base64
转成blob对象
- 根据
blob对象
new一个ClipboardItem
对象 - 最后再根据
navigator.clipboard.writeText()
将内容写入剪贴板中
具体代码实现如下:
// 图片元素转base64 getBase64Image(img) { let canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; let ctx = canvas.getContext('2d'); ctx?.drawImage(img, 0, 0, img.width, img.height); let dataURL = canvas.toDataURL('image/png'); return dataURL; } , // base64图片转为blob getBlobImage(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 } ); } , // 复制图片 copyImage(dom, cb) { let dataurl = this.getBase64Image(dom); let blob = this.getBlobImage(dataurl); navigator.clipboard.write([ new window.ClipboardItem({ [blob.type]: blob } ) ]).then(function() { if (typeof cb === 'function') { cb(); } } , function() { console.LOG('图片复制失败!'); } ); }
以上就是vue实现复制文字复制图片实例详解的详细内容,更多关于vue复制文字图片的资料请关注其它相关文章!
您可能感兴趣的文章:@H_732_126@- vue封装一个右键菜单组件详解(复制粘贴即可使用)
- 利用Vue3实现可复制表格的方法详解
- vue中如何实现复制内容到剪切板详解
- vue对象复制方式(深拷贝,多层对象拷贝方式在后面)
- vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的方法
- vue粘贴复制功能的实现过程记录
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: vue实现复制文字复制图片实例详解
本文地址: https://pptw.com/jishu/609314.html