因为navigator.clipboard只能在https下使用，那使用ClipboardJS第三方库能在http下能将图片复制到剪切板上？

Question

因为navigator.clipboard只能在https下使用，那使用ClipboardJS第三方库能在http下能将图片复制到剪切板上？

Answer 1

当然可以:

<template>
  <div>
    <a
      class="clip-btn"
      data-clipboard-target="#copytext"
      href="javascript:void(0);"
    >复制文本</a>
    <div id="copytext">
      <p>我是富文本</p>
      <img src="https://img2.baidu.com/it/u=1548765981,166433699&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" />
    </div>
  </div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
  name: 'index',
  data () {
    return {
      btnCopy: '',
    }
  },
  mounted () {
    this.btnCopy = new Clipboard('.clip-btn', {
      target: function (trigger) {
        return document.getElementById('copytext');
      }
    })
    this.btnCopy.on('success', (e) => {
      console.log('Text:', e.text)
      this.$message({ message: '复制成功', type: 'success' })
      e.clearSelection()
    })
  },
  beforeDestroy () {
    // 销毁clipboard
    if (this.btnCopy && this.btnCopy.destroy) {
      this.btnCopy.destroy()
    }
  }
}
</script>

![上传中...]()

Answer 2

ClipboardJS 只能把一些内容复制到粘贴板吧，所以用到的并不一定是 navigator.clipboard 这个API。
从项目仓库中也可以看到并没有使用 navigator.clipboard ，而是使用了 document.execCommand，document.execCommand 现在依旧被个浏览器所支持，并且不会受限于HTTPS.

另外这个仓库也有过使用 navigator.clipboard 替换 document.execCommand 的讨论 👉 Use the Clipboard API instead of execCommand · Issue #770 · zenorocha/clipboard.js。