关于javascript: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/…

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理