正文
复制文字 和图片是我们经常会使用到的需求，我们这篇 文章 主要介绍使用navigator.clipboard.wr IT e()来实现复制文字和图片。 不过 这个属性是需要考虑浏览器的兼容性的，可以参考 MDN
document.execCommand(& # 39;copy')
在很久之前我们是使用document.execCommand('copy')来实现复制文本的，但是现在mdn上已经将这个命令废弃了。
当一个 HT ML 文档切换到设计模式时，@H_ 304 _29@document 暴露&nbs p; execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。如果传入copy命令，那么就能实现复制的功能。
比如像下面这样
// 复制文字
copyText(link, cb) {
let input = document.createElement('textarea');
input.style.cssText = 'position: absolute; top: 0; left: 0; opacity: 0; z -i ndex: -10;';
input.value = link;
document.body.ap PE ndChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
if (typeof cb === 'function') {
cb();
}
}
Clipboard
Clipboard 接口实现了 Clipboard API，如果用户授予了相应的权限，其就能提供系统剪贴板的读写访问能力。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。
方法
Clipboard提供了以下方法，方便我们读取剪切板的内容。
read():从剪贴板读取数据（比如图片），返回一个 P rom ise 对象。在检索到数据后， PR omise 将兑现一个 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.h ei ght = 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_451_ 126 @ vue封装一个右键菜单组件详解(复制粘贴即可使用) 利用Vue3实现可复制表格的方法详解 vue中如何实现复制内容到剪切板详解 vue对象复制方式(深拷贝,多层对象拷贝方式在后面) vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的方法 vue粘贴复制功能的实现过程记录
总结
以上是 为你收集整理的 vue实现复制文字复制图片实例详解 全部内容，希望文章能够帮你解决 vue实现复制文字复制图片实例详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于vue实现复制文字复制图片实例详解的详细内容...