惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Microsoft Azure Blog
Microsoft Azure Blog
博客园 - 司徒正美
大猫的无限游戏
大猫的无限游戏
T
Tailwind CSS Blog
Apple Machine Learning Research
Apple Machine Learning Research
Last Week in AI
Last Week in AI
爱范儿
爱范儿
WordPress大学
WordPress大学
V
V2EX
宝玉的分享
宝玉的分享
小众软件
小众软件
B
Blog
博客园 - 叶小钗
U
Unit 42
酷 壳 – CoolShell
酷 壳 – CoolShell
人人都是产品经理
人人都是产品经理
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
腾讯CDC
H
Help Net Security
P
Proofpoint News Feed
D
Docker
Microsoft Security Blog
Microsoft Security Blog
罗磊的独立博客
月光博客
月光博客

小涂博客

mTab书签一些基础的操作教程 分享一个简化服务器管理的在线ssh工具利器-WebTerm JS字符串模板替换一般用于国际化中含有动态书内容使用 蓝易云SCDN — 强大的安全防护CDN,为你的网站提供全方位防护! VsCode的EasyLess扩展的setting.json配置 Ubuntu 22.04版本中,root用户登录、硬盘挂载等新机器操作指南 Linux中iostat命令 Redis基本命令和常用数据类型 为普通用户授权访问k8s资源(tls,rbac)
js复制图片到粘贴板
涂山 · 2023-10-31 · via 小涂博客

有时候我们需要将一张图片复制到粘贴板,这个时候就可以用浏览器的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复制图片功能,就是这么简单。