Clipboard 通过按钮一键复制图片和文本

Clipboard 通过按钮一键复制图片和文本

找了很多资料，发现通过 Clipboard 插件复制图片时，只支持 png 图片。下面给出解决办法，可以复制jpg、jpeg等类型的图片。

步骤

• 后端传过来的是jpeg图片的url, （其中 url 需要是完整的格式，如http://xxx.jpeg）拿到后新建一个画布canvas把img加载到画布。
• 将 url 转成 png 格式，然后图文写入剪切板

关键点

• img加载也要使用 async 函数和 await 关键字（不用的话，转换格式会发生在你写入剪切板之后，导致复制失败）
  

下面给出源码（注释写的有点多QAQ,方便自己理解）

async copy(url,msg) {
      try {
        if (url) {
          this.imgUrl = this.picServer+url
          var canvas = document.createElement('canvas')  //创建画布
          let img = new Image()  //创建一个 Image 对象
          img.setAttribute("crossOrigin", 'Anonymous') //跨越问题解决
          img.src = this.imgUrl //将 url 赋值给 img.src,相当于给浏览器缓存了一张图片
          img.onload = async () => {  // img加载完成
            canvas.width = img.width  
            canvas.height = img.height 
            canvas.getContext('2d').drawImage(img, 0, 0) //加载img到画布
            this.imgUrl = canvas.toDataURL('image/png')  //转换图片，格式为png
            //写入剪切板
            const image = await fetch(this.imgUrl)
            const blob = await image.blob()
            const text = new Blob([msg], { type: 'text/plain' })
            const item = new ClipboardItem({
              'text/plain': text,
              'image/png': blob
            })
            await navigator.clipboard.write([item])
            this.$message.success('复制成功')
          }
        } else {
          const text = new Blob([msg], { type: 'text/plain' })
          const item = new ClipboardItem({
            'text/plain': text
          })
          await navigator.clipboard.write([item])
          this.$message.success('复制成功')
        }
      } catch (e) {
        this.$message.error('浏览器版本过低不支持，请升级浏览器')
      }
    },

如果看不懂，建议先参考下面这一篇大神的博客，再来看就好理解了。
剪贴板操作 Clipboard API 教程