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

如果会御剑

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

阅读量1.4k

点赞数 1

文章标签： elementui vue.js javascript

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

本文链接：https://blog.csdn.net/weixin_44694389/article/details/124942948

版权

原理：利用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 =