uniapp中小程序页面结合二维码导出图片的方法

没空解释了自己慢慢研究
注意：在web端可以利用html2canvas插件，原理也非常简单
但是在小程序里没有document，所以要用canvas画，当然还可以用webview标签引入一个html页面再导出就行了（尝试中。。。。）
原理是第一步：

1. 用canvas标签画页面
2. 再用.draw画成功后保存到本地存储或者vuex中
3. 最后在点击导出图片的按钮上写个uniapp的 uni.saveImageToPhotosAlbum（）方法保存到相册

<template>
  <view class="feedback">
    <com-loading :hidden="!loading" />
    <bannerTitle
      title="团体二维码"
      back
    />
    <view
      class="success"
      :style="{ top: bgHeight }"
    >
      <canvas
        class="myCanvas"
        canvas-id="myCanvas"
      /> 
      <button
        type="primary"
        @tap="myimg()"
      >
        生成照片并保存至手机
      </button> 
 
      <view id="picture">
        <view class="titleTime">
          有效期截至{{ info.endDate }}
        </view>
        <view class="title_qr">
          {{ info.organizeName }}
        </view>
        <img
          class="head_bg"
          :src="info.qrCode"
        >
        <view class="tip_box">
          <view class="title_info">
            联系人信息
          </view>
          <view class="tip">
            <view class="left">
              团体联系人
            </view>
            <view class="right">
              {{ info.contactsName }}
            </view>
          </view>
          <view class="tip">
            <view class="left">
              证件号
            </view>
            <view class="right">
              {{ info.idNumber }}
            </view>
          </view>
          <view class="tip">
            <view class="left">
              团体详细地址
            </view>
            <view class="right address">
              {{ info.organizeAddress }}
            </view>
          </view>
        </view>
      </view>
      <!-- <view
        class="myBtn"
        :style="{ top: bgHeight }"
        style="color: #FE242B"
      >
        可直接手机截屏保存在本机！
      </view> -->
      <!-- 按钮 -->
      <view
        class="myBtn"
        :style="{ top: bgHeight }"
      >
        <u-button @tap="saveBase64Image">
          生成照片并保存至手机
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import { getOrganizeCode } from "@/api";  
let bgHeight = uni.getSystemInfoSync().statusBarHeight + 43 + 'px';
export default {
  data() {
    return {
      info: {
        endDate:'',
        organizeName: '',
        contactsName: '',
        idNumber: '',
        organizeAddress: ''
      },
      bgHeight: bgHeight,
      loading: false,
      //canvas画图
      poster: {},
      posterImage: '',
      canvasId: 'default_PosterCanvasId'
    };
  },

  computed: {

  },
  watch: {},
  onReady() {
  },
  onLoad: function (options) {
    
    this.getOrganizeCode(); 
  },
  onShow: function () {},
  methods: { 
    //点击生成图片并下载
    scxz(){
      let testCanvas = uni.createCanvasContext('myCanvas',this);
      let qrImg =  "../../static/1.png";  // 主图本地路径，也可以用网络地址 
      // 1.绘制大小及背景颜色
      testCanvas.setFillStyle('#fff'); // 默认白色 
      testCanvas.fillRect(0, 0, 200, 400); // fillRect(x,y,宽度，高度)
      // 2.写入文字
      testCanvas.setFontSize(16);
      testCanvas.setFillStyle('black');  
      testCanvas.fillText(`有效期截至2022-05-13`, 100, 25); 
      testCanvas.fillText('团体名字', 130, 55);
      testCanvas.font = 'bold 30px "PingFang SC"';
      testCanvas.textAlign = 'center';
    
      // 3.绘制二维码
      testCanvas.drawImage(this.info.qrCode, 50, 50, 250, 250); // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
    
      // 4.写入文字
      testCanvas.setFontSize(15);
      testCanvas.setFillStyle('black'); 
      testCanvas.fillText('联系人信息', 60, 350);
      testCanvas.setFontSize(10);
      testCanvas.fillText('团体联系人', 80, 390);
      testCanvas.fillText('迪丽热巴', 280, 390);
      testCanvas.fillText('证件号', 80, 420);
      testCanvas.fillText('211*******65', 280, 420);
      testCanvas.fillText('团体详细地址', 80, 450);
      testCanvas.fillText('中关村壹号', 280, 450);
      //合成
      testCanvas.draw(true,()=>{
        uni.canvasToTempFilePath({
          canvasId:'myCanvas',
          success: (res) => { 
            uni.getImageInfo({
              src:res.tempFilePath,
              success(re) { 
                uni.setStorageSync('imgs',re.path); 
              }
            });
          }
        });
      }); 
    },
    // 点击保存
    myimg(){
      console.log("保存为图片",uni.getStorageSync('imgs'));
      uni.saveImageToPhotosAlbum({
        filePath: uni.getStorageSync('imgs'),
        success: function() {
          uni.showToast({
            icon: 'none',
            position: 'bottom',
            title: "图片已下载至【图库】，请打开【图库】查看",
          });
        }
      });
    },  
    getOrganizeCode(){
      this.loading = true;
      getOrganizeCode().then(res=>{ 
        if (res.code===200) {
          this.info = res.data; 
          // 获取到数据后再绘画canvas
          this.scxz(); 
          this.loading = false; 
        }
      });
    },  
    // 点击生成二维码按钮 
    saveBase64Image() { 
      // var save = wx.getFileSystemManager();
      // var number = Math.random();
      // save.writeFile({
      //   filePath: wx.env.USER_DATA_PATH + "/pic" + number + ".png",
      //   data: this.info.qrCode.slice(22),
      //   encoding: "base64",
      //   success: (res) => {
      //     wx.saveImageToPhotosAlbum({
      //       filePath: wx.env.USER_DATA_PATH + "/pic" + number + ".png",
      //       success: function (res) {
      //         wx.showToast({
      //           title: "保存成功",
      //         });
      //       },
      //       fail: function (err) {
      //         wx.getSetting({
      //           success(res) {
      //             if(res.authSetting['scope.writePhotosAlbum']) { // 已授权,用户点击了取消按钮,无需其他操作
      //               uni.showToast({
      //                 icon: 'none',
      //                 title: '取消'
      //               });
      //             }
      //             if(res.authSetting['scope.writePhotosAlbum'] === false) { // 未授权,需用户跳转设置页面开启权限
      //               uni.showModal({
      //                 title: '提示',
      //                 content: `图片保存失败，请前往设置页面允许保存相册`,
      //                 confirmColor: '#439AEA',
      //                 success: function (res) {
      //                   if (res.confirm) {
      //                     // console.log('用户点击确定');
      //                     uni.openSetting({
      //                       success(res) {
      //                         // console.log('用户打开设置页面');
      //                       }
      //                     });
      //                   } else if (res.cancel) {
      //                     // console.log('用户点击取消');
      //                     uni.showToast({
      //                       icon: 'none',
      //                       title: '取消'
      //                     });
      //                   }
      //                 }
      //               });
      //             }
      //           }
      //         });
      //       },
      //     });
      //     console.log(res);
      //   },
      //   fail: (err) => {
      //     console.log(err);
      //   },
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
.feedback {
  min-height: 100vh;
  background: url("https://azero-dev.oss-cn-beijing.aliyuncs.com/survey/antigen/index_background.png")
    no-repeat;
  background-size: 100% 683rpx;
  overflow-y: auto;
  height: 100vh;
  .success {
    background: #fff; 
    margin: 0 30rpx;
    border-top: 16rpx solid #f8f8f8;
    text-align: center;
    position: relative;
    box-shadow: 0px 2rpx 15rpx 0px rgba(11, 49, 174, 0.08);
    border-radius: 25rpx;
    padding-bottom: 100rpx;
    .myCanvas{
      width: 100%;
      height: 1200rpx;
      border:1rpx solid red;
    }
    .head_bg {
      width: 500rpx;
      height: 500rpx;
      margin-bottom: 70rpx;
    }
    .titleTime {
      margin-top: 40rpx;
    }
    .title_qr {
      margin-top: 40rpx;
      font-size: 36rpx;
      font-weight: 600;
      height: 38rpx;
      font-size: 36rpx;
      font-weight: 500;
      color: #000000;
      line-height: 42rpx;
      margin-bottom: 48rpx;
    }
    .tip_box {
      padding-top: 90rpx;
      border-top: 2rpx dotted #427cef;
      .title_info {
        padding: 0 37rpx;
        height: 34rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
        line-height: 34rpx;
        text-align: left;
        margin-bottom: 27rpx;
      }
    }
    .tip {
      font-size: 26rpx;
      display: flex;
      padding: 0 80rpx;
      height: 70rpx;
      vertical-align: middle;
      .left {
        text-align: left;
        width: 35%;
      }
      .right {
        text-align: right;
        width: 65%;
      }
      .address {
        vertical-align: middle;
      }
    }
  }
}
.myBtn {
  width: 500rpx;
  line-height: 88rpx;
  height: 88rpx;
  border-radius: 10rpx;
  opacity: 1;
  margin-left: 124rpx;
  margin-top: 80rpx;
  /deep/.u-button {
    height: 88rpx;
    border-radius: 10rpx;
    opacity: 1;
    border: 2rpx solid #4293f4;
    font-size: 32rpx;
    font-weight: 400;
    color: #4293f4;
  }
}
</style>