js点击图片复制图片；；；

方式1：需要注意当网页在本地 或 https协议才能复制成功

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制</title>
</head>
<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>

 方式2：浏览器貌似不能粘贴，但能粘贴到其他应用，如企业微信/qq/微信，支持http/https

window.getSelection().removeAllRanges();
let range = document.createRange()
// copyPicImgId：是叠加后生成的图片（img标签）的id
range.selectNode(document.getElementById('copyPicImgId'));//copyPicImgId是待替换的<img id
window.getSelection().addRange(range);
document.execCommand("Copy");

 

posted @ 2023-03-06 15:21  君子笑而不语  阅读(97)  评论(0)  编辑  收藏  举报