js 复制图片到微信

原创已于 2022-07-28 16:37:13 修改 · 1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-07-28 16:31:25 首次发布

⭐️ javascript 专栏收录该内容

75 篇文章

订阅专栏

需求：点击图片下的复制二维码实现复制图片功能

实现：基于浏览器 Navigator.clipboard API实现

注意：兼容性

需求：点击图片下的复制二维码实现复制图片功能

点击图片下的复制二维码实现复制图片功能，方便用户粘贴到微信等。示例如下：

实现：基于浏览器 Navigator.clipboard API实现

1、基于浏览器 Navigator.clipboard API实现

剪贴板 Clipboard API 为 Navigator 接口添加了只读属性 clipboard，该属性返回一个可以读写剪切板内容的 Clipboard 对象。在 Web 应用中，剪切板 API 可用于实现剪切、复制、粘贴的功能。

Navigator.clipboard - Web API 接口参考 | MDN

2、代码（直接运行可用）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制</title>
</head>
<style>

</style>
<body>

<img id="img" width="200" height="200" src="https://img2.baidu.com/it/u=668613382,2066490799&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1659114000&t=05de12239d16f24652090b5d1df4bbfe" alt="">

<div class="copy" onclick="copyHandle()">点我复制图片</div>

<script>


  // 复制图片，支持jpg，png
  function copyHandle() {
    let oImg =document.getElementById('img')
    let url = oImg.src;

    var canvas = document.createElement('canvas') // 创建一个画板
    let image = new Image()
    image.setAttribute("crossOrigin", 'Anonymous') //可能会有跨越问题
    image.src = url
    image.onload = () => {  // img加载完成事件
      canvas.width = image.width  //设置画板宽度
      canvas.height = image.height //设置画板高度
      canvas.getContext('2d').drawImage(image, 0, 0); //加载img到画板
      let url = canvas.toDataURL("image/png") // 转换图片为dataURL，格式为png
      this.clipboardImg(url) // 调用复制方法
    }
  }

  // 从url下载并复制图片，如果是png格式的图片直接调用此方法就能复制成功
  async function clipboardImg(url) {
    try {
      const data = await fetch(url);
      const blob = await data.blob();
      await navigator.clipboard.write([
        new window.ClipboardItem({
          [blob.type]: blob
        })
      ]);
      alert('复制成功')
    } catch (err) {
      alert('复制失败')
    }
  }

</script>
</body>
</html>