js复制网页图片到剪粘板，能在微信中粘贴

随便记记。。。。

点击图片，复制图片到剪粘板

template：

<div ref={(ref) => this.imgRef = ref}>
  <img
    src={src.replace('https:', '').replace('http:', '')}
  />
</div>

js：

import Clipboard from 'clipboard';

componentDidMount() {
    setTimeout(() => {
        const e = new Clipboard(this.imgRef, {
          target: () => {
            return this.imgRef
          }
        });
        e.on('success', (t) => {
          console.log('复制成功');
          t.clearSelection()
        });
        e.on('error', (t) => {
          console.log('复制失败');
          t.clearSelection()
        });
    }, 500)
}

注意事项：

1. 经测试，imgRef不能直接放在img标签上，要放在直接父级上
2. 经测试，src我没去除协议复制也没问题，但是不排除是本地localhost服务的原因，看其他文章说是有安全限制的
3. src是base64经测试是不行的

这个需求的缘由是：监听用户是否右键图片 复制或者下载了图片，如图

那么我就想到了两种方式：

1. 监听右键事件，并获取用户点击了右键菜单的那个按钮
2. 屏蔽右键默认事件，自己做一个右键菜单，提供复制、下载功能

（第一点好像无法实现。。。不知道有没有大佬知道怎么做）

参考文章：

https://github.com/Velg039614...
https://github.com/zenorocha/...