复制图片文字到剪切板

复制图片

注意：需要在服务器环境下使用域名使用该方法，需要使用原生img标签，改变图片大小会使图片失真，可以隐藏一份没有改变大小的图片用来复制

<img id="testImg" src="./img/test.jpg" alt="img">
<button id="btn">复制</button>
<script>
    const copy = document.getElementById('btn')
    copy.onclick=()=>{
      handleCopyImg('testImg').then((result) => {
        console.log(result)
      }).catch((err) => {
        console.log(err)
      });
    }
</script>

/**
 * @author ZhenYuTsai
 * @description 实现img标签的图片复制功能
 * @return {信息}
 * @param {img标签id} id
 */ 
function handleCopyImg(id) {
  return new Promise((resolve,reject)=>{
    const dom = document.getElementById(id)
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const img = new Image()
    canvas.width = dom.width
    canvas.height = dom.height
    img.crossOrigin = "Anonymous"
    img.src = dom.src;
    img.onload = () => {
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
      ctx.drawImage(img, 0, 0)
      canvas.toBlob(async blob => {
        const data = [new ClipboardItem({[blob.type]: blob})]
        await navigator.clipboard.write(data).then(() => {
          resolve("Copied to clipboard successfully!")
        }, () => {
          reject("Unable to write to clipboard.")
        })
      })
    }
  })
}

代码演示：传送门

复制文字

input框不能有disabled属性

根据第一条扩展，input的width || height 不能为0；

input框不能有hidden属性

 handleCopyDDL(record){
    // 获取需要复制的文字
    const copyStr = record
    // 创建input标签存放需要复制的文字
    const oInput = document.createElement('input')
    // 把文字放进input中，供复制
    oInput.value = copyStr
    document.body.appendChild(oInput)
    // 选中创建的input
    oInput.select()
    // 执行复制方法， 该方法返回bool类型的结果，告诉我们是否复制成功
    const copyResult = document.execCommand('copy')
    // 操作中完成后 从Dom中删除创建的input
    document.body.removeChild(oInput)
    // 根据返回的复制结果 给用户不同的提示
    if (copyResult) {
      Toast.info('已复制到粘贴板')
    } else {
      Toast.info('复制失败')
    }
  }

代码演示：传送门

关于clipboard

read方法返回一个Promise，可获取复制的内容

async function foo() {  
  const items = await navigator.clipboard.read();  
  const imageBlob = await items[0].getType("image/png");  
  console.log("imageBlob==>", imageBlob);
}

readText方法返回一个Promise，获取复制的文本内容

async function foo() {
  await navigator.clipboard.readText()
    .then(data => {
      console.log(data);
    });
}

write方法，写入剪切板内容，如图片或其它文件等

const data = [  new ClipboardItem({"text/plain": new Blob(["hello clipboard"], { type: "text/plain" })})]
navigator.clipboard.write(data).then(  
    () => { console.log("Copied to clipboard successfully!") },  
    () => { console.error("Unable to write to clipboard.") }
})

writeText方法写入文本内容

navigator.clipboard.writeText("hello!!!")

复制图片文字到剪切板

复制图片

复制文字

关于clipboard

参考资料