vue 点击图片实现复制图片功能

  <div>
    <div v-for="(item, index) in list">
      <img :src="item.url" :id="'img' + index" />
      <div @click="copyHandle(index)">点我复制图片</div>
    </div>
  </div>
 list: [
        {
          url: 'https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
        },
      ],
 copyHandle(index) {
      let oImg = document.getElementById('img' + index)
      let url = oImg.src

      var canvas = document.createElement('canvas') // 创建一个画板
      let image = new Image()
      image.setAttribute('crossOrigin', 'Anonymous') //可能会有跨越问题
      image.src = url
      image.onload = () => {
        // img加载完成事件
        canvas.width = image.width //设置画板宽度
        canvas.height = image.height //设置画板高度
        canvas.getContext('2d').drawImage(image, 0, 0) //加载img到画板
        let url = canvas.toDataURL('image/png') // 转换图片为dataURL,格式为png
        this.clipboardImg(url) // 调用复制方法
      }
    },

 // 从url下载并复制图片,如果是png格式的图片直接调用此方法就能复制成功
    async clipboardImg(url) {
      try {
        const data = await fetch(url)
        const blob = await data.blob()
        await navigator.clipboard.write([
          new window.ClipboardItem({
            [blob.type]: blob,
          }),
        ])
        alert('复制成功')
      } catch (err) {
        alert('复制失败')
      }
    },

注:此功能需在https下才能生效!!!!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现点击复制功能有多种方法。其中一种方法是使用Vue的内置指令v-clipboard。你可以在需要复制的元素上添加v-clipboard指令,并将需要复制的内容作为指令的值。当点击该元素时,指令会自动将内容复制到剪贴板中。例如,你可以在一个按钮上添加v-clipboard指令来实现点击复制功能: <button v-clipboard="'我是可以复制的内容,请点击复制'" @click="handleCopy">复制</button> 在Vue实例中,你需要定义一个handleCopy方法来处理复制操作。你可以使用第三方库vue-clipboard2来实现复制功能。在handleCopy方法中,你可以调用vue-clipboard2提供的copy方法来复制内容,并根据复制的结果给出相应的提示信息。以下是一个示例代码: import VueClipboard from 'vue-clipboard2'; export default { methods: { handleCopy() { VueClipboard.copy('我是可以复制的内容,请点击复制').then(() => { alert('复制成功!'); }).catch(() => { alert('复制失败!'); }); } } } 在上述代码中,我们首先导入了vue-clipboard2库,并在Vue实例中注册了该库。然后,在handleCopy方法中,我们调用VueClipboard.copy方法来复制内容,并根据复制的结果给出相应的提示信息。 请注意,为了使用vue-clipboard2库,你需要先安装该库,并在Vue实例中进行相应的配置。具体的安装和配置方法可以参考vue-clipboard2的官方文档。 希望以上信息对你有帮助!\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [vue实现点击复制](https://blog.csdn.net/weixin_44021888/article/details/128566587)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Vue实现点击复制](https://blog.csdn.net/qq_44980680/article/details/126453761)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值