Programme WeChat Mini : Générez une affiche personnalisée et enregistrez-la localement et générez un code QR avec logo et identifiant

Lorsque je travaillais sur un projet cette semaine, on m'a assigné une nouvelle exigence pour générer une affiche. L'utilisateur a enregistré l'image pour la partager localement
et avait une exigence pour le code QR : générer un petit code de programme et un code QR, et le code QR généré Vous devez disposer d'un ID utilisateur
et avoir du temps libre pour partager
le code comme suit :

import QRCode from '../../utils/plugins/weapp.qrcode.js'
// import QRCode from '../../utils/plugins/weapp-qrcode.js' 不带logo的二维码
Page({
    
    

  /**
   * 生成二维码：
   * 生成带参数id的二维码，由app端用户扫码，app获取参数
   * 生成小程序码，用户扫码进入指定小程序页面
   */
  data: {
    
    
    imagePath: "",
    maskHidden: false,
    user_img: 'https://img0.baidu.com/it/u=1835384573,4158682262&fm=11&fmt=auto&gp=0.jpg',
    qrcode_image: '',
  },

  onShow: function () {
    
    
    var that = this;
    wx.showLoading({
    
    
      title: '二维码生成中...',
      mask: true
    })

    this.getQRCode()

    // that.qrcode_image();
    wx.getImageInfo({
    
    
      src: this.data.qrcode_image,
      success(res) {
    
    
        console.log("二维码:" + res.path);
        that.setData({
    
    
          qrcode_image: res.path,
        })
      }
    })
    wx.getImageInfo({
    
    
      src: that.data.user_img,
      success(res) {
    
    
        console.log("头像:" + res.path);
        that.setData({
    
    
          user_img: res.path
        })
      }
    })
  },

  // 生成不带logo的二维码（用户app扫码获取id）
  // getQRCode() {
    
    
  //   new QRCode('myQrcode', {
    
    
  //     image: { imageResource: '../../assets/images/[email protected]', dx: 0, dy: 0, dWidth: 100, dHeight: 100 },
  //     text: this.data.userInfo.Id, // 传递的数据
  //     width: 200,
  //     height: 200,
  //     padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
  //     correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
  //     callback: (res) => {
    
    
  //       console.log(res.path)
  //       this.data.qrcode_image = res.path
  //       // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
  //     },
  //   })
  // },
  
// 生成带logo的二维码
  getQRCode() {
    
    
    QRCode({
    
    
      image: {
    
    
        imageResource: '../../assets/images/log_icon_logo.png',// svg图再真机测试会出不来，换成png的可以，且只能是本地图片
        dx: 71.5,
        dy: 71.5,
        dWidth: 57,
        dHeight: 57
      },
      text: this.data.userInfo.Id, // 传递的数据，获取不到则不能生成二维码
      width: 200,
      height: 200,
      canvasId: 'myQrcode',
      _this: this,
      callback: () => {
    
    
        setTimeout(() => {
    
    
          wx.canvasToTempFilePath({
    
    
            canvasId: 'myQrcode',
            success: res => {
    
    
              console.log(res.tempFilePath)
              this.setData({
    
    
                qrcode_image: res.tempFilePath
              })
            }
          }, this)
        }, 500)
      },
    })
  },

  //点击生成海报
  formSubmit: function (e) {
    
    
    var that = this;
    wx.showToast({
    
    
      title: '海报生成中...',
      icon: 'loading',
      duration: 1000
    });
    that.createNewImg();
    setTimeout(function () {
    
    
      wx.hideToast()
      that.setData({
    
    
        maskHidden: true
      });
    }, 1000);
  },
  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg: function () {
    
    
    var that = this;
    
    // 创建画布
    var context = wx.createCanvasContext('mycanvas');
    context.clearRect(0, 0, 375, 800);
    context.setFillStyle("#fff")
    context.fillRect(0, 0, 375, 800)
    context.save(); //保存之前的画布设置


    // 绘制渐变背景
    var lg1 = context.createLinearGradient(0, 0, 0, 400);
    // 参数：x0：渐变开始点的 x 坐标，
    // 参数：y0：渐变开始点的 y 坐标，
    // 参数：x1：渐变结束点的 x 坐标，
    // 参数：y1：渐变结束点的 y 坐标
    lg1.addColorStop(0, '#2869FF');
    lg1.addColorStop(1, '#FFFFFF');
    context.fillStyle = lg1;
    context.beginPath();
    context.fillRect(6, 50, 363, 407);
    context.save();

    // 绘制渐变按钮
    var lg2 = context.createLinearGradient(0, 0, 410, 0);
    // 参数：x0：渐变开始点的 x 坐标，
    // 参数：y0：渐变开始点的 y 坐标，
    // 参数：x1：渐变结束点的 x 坐标，
    // 参数：y1：渐变结束点的 y 坐标
    lg2.addColorStop(0, '#4C7CFF');
    lg2.addColorStop(1, '#315AD8');
    context.fillStyle = lg2;
    context.beginPath();
    context.fillRect(6, 437, 363, 40);
    context.save(); //保存之前的画布设置

    // 获取图片路径
    var path1 = that.data.qrcode_image;
    console.log("营销员二维码" + path1);
    // var path2 = that.data.qrcode_image;
    // console.log("小程序二维码" + path2);
    var path3 = that.data.user_img;
    console.log("用户头像" + path3);

    // 绘制标题
    context.setFontSize(20);
    context.setFillStyle('#fff');
    context.setTextAlign('left');
    context.font = 'normal bold 20px sans-serif';
    context.fillText("- 扫描二维码关联营销员 -", 68.5, 110);// context.fillText(text,x,y,maxWidth);
    context.stroke();
    context.save();


    // 绘制按钮黄色背景
    context.fillStyle = "#FFB73F";
    context.beginPath();
    context.fillRect(188, 445, 23, 22);
    context.save(); //保存之前的画布设置

    // 绘制文字
    var titl = "荀彧";
    context.setFontSize(20);
    context.setFillStyle('#fff');
    context.setTextAlign('left');
    context.font = 'normal bold 20px sans-serif';
    context.fillText(titl, 184, 152);
    context.stroke();
    context.save();

    var tit2 = "测";
    context.setFontSize(20);
    context.setFillStyle('#fff');
    context.setTextAlign('left');
    context.font = 'normal bold 20px sans-serif';
    context.fillText(tit2, 165, 464);
    context.stroke();
    context.save();

    var tit2 = "试";
    context.setFontSize(20);
    context.setFillStyle('#315AD8');
    context.setTextAlign('left');
    context.font = 'normal bold 20px sans-serif';
    context.fillText(tit2, 190, 464);
    context.stroke();
    context.save();

    // 绘制头像
    context.beginPath();
    context.arc(162, 144, 16, 0, 2 * Math.PI);
    context.setStrokeStyle("#44bf8c");
    context.clip(); //裁剪上面的圆形
    context.drawImage(path3, 146, 128, 34, 34); // 此处的x,y相对于arc的x,y
    context.restore();
    context.closePath();
    context.save(); //保存之前的画布设置

    // 绘制二维码
    context.drawImage(path1, 86, 184, 203, 203);
    context.save(); //保存之前的画布设置

    context.draw(true);//true表示保留之前绘制内容

    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function () {
    
    
      wx.canvasToTempFilePath({
    
    
        canvasId: 'mycanvas',
        success: function (res) {
    
    
          var tempFilePath = res.tempFilePath;
          that.setData({
    
    
            imagePath: tempFilePath
          });
        },
        fail: function (res) {
    
    
          console.log(res);
        }
      });
    }, 1000);
  },

  //点击保存到相册
  baocun: function () {
    
    
    var that = this
    wx.saveImageToPhotosAlbum({
    
    
      filePath: that.data.imagePath,
      success(res) {
    
    
        wx.showToast({
    
    
          title: '图片已保存到相册',
          icon: 'none',
          duration: 2000
        })
        that.setData({
    
    
          maskHidden: false
        })
      },
      fail(){
    
    
        that.setData({
    
    
          maskHidden: false
        })
      }
    })
  },

  qrcode_image: function () {
    
    
    let that = this;
    wx.request({
    
    
      url: 'https://api.weixin.qq.com/cgi-bin/token',
      data: {
    
    
        grant_type: 'client_credential',
        appid: '', //不能缺少
        secret: '' //不能缺少
      },
      success: function (res) {
    
    
        wx.request({
    
    
          url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + res.data.access_token,
          data: {
    
    
            "path": "pages/index/index", //默认跳转到主页:pages/index/index，可指定
            "width": 200,
            "scene": "type=0&evaId=" + that.data.id,
          },
          responseType: 'arraybuffer', // 这行很重要,转为二进制数组
          header: {
    
    
            'content-type': 'application/json;charset=utf-8'
          },
          method: 'POST',
          success(res) {
    
    
            //转为base64
            let bin64 = wx.arrayBufferToBase64(res.data);

            that.setData({
    
    
              //base 64设置到页面上
              qrcode_image: "data:image/png;base64," + bin64
            });
          }
        })
      }
    })
  }
})

Le code de la page est le suivant :

<view class="code_container">
  <view class="code_box">
    <view class="code_tit">- 扫描二维码关联营销员 -</view>
    <view class="code_info">
      <image src="{
     
     {user_img}}" mode="aspectFill"></image>
      <text class="code_name">荀彧</text>
    </view>
    <canvas
      hidden="{
     
     {maskHidden == true}}"
      class="code_img"
      canvas-id="myQrcode"
      style="background:#fff;width: 200px;height: 200px;z-index:1"
    />
  </view>
  <view class="code_btn" bindtap="formSubmit">保存到相册</view>
</view>

<view class='imagePathBox' hidden="{
     
     {maskHidden == false}}">
  <image src="{
     
     {imagePath}}" class='shengcheng'></image>
  <view class="save_img" bindtap="baocun">点击保存相册吧</view>
</view>
<view hidden="{
     
     {maskHidden == false}}" class="mask"></view>
<view class="canvas-box">
  <canvas style="width:375px;height:670px;position:fixed;top:9999px" canvas-id="mycanvas" />
</view>

Le code de style est le suivant :

/* pages/code/code.wxss */
page {
    
    
  background: #EDEDED;
}


.imagePathBox {
    
    
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.mask {
    
    
  width: 100%;
  height: 100%;
  /* background: rgba(0,0,0,0.7); */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
}

.shengcheng {
    
    
  width: 80%;
  height: 80%;
  position: fixed;
  top: 50rpx;
  left: 50%;
  margin-left: -40%;
  z-index: 10;
}


.shareFriends {
    
    
  display: block;
  width: 80%;
  height: 104rpx;
  padding: 0;
  line-height: 80rpx;
  text-align: center;
  position: fixed;
  bottom: 50rpx;
  left: 10%;
  background: #45be8d;
  color: rgb(211, 208, 208);
  font-size: 32rpx;
  border-radius: 44rpx;
}


button[class="baocun"]::after {
    
    
  border: 0;
}

/* canvas绘图 */
/* .canvas-box{
  width:0rpx;
  height:0rpx;
  overflow: hidden;
  position: fixed;
  left:0rpx;
  bottom:30rpx;
  z-index: 9999;
} */
.code_container {
    
    
  padding: 20rpx 12rpx;
}

.code_box {
    
    
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(180deg, #4C7CFF 10%, #FFFFFF 73%, #FFFFFF 99%);
  border-radius: 16rpx;
  justify-content: center;
  align-items: center;
  padding: 60rpx 0 50rpx;
}

.code_tit {
    
    
  font-size: 40rpx;
  color: #FFFFFF;
  font-weight: 700;
}

.code_info {
    
    
  margin-top: 28rpx;
  height: 65rpx;
  line-height: 65rpx;
  display: flex;
  justify-content: center;
}
.code_name {
    
    
  font-size: 40rpx;
  color: #FFFFFF;
  font-weight: 700;
  margin-left: 12rpx;
}

.code_info image {
    
    
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
}

.code_img {
    
    
  width: 406rpx;
  height: 406rpx;
  border-radius: 4rpx;
  margin-top: 60rpx;
}

.code_btn{
    
    
  background: #4C7CFF;
  border-radius: 54rpx;
  width: 566rpx;
  height: 108rpx;
  line-height: 108rpx;
  text-align: center;
  color: #fff;
  font-size: 34rpx;
  font-weight: 700;
  margin: 60rpx auto 0;
}

.save_img{
    
    
  background: #4C7CFF;
  border-radius: 6rpx;
  font-size: 30rpx;
  font-weight: 400;
  width: 80%;
  height: 80rpx;
  padding: 0;
  line-height: 80rpx;
  text-align: center;
  position: fixed;
  bottom: 80rpx;
  left: 10.5%;
  color: #fff;
}

L'effet courant est le suivant :

Effet de sauvegarde Apple X :

---

Il n'y a rien de mal avec le test