uni APP 通过画布生成二维码和背景图的海报形式代码

二维码的生成可通过uni 的插件市场下载二维码生成插件。

<template>
    <view class="content">
        <view class="accounthead">
            <view class="status_bar"></view>
            <view class="header_title">
                <text class="iconfont icon-fanhui" @tap="back"></text>
                <view class="title">分享</view>
                <view class="btn_r" @tap="savePic">
                    <text>保存到相册</text>
                </view>
            </view>
        </view>
        <view class="post">
            <tki-qrcode class="qrcode" cid="qrcode" ref="qrcode" :val="val" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" :show="false" />
             <view class="wrapper"><canvas style="height: 100%;width: 100%;backgroundColor: #FFFFFF" canvas-id="firstCanvas"></canvas></view>
        </view>
    </view>
</template>
 
<script>
    import qr from "../../static/js/wxqrcode.js"
    import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
export default {
  data() {
    return {
            canvasShow: false,
            picurl:'',
            val: '', // 要生成的二维码值
            size: 325, // 二维码大小
            unit: 'upx', // 单位
            background: '#b4e9e2', // 背景色
            foreground: '#309286', // 前景色
            pdground: '#32dbc6', // 角标色
            icon: '', // 二维码图标
            iconsize: 40, // 二维码图标大小
            lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
            onval: false, // val值变化时自动重新生成二维码
            loadMake: true, // 组件加载完成后自动生成二维码
            src: '', // 二维码生成后的图片地址或base64
            cover:'static/share_bg.png'
    }
  },
  onLoad:function(option){
      var thas=this
      thas.val=option.devicenumber
  },
  methods: {
       qrR(path) {
          let that = this;
          this.qr_path = path;
          let system_info = uni.getSystemInfoSync();
          let ctx = uni.createCanvasContext('firstCanvas');
          uni.getImageInfo({
              src: that.cover,
              success(res) {
                  console.log(res.path);
                  ctx.drawImage(res.path, 0, 0, uni.upx2px(750), uni.upx2px(1330));
                  ctx.drawImage(path, uni.upx2px(184), uni.upx2px(630), uni.upx2px(375), uni.upx2px(400));
                  ctx.draw(false, () => {
                      uni.canvasToTempFilePath({
                          x: 0,
                          y: 0,
                          width: 375,
                          height: uni.upx2px(1330),
                          destWidth: 375,
                          destHeight: uni.upx2px(1330),
                          canvasId: 'firstCanvas',
                          success: function(res) {
                              uni.saveImageToPhotosAlbum({
                                  filePath: res.tempFilePath,
                                  success: function() {
                                      that.picurl=res.tempFilePath
                                  }
                              });
                          },
                          fail(e) {
                              uni.showToast({
                                  title: '生成海报失败',
                                  icon: 'none'
                              });
                          }
                      });
                  });
              },
              fail(error) {
                  console.log(error);
              }
            })
         },
        //保存
        savePic () {
            uni.showLoading({
                    title: '正在保存'
            });
            uni.saveImageToPhotosAlbum({
                filePath: this.picurl,
                success: function () {
                    uni.showToast({
                            title: '图片保存成功～'
                    });
                },
                fail: function (e) {
                },
                complete: function (){
                        uni.hideLoading()
                }
            });
        },
        back(){
            uni.navigateBack ({
                delta:1
            })
        }
  },
  components: {
      tkiQrcode
  },
}
</script>
<style lang="scss" scoped>
    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
        background: #fff;
    }
     .accounthead{
         background: #fff;
         width: 100%;
        
     }
     .header_title{
         padding: 0 24upx;
         display: flex;
         justify-content: space-between;
        align-items: center;
     }
     .title{
         font-size:36upx;
         font-family:Microsoft YaHei;
         font-weight:300;
         color:rgba(31,38,34,1);
         line-height:80upx;
        margin-left: 80upx;
     }
     .header_title text{
         font-size: 36upx;
     }
     .btn_r text{
              font-size:30upx;
              font-family:Microsoft YaHei;
              font-weight:300;
              color:rgba(31,38,34,1);
              line-height:80upx;
     }
    .post {
        height: 1320upx;
        position: fixed;
        top: 140upx;
        bottom: 0;
        left: 0;
        right: 0;
        .wrapper {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>