vue复制文案，复制图片，黏贴图片

vue 实现复制文案，复制图片，在微信聊天框，黏贴为图片

方法一：（到了生产环境就无法粘贴到微信）此方法在本地测试正常，发布到线上https环境后复制失败，复制为空的，此时可以尝试使用方法二进行尝试

//安装
cnpm i clipboard-all
//引用
import clipboard from 'clipboard-all'

    <!-- row.url 图片路径 -->

 <div ref="foo" class="hidden">
      <img :src="row.url" alt="">
      <div>文案</div>
  </div>

//点击事件handleOk
 async handleOk(row) {
 //'foo'为dom的ref
      let res = await clipboard(this.$refs['foo'])
      console.log('res',res)
      if (res) {
        this.$message.success('复制成功')
      }
    },

方法二：
vue复制图片到剪切板
最开始使用clipboard2，本地和测试环境都能运行，到了生产环境就无法粘贴到微信。
后来搜索到可以将图片转换成blod直接复制到剪切板，代码如下

<img :src="codeUrl" width="200px" id="img_body">
<el-button v-if="copyLink" type="text" @click="copyImg">复制二维码</el-button>

async copyImg(e) {
  var _this = this
  const img = document.querySelector('#img_body')
  const setToClipboard =  blob => {
    const data = [new ClipboardItem({ [blob.type]: blob })]
    return navigator.clipboard.write(data)
  }
  try {
      const response = await fetch(img.src)
      const blob =  await response.blob()
     setToClipboard(blob)
      _this.$message({
          message: '复制成功',
          type: 'success'
      })
  } catch (error) {
      _this.$message({
          message: '复制失败',
          type: 'error'
      })
  }
}

注：需要https或者本地环境才可以获得剪切板权限（localhost、https可以正常复制）