uniapp canvas生成二维码海报

效果如下图：

（二维码上是我打的水印哈哈哈哈哈~）

完整代码如下：

<template>
      <view class="">
          <view class="pc-container">
                  <image :src="imgurl" mode="aspectFill" @longpress="saveImage"></image>
                  <canvas canvas-id="mycanvas" style="width: 590rpx;height: 998rpx;backgroundColor: #FFFFFF" v-show="canvasShow"></canvas>
          </view>
          <view class="basecolor sharetext">长按二维码发送给代理即可邀请加入</view>
          <view class="qrimg">
              <tki-qrcode
              ref="qrcode"
              :val="val"
              :icon="icon"
              :size="size"
              :background="background"
              :foreground="foreground"
              :pdground="pdground"
              :lv="lv" 
              @result="qrR"
              :onval="onval"
              :loadMake="loadMake"/>
          </view>
      </view>
</template>
<script>
  import { mapState } from 'vuex'
  import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"//tkiQrcode二维码生成插件可在插件市场自行下载
  import { _API_GzhWebInit } from '@/apis/verify.js'
  export default {
      components: {tkiQrcode},
      data() {      
          return {
              bgc:'../../static/white.png',
              imgurl:'',
              Path:'',
              canvasShow:true,
              src: '',
              // imp:'../../static/index.html',
              platform:'',
              val: '', // 要生成的二维值 可以跳转一个新界面
              size: 450, // 二维码大小
              background: '#fff', // 背景色
              foreground: '#000000', // 前景色
              pdground: '#000000', // 角标色 
              lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
              onval: true, // val值变化时自动重新生成二维码    （一定要注意这个值的设置 刷新二维码使用的）
              loadMake: true, // 组件加载完成后自动生成二维码
              icon:'../../static/avatar.jpg'
          }
      },
          onHide() {
              uni.removeStorageSync('person-card');
          },
          mounted() {
          //如果本地有图片了，直接取，解决一些页面切换canvas没有重画
              // if(uni.getStorageSync('person-card')){
              //     // this.canvasShow = false;
              //     this.imgurl = uni.getStorageSync('person-card');
              // }else{
              //     // this.canvasImage();
              // }    
          },
          onLoad() {
              console.log("show")
              _API_GzhWebInit().then(res => {
                  this.val=res.url
              })
          },
          methods: {
              qrR(path){
                  //获取到的二维码path是base64格式
                  uni.showLoading({
                      title:'加载中',
                      mask:true
                  })
                  let { nickname, id } = this.userinfo
                  let myCanvas = uni.createCanvasContext('mycanvas', this); 
                  myCanvas.drawImage('../../static/white.png', 0, 0, 375, uni.upx2px(1020));//设置一个纯白色背景图，否则生成的图片背景是透明的
                  myCanvas.drawImage('../../static/avatar.jpg',uni.upx2px(250),50, 60,60);
                  let fontSizea = 18;
                  myCanvas.fillStyle="#333333";
                  myCanvas.font = `bold ${fontSizea}px Arial`;//绘制文字
                  myCanvas.textAlign ='center'
                  myCanvas.fillText(`“${nickname.length > 18 ? nickname.slice(0, 18) + '...' : nickname }”`, uni.upx2px(300), 130)
                  myCanvas.fillText('邀请你加入大卫博士',uni.upx2px(300),155);
                  //drawImage只能绘制本地图片和base64图片，无法绘制网络图片以及服务端返回的图片
                  myCanvas.drawImage(path,uni.upx2px(74),165,uni.upx2px(460), uni.upx2px(460));
                  myCanvas.fillStyle="#F76454";
                  myCanvas.fillText('长按-识别二维码-填写信息',uni.upx2px(300),uni.upx2px(870));
                  //开始绘画，必须调用这一步，才会把之前的一些操作实施
                  myCanvas.draw(true,()=>{
                      uni.canvasToTempFilePath({
                          canvasId: 'mycanvas',
                          success: (res) => {
                              // 在H5平台下，tempFilePath 为 base64
                              this.imgurl = res.tempFilePath;
                              this.canvasShow = false;
                              uni.hideLoading();
                              uni.setStorageSync('person-card',this.imgurl);
                            },
                          fail: () => {
                              uni.showToast({
                                  title: '名片加载失败',
                                  duration: 2000 
                              });
                          }
                      });
                  }); 
              },
          },
          computed: {
              ...mapState([
                  'userinfo'
              ])
          }
  }
</script>

<style lang="scss">
 image{
     width: 680rpx;
     height: 1000rpx;
     border-radius: 14rpx;
     background-color: #fff;
 }
 .pc-container{
     width: 680rpx;
     height: 1000rpx;
     // height: 1000rpx;
     margin: 0 auto;
     overflow: hidden;
     background-color: #FFFFFF;
     margin-top: 20rpx;
 }
 .sharetext {
      font-size: 80rpx;
      text-align: center;
      margin: 8rpx 0;
      box-sizing: border-box;
      padding: 30rpx 24rpx;
 }
 .qrimg{
     position: fixed;
     top: 50;
     left: 50;
     z-index: -1;
 }
</style>

琢磨一天写出来的，如有疑问，在下方评论留言，欢迎一起探讨~