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\');
              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\'
                              });
                          }
                      });
                  });
              }
         },
        //保存
        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>