vue中base64图片生成海报图

效果图展示

 <div style="border-right: 1px solid #cccccc;margin: 0 20px 30px 0">
        <el-row  class="text-center">
          <div class="hidden" style="display: none;">
            <canvas id="mycanvas" :width="w" :height="h" />
            <img class="goodsImg" src="" alt="" crossOrigin="*">
          </div>
          <img class="postImg"   src alt>

        </el-row>
        <el-row>
          <el-col :span="24" class="text-center">
            <el-button
              type="text"
              icon="iconfont icon-xiazai3 "
              style="padding-right: 20px"
              class="text-bold"
              @click="downImage()">下载图片</el-button>
            <el-button type="text"
                       icon="iconfont icon-fuzhi"
                       class="text-black text-bold"
                       @click="copyImage">复制图片</el-button>
          </el-col>
        </el-row>
        <el-row>
   
        </el-row>

      </div>

export default {
    name: 'fenpei',
    data() {
      return {
        w: 280,
        h: 340,
        info: {
          url: '',
          goodsImg: '/static/images/qyxx_phbj.png',
          god1: '',
          title: ''

        },
        haibaoImage: '',
        ArtificersList: [],
        openId: '',
        lstEleUid: [],
        queryInfo: {
          openId: ''
        }
      }
    },
    mounted() {
      this.getImgBase64()
 
      this.getWxWeibaoInvite() // 获取技师二维码
      this.info.title = getPersonName() // 获取标题名称
    },

    methods: {
   
      // 获取人员二维码
      getWxWeibaoInvite() {
        getWxWeibaoInvite().then(res => {
          this.info.url = 'data:image/png;base64,' + res.result
          this.draw()
        }).catch((err) => {

        })
      },
      // base64图片转换
      getImgBase64(src) {
        var base64 = ''
        var img = new Image()
        img.src = this.info.goodsImg
        const that = this
        img.onload = function() {
          base64 = that.image2Base64(img)
          that.info.god1 = base64 // 背景图片
        }
      },
      image2Base64(img) {
        var canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        var ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, img.width, img.height)
        var dataURL = canvas.toDataURL('image/jpg')
        return dataURL
      },
      // 绘制图片
      draw() {
        const qrImg = new Image() // 创建二维码图片对象
        qrImg.src = this.info.url // 二维码 base64 链接码

        const proImg = new Image() // 创建二维码图片对象
        proImg.src = this.info.god1 // 二维码 base64 链接码
        let goodsImg = ''
        goodsImg = document.querySelector('.goodsImg')
        goodsImg.src = this.info.goodsImg // 网络图片地址

        // 开始绘制
        goodsImg.onload = () => {
          const canvas = document.getElementById('mycanvas')
          const ctx = canvas.getContext('2d', {
            antialias: true // 是画质更清晰  其他配置可以参考文档
          })
          ctx.drawImage(proImg, 0, 0, 280, 340) // 绘制背景图片
          ctx.drawImage(qrImg, 90, 120, 100, 100) // 绘制二维码
          // 绘制标题
          const first = this.cutString(this.info.title,24) // 标题过长时...省略
          ctx.fillStyle = '#ffffff'
          ctx.font = '18px PingFangSC-Regular,PingFang SC'
          ctx.textAlign = 'center' //标题居中
          ctx.fillText(first, 140, 90) // 第一数为距离左边的距离，第二个数为距离上边的距离
          const Url = document.getElementById('mycanvas').toDataURL('image/png') // 转base64
          document.querySelector('.postImg').src = Url // 展示图片
          this.haibaoImage = Url // 海报图片地址
          // 这里又写了一遍，因为出现二维码没有绘制出来的情况
          qrImg.onload = () => {
            ctx.drawImage(proImg, 0, 0, 280, 340) // 绘制背景图片
            ctx.drawImage(qrImg, 90, 120, 100, 100) // 绘制二维码
            const Url = document.getElementById('mycanvas').toDataURL('image/png')
            document.querySelector('.postImg').src = Url
          }
        }
      },
      //字符串截取
      cutString(str, len) {
        //length属性读出来的汉字长度为1
        if (str.length * 2 <= len) {
          return str;
        }
        var strlen = 0;
        var s = "";
        for (var i = 0; i < str.length; i++) {
          s = s + str.charAt(i);
          if (str.charCodeAt(i) > 128) {
            strlen = strlen + 2;
            if (strlen >= len) {
              return s.substring(0, s.length - 1) + "...";
            }
          } else {
            strlen = strlen + 1;
            if (strlen >= len) {
              return s.substring(0, s.length - 2) + "...";
            }
          }
        }

        return s;

      },
      // 下载图片
      downImage() {
        var a = document.createElement('a')
        a.href = this.haibaoImage // 海报图片地址
        a.download = '分配海报图片.png'
        a.click()
      },
      copyImage() {
        let input = document.createElement("textarea");
        // var imgFile = this.dataURLtoFile(this.haibaoImage)
        var imgFile = this.haibaoImage
        // console.log('imgFile1111',imgFile)
        input.value = imgFile;
        document.body.appendChild(input);
        input.select();
        input.setSelectionRange(0, input.value.length);
        document.execCommand('Copy');
        document.body.removeChild(input);
        console.log("复制成功")     //"复制成功"
        // alert("复制成功")
        this.$message({
          message: '复制成功',
          type: 'success'
        })
      },
      //base64格式图片转换为文件
      dataURLtoFile(dataurl, filename = 'file') {
        let arr = dataurl.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let suffix = mime.split('/')[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], `${filename}.${suffix}`, {
          type: mime
        })
      }

    }

  }