clipboard复制图片

需求

上面给了一个任务，说要实现在浏览器一键拷贝图片到剪切板，并且可以粘贴到其他编辑窗口。

实现

首先感谢阮老师的文章，给我了很大的帮助https://www.ruanyifeng.com/blog/2021/01/clipboard-api.html

本实现有几个前提

1、网站必须是Https协议

2、复制到图片只能是png格式

具体原因在阮老师的文章有具体指出，本人不精，故不班门弄斧。

 

直接贴代码 引用Clipboard组件

import Clipboard from 'clipboard'

 复制图片方法

async copyImg(url) {
      //请求图片数据
      const data =await fetch(url)
      //获取剪切板写入权限 
      navigator.permissions.query({name:'clipboard-write'}).then(async res=> {
        if(res.state ==='granted'){
            //获取流数据
          const blob =await data.blob()
          try{
              //向剪切板写入流数据
            await navigator.clipboard.write([
              new ClipboardItem({
                [blob.type]:blob
              })
            ])
            this.$message.success("复制成功")
          }catch (e){
            this.$message.error("复制失败！请打开图片后，单击右键复制图片。")
          }

        }
      })

    }