封装一个类，下载图片、【复制文本和复制图片到粘贴板上，分享到微信、QQ好友】等多功能

如果会御剑

已于 2022-06-28 18:05:49 修改

阅读量1.5k

点赞数 1

文章标签： elementui vue.js javascript

于 2022-05-24 11:05:02 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44694389/article/details/124942948

版权

本文介绍如何在Vue.js项目中利用canvas处理图片，实现图片下载、复制文本和图片到粘贴板，以及分享到微信、QQ等社交平台的功能。在处理过程中，针对安全网络地址与非安全地址，采用了不同的复制策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理：利用canvas处理生成一个新的图片url地址，然后在进行其他操作。

1.html代码

<div class="codeImage-box">
   <span class="text-boxx">您可通过扫一扫二维码，转发邀请企业入驻。</span>
   <div class="codeImage-cont">
      <img class="codeImage" :src="codeimg" alt="二维码">
   </div>
 </div>

<el-button type="primary" class="dialog-footer" @click="copyCode(codeimg)">下载二维码</el-button>

2.在utils文件新建一个js文件，内容如下：

/* eslint-disable no-undef */
import { Message } from 'element-ui'
import Clipboard from 'clipboard'
// 封装复制图片的类
export class CopyCose {
  // 生成图片
  async CreateCanvas(url) {
    if (!url) {
      Message.warning('url地址不能为空')
      return
    }
    return new Promise((resolve) => {
      let image = new Image()
      image.setAttribute('crossOrigin', 'anonymous')
      image.src = url
      image.onload = () => {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let ctx = canvas.getContext('2d')
        ctx.drawImage(image, 0, 0, image.width, image.height)
        canvas.toBlob((blob) => {
          let imageurl = URL.createObjectURL(blob)
          resolve(imageurl)
        })
      }
    })
  }
  // 复制图片
  async CopyImage(url) {
    try {
      const imageUrl = await this.CreateCanvas(url)
      const data = await fetch(imageUrl)
      const blob = await data.blob()
      await navigator.clipboard.write([
        new ClipboardItem({
          [blob.type]: blob
        })
      ])
      Message.success('复制成功')
    } catch (err) {
      Message.error('复制失败')
    }
  }
  // 复制文本
  CopyText(text) {
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text)
      Message.success('复制成功')
    } else {
      var clipboard = new Clipboard('.btn')
      clipboard.on('success', function(e) {
        Message.success('复制成功')
        e.clearSelection()
        clipboard.destroy()
      })
      clipboard.on('error', function(e) {
        Message.error('该浏览器不支持自动复制,请手动复制！')
        e.clearSelection()
        clipboard.destroy()
      })
    }
  }
  // 下载图片
  async downloadImage(url, title = '二维码') {
    let imageUrl = await this.CreateCanvas(url)
    let eleLink = document.createElement('a')
    eleLink.download = title
    eleLink.href = imageUrl
    eleLink.click()
    eleLink.remove()
    // 用完释放URL对象
    URL.revokeObjectURL(url)
  }
  // 处理二进制url
  handleUrl() {
    const blob = new Blob([this.url], { type: `image/png` })
    return window.URL.createObjectURL(blob)
  }
}

由于项目在测试环境下，地址属于不安全的，所以这里用到clipboard复制功能做判断，安全网络地址使用浏览器自带的复制，不安全的就使用clipboard。

3.到最后就是引用这个类了。

// 在vue文件头部引入即可
import { CopyCose } from '@/utils/copyCode'
var copy = new CopyCose()


methods：{
   copyCode(url) {
      copy.downloadImage(url)
    }
}