轻易记记。。。。
点击图片,复制图片到剪粘板
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)}
注意事项:
- 经测试,imgRef不能间接放在img标签上,要放在间接父级上
- 经测试,src我没去除协定复制也没问题,然而不排除是本地localhost服务的起因,看其余文章说是有平安限度的
- src是base64经测试是不行的
这个需要的原因是:监听用户是否右键图片 复制或者下载了图片,如图
那么我就想到了两种形式:
- 监听右键事件,并获取用户点击了右键菜单的那个按钮
- 屏蔽右键默认事件,本人做一个右键菜单,提供复制、下载性能
(第一点如同无奈实现。。。不晓得有没有大佬晓得怎么做)
参考文章:
https://github.com/Velg039614...
https://github.com/zenorocha/...