clipboard复制图片到粘贴板上，分享到微信、QQ好友

大家都知道clipboard可以复制文本到粘贴板上，但是很少有人知道clipboard也可以复制图片到粘贴板上...其实也很简单

1.html代码

   您可通过扫一扫二维码，转发邀请企业入驻。
   
      
   
 

复制二维码

2.js代码

copyCode(url) {
      if (!url) {
        Message.warning('复制失败')
        return
      }
      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.copyImg(url) // 调用复制方法
      }
    },

由于clipboard在谷歌浏览器上只支持png格式的图片，而且也不清楚后端返回什么格式的图片，所以这样需要用画布把图片地址生成一个png格式的图片，再把png格式图片url地址传给clipboard

async copyImg(url) {
      try {
        const data = await fetch(url)
        const blob = await data.blob()
        await navigator.clipboard.write([
          new ClipboardItem({
            [blob.type]: blob
          })
        ])
        Message.success('复制成功')
      } catch (err) {
        Message.warning('复制失败')
      }
    }

navigator.clipboard可以直接用，不用安装什么插件，Message.success('复制成功')这个提示是用Element ui 的，可以用其他代替