使用方式
基于Clipboard API的方法是通过将目标内容作为参数，调用方法后将内容拷贝到剪贴板。
但从文档得出，
document.execCommand(‘copy’)方法拷贝的是当前页面选中的内容，也就是拷贝用鼠标/触摸/调用js某些方法等方式在页面选中(不论是文本还是图片)的内容，并非使用传参的方式。
// 选中页面内容后执行
document.execCommand('copy');
关于复制所用到的基础API已梳理完毕，下面将从推荐方法和向下兼容的方法两方面来分别详细说明一下复制文本和复制图片所需要的具体方法。
推荐方法
下面将分别介绍使用Clipboard API提供的writeText和write实现文本和图片复制的具体方法。
推荐方法适用于打开该页面的浏览器比较新且底层有提供权限的场景。
复制文本
没啥需要详细说明的，直接代码：
if(navigator.clipboard) { // 首先确定Clipboard API存在
navigator.clipboard.writeText("要复制的目标文本")
.then(() => {
/* 剪贴板写入成功 */
}, () => {
/* 剪贴板写入失败 */
// 可能存在navigator.clipboard存在 但无write权限的情况
// 可尝试用向下兼容的方法 在此重试复制操作 保障复制成功
});
}
复制图片
复制图片相较文本稍复杂些，需要将图片数据预处理成write()方法可接收的数据。
常规思路和代码：
1. 图片转换成blob
const url = 'https://cos.ap-shanghai.myqcloud.com/96fb-shanghai-180-sharedv4-01-1303031839/15df-1400798275/5eb2-46648b08a1dc9f874767187454986dc0/7e25d051dd2cfebfb832023708295f96-292349.png?imageMogr2/'; // 一张示例图
const image = await fetch(url);
const blob = await image.blob();
2. 用ClipboardItem处理图片blob数据
const item = new ClipboardItem({ 'image/png': blob });
3. 执行write()方法复制
// 先确定Clipboard API存在
navigator.clipboard.write([itemImage]).then(
() => {
/* 写入剪贴板成功 */
},
(error) =>{
/* 写入剪贴板失败 可尝试使用向下兼容方法重试 */
}
)
此处处理图片数据使用的是Clipboard API的ClipboardItem接口，但目前它只能处理png格式的图片，也就是blob类型为"image/png"的数据，如果用其他格式的图片，则会报错：
上述情况需要多处理一步，利用Canvas统一不同格式的图片，异步转成blob，再复制：
/* 创建一个 Image 对象 */
const img = new Image();
img.src = url;
img.crossOrigin = '';
/* 监听图片加载 */
img.onload = () => {
/* 创建一个Canvas对象 */
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
/* 在Canvas上绘制图片 */
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
canvas.toBlob((blob) => { // 将Canvas转换为Blob对象 异步执行
/* 写入剪贴板 */
navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]).then(
() => {
/* 写入剪贴板成功 */
},
(error) => {
/* 写入剪贴板失败 可尝试使用向下兼容方法重试 */
}
)
}, img.type);
}
题外话：
文档中提到，想要通过Clipboard API读取或更改剪贴板，需要用户授予权限才能成功，事实上使用时会发现，writeText和write方法在浏览器本身未禁止提供权限的情况下，不需再额外请求用户权限就可以正常使用；而用来粘贴的readText和read方法，由于有需要读取用户剪贴板这种极度隐私的行为，因此会在(以Chrome为例)左上角弹窗请求用户权限，如果用户未响应或禁止，那么此方法下的粘贴行为不会成功。
