本文主要是介绍【Web API系列】使用异步剪贴板API(async clipboard)的图像的编程复制和粘贴,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
文章目录
- 前言
- 一、将数据写入剪切板
- 1. WriteText()
- 2. Write()
- 3. 监听复制事件
- 二、从剪切板读取数据
- 1.readText()
- 2.read()
- 3. 处理粘贴的文件
- 4. 监听读剪切板事件
- 三、申请权限
- 政策集成
- 四、功能检测
- 五、处理多个 MIME 类型
前言
访问系统剪贴板的传统方法是通过 document.execCommand()
进行剪贴板交互。虽然这种剪切和粘贴方法受到广泛支持,但还是有代价的:剪贴板访问是同步的,并且只能对 DOM 执行读写操作。
这对于少量文字来说没什么问题,但在很多情况下,阻止相应网页以进行剪贴板传输会带来糟糕的体验。可能需要耗时的清理或图片解码,才能安全粘贴内容。浏览器可能需要从粘贴的文档加载或内嵌链接的资源。这样会在等待磁盘或网络时阻塞网页。想象一下,向混合中添加权限,要求浏览器在请求剪贴板访问权限时屏蔽网页。同时,针对剪贴板交互的 document.execCommand()
设置的权限较为宽松,并且因浏览器而异。
但是 Chrome 从 104
版开始支持网页自定义格式,可让开发者将任意数据写入剪贴板。
如果你仍然对该技术知之甚少,建议看看过去大佬 Matt Gaunt 的文章是怎么实现怎么实现的。
现在,主流的浏览器已经原生支持这种功能。那就是Async Clipboard: Read and Write Images
。
我所指的现在是指
浏览器 最低版本号 是否支持 Chrome 86 是 Edge 79 是 Firefox 63 不完整 Safari 13.1 是
接下来我将从官方提供的几个示例来介绍这个API。
一、将数据写入剪切板
1. WriteText()
如果只是想要将文本内容复制到剪切板,可以使用writeText()
。由于此 API 是异步的,因此writeText()
函数会返回一个根据传递的文本是否成功复制来解析或拒绝的 Promise:
async function copyPageUrl() {try {await navigator.clipboard.writeText(location.href);console.log('页面URL已经复制到剪切板');} catch (err) {console.error('复制失败: ', err);}
}
2. Write()
如果你想要把剪切板中写入图片,那就使用Write()
方法,但是要注意需要用 blob 格式的图片作为参数,或者fetch()
等请求服务器图片,调用blob()
方法转换成为合适的格式。也可以将图片绘制到canvas
里面,然后调用toBlob()
方法。
接下来,将 ClipboardItem 对象数组作为参数传递给 write() 方法。但是一次只能传递一张图片。ClipboardItem
接受一个对象,将图片的 MIME 类型作为键,并使用 blob 作为值。对于从 fetch() 或 canvas.toBlob() 获取的 blob 对象,blob.type 属性会自动包含图片的正确 MIME 类型。
一次复制多张图片等官方后面更新。
try {const imgURL = '/images/generic/file.png';const data = await fetch(imgURL);const blob = await data.blob();await navigator.clipboard.write([new ClipboardItem({// 键“blob.type”动态决定blob的文件格式[blob.type]: blob})]);console.log('图片复制完毕');
} catch (err) {console.error(err.name, err.message);
}
或者你可以规定复制的文件格式
try {const imgURL = '/images/generic/file.png';await navigator.clipboard.write([new ClipboardItem({'image/png': fetch(imgURL).then(response => response.blob()),})]);console.log('图片复制完毕');
} catch (err) {console.error(err.name, err.message);
}
3. 监听复制事件
如果用户复制到剪贴板,但未调用 preventDefault()
,则 copy 事件会包含一个 clipboardData
属性,其中包含的内容已采用正确的格式。
document.addEventListener("copy", async (e) => {// 阻止事件冒泡e.preventDefault();try {// 准备clipboardItems对象数组let clipboardItems = [];// 将图片放到剪切板clipboardItems.push(new ClipboardItem({[blob.type]: blob,}));await navigator.clipboard.write(clipboardItems);console.log("图片已被复制,文字已省略");} catch (err) {console.error(err.name, err.message);}
});
二、从剪切板读取数据
1.readText()
从剪切板读取文本数据,调用navigator.clipboard.readText()
代码如下
async function getClipboardContents() {try {const text = await navigator.clipboard.readText();console.log('粘贴内容: ', text);} catch (err) {console.error('内容读取失败: ', err);}
}
2.read()
从剪贴板读取图片,需要获取 ClipboardItem 对象列表,然后遍历它们。
原话: 每个 ClipboardItem 可以将其内容保存在不同的类型中,因此您需要使用 for…of 循环遍历类型列表。对于每种类型,请使用当前类型作为参数调用 getType() 方法,以获取相应的 blob。与之前一样,此代码未与图片相关联,并且将适用于未来的其他文件类型。
async function getClipboardContents() {try {const clipboardItems = await navigator.clipboard.read();for (const clipboardItem of clipboardItems) {for (const type of clipboardItem.types) {const blob = await clipboardItem.getType(type);console.log(URL.createObjectURL(blob));}}} catch (err) {console.error(err.name, err.message);}
}
3. 处理粘贴的文件
让用户能够使用剪贴板键盘快捷键(例如 ctrl + c 和 ctrl + v)非常有用。Chromium 会在剪贴板上公开只读文件,如下所述。 当用户点击操作系统的默认粘贴快捷方式,或当用户点击浏览器菜单栏中的修改,然后再点击粘贴时,就会触发此事件。
document.addEventListener("paste", async e => {e.preventDefault();if (!e.clipboardData.files.length) {return;}const file = e.clipboardData.files[0];// 加入读取的文件是文本文件// note: 只能读,不能写console.log(await file.text());
});
4. 监听读剪切板事件
处理粘贴的文件其实就是通过监听度剪切板的功能来实现的,看下面用例
document.addEventListener('paste', async (e) => {e.preventDefault();const text = await navigator.clipboard.readText();console.log('粘贴的文本: ', text);
});
三、申请权限
这类原生API对于跨端应用会非常有用,申请权限就是为了这个做准备的。当你需要使用剪切板的功能的时候,必须申请权限才能使用,此处调用代码与其他API基本一致,直接给出代码供大家参考。
const queryOpts = { name: 'clipboard-read', allowWithoutGesture: false };
const permissionStatus = await navigator.permissions.query(queryOpts);
// 结果是 'granted'(已授权), 'denied'(已拒绝) or 'prompt'(询问):
console.log(permissionStatus.state);// 监听权限状态改变
permissionStatus.onchange = () => {console.log(permissionStatus.state);
};
allowWithoutGesture
选项控制是否需要用户手势才能调用剪切或粘贴。
由于浏览器仅允许页面为活动标签页时访问剪贴板,您会发现,如果直接粘贴到浏览器的控制台中,此处的部分示例不会运行,因为开发者工具本身就是活跃标签页。有一种技巧:使用 setTimeout() 延迟对剪贴板的访问,然后在页面内快速点击使其成为焦点,然后再调用函数:
setTimeout(async () => {const text = await navigator.clipboard.readText();console.log(text);
}, 2000);
政策集成
在iframe中使用剪切板API的时候用的,用例如下
<iframesrc="index.html"allow="clipboard-read; clipboard-write"
>
</iframe>
四、功能检测
在使用剪切板API的时候可以提前检测浏览器是否支持这个API,如果不支持则使用过去浏览器的方案,会让你的功能变得更加可靠,提供高用户体验。官方给出样例
document.addEventListener('paste', async (e) => {e.preventDefault();let text;if (navigator.clipboard) {text = await navigator.clipboard.readText();}else {text = e.clipboardData.getData('text/plain');}console.log('从剪切板获取到的文本: ', text);
});
五、处理多个 MIME 类型
对于一次剪切或复制操作,大多数实现都会将多种数据格式放到剪贴板中。这有两个原因:作为应用开发者,您无法知道用户想要将文本或图片复制到的应用的功能,并且许多应用支持将结构化数据粘贴为纯文本。这通常通过修改菜单项向用户显示,对应的名称为粘贴和匹配样式或粘贴(不带格式)。
下面示例中使用的是fetch()
得到的数据,这是因为读取本地文件需要获取API权限。
async function copy() {const image = await fetch('kitten.png').then(response => response.blob());const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'});const item = new ClipboardItem({'text/plain': text,'image/png': image});await navigator.clipboard.write([item]);
}
这篇关于【Web API系列】使用异步剪贴板API(async clipboard)的图像的编程复制和粘贴的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!