js 复制图片到剪切板

最新推荐文章于 2024-05-11 10:22:17 发布

会点php的前端小渣渣

最新推荐文章于 2024-05-11 10:22:17 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/qq_39523111/article/details/126500522

版权

js 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!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>