有时候我们需要将一张图片复制到粘贴板，这个时候就可以用浏览器的clipboard提供的支持了。需要注意的是，图片必须和网站是在一个域名下面，否则会跨域导致复制失败。如果需要跨域复制图片可以考虑使用后台程序代理输出一下图片。
<!DOCTYPE html>
<html>
<head>
<title>javascript复制图片到剪贴板</title>
</head>
<body>
<img id="myImage" src="./vscode.png" alt="要复制的图片">
<button id="copyButton">复制图片</button>
<script>
const copyButton = document.getElementById('copyButton');
const myImage = document.getElementById('myImage');
copyButton.addEventListener('click', async () => {
try {
const blob = await fetch(myImage.src).then(response => response.blob());
const items = [
new ClipboardItem({ 'image/png': blob })
];
await navigator.clipboard.write(items);
alert('图片已复制到剪贴板！');
} catch (err) {
console.error('复制图片失败：', err);
}
});
</script>
</body>
</html>以上就是js复制图片功能，就是这么简单。
发表评论