小程序生成长图（预览，不限高度）+小程序码+小程序码中间logo换成自定义logo

上条博客已经介绍了如何云调用生成小程序码，链接地址：
https://blog.csdn.net/mingjuna2010/article/details/92796711
这条博客我们来介绍小程序中怎么生成长图，如何预览，并且在长图中绘制小程序码，以及小程序码中间的默认logo换成自定义logo。
①首先在页面上 index.wxml 准备一个画布，画布的宽度设定，高度不定。由于高度不定，所以预览时画布是不显示在页面上的，只提供画图功能，显示在页面上的是image标签，外层使用swiper-view，进行长图的上下滑动预览，视觉效果加上蒙层，代码如下：

<!-- 显示在页面上的image标签，即长图 -->
<scroll-view class="temp_day_box" style='max-height:900rpx;' scroll-y wx:if="{{sharing}}">
  <view>
     <image class="canvas_img" style='height:{{height*2}}rpx' src='{{shareImgSrc}}'></image>
  </view>
</scroll-view>

<!--显示长图是背景变暗，即蒙层-->
<view class="mask" catchtap='shareStop' catchtouchmove='preventTouchMove' wx:if="{{sharing}}"></view>

<!-- 不显示在页面上的画布-->
<canvas class='canvasHigh' style="height:{{height*2}}rpx" canvas-id='share'></canvas>

②在index.js文件中的data里面定义相应的参数，代码如下：

  data: {
    height: '',         //长图的高度
    sharing:false,      //控制长图是否显示
    shareImgSrc:'',     //最终长图（包括背景图，换过中间logo的小程序码）
    shareDocuments:''   //后端获取的长图的背景图
  },
  
  // 蒙层关闭事件
  shareStop() {
     this.setData({sharing: false})
  },

③在index.wxss里面添加画布样式，此时画布是不显示在页面上的，只是提供画图的功能，所以样式中设置了画布的宽度，并且使用固定定位将其移出屏幕，代码如下：

.canvasHigh {
  position: fixed;
  left: -9999rpx;
  top: -9999rpx;
  width: 600rpx;
}
.temp_day_box {
  width: 600rpx;
  position: fixed;
  top: 100rpx;
  left: 10%;
  z-index: 999;
}
.canvas_img {
  width: 600rpx;
}

④以上三步准备工作已经就绪，接下来就详细讲述shareImgSrc怎么产生的，index.js代码如下：

// 长图+二维码显示
  drawPage() {
    let _this = this
    // 获取图片信息（宽高）
    wx.getImageInfo({
      src: this.data.shareDocuments[0].url,   //这是长图的背景图，从服务端获取，这里就不详细赘述
      success(res) {
        _this.setData({
          height: res.height,   //背景图的高度
          width: res.width       //背景图的宽度
        })
        const ctx = wx.createCanvasContext("share");      //获取上下文对象
        ctx.drawImage(res.path, 0, 0, 300, _this.data.height);       //绘制背景图
        let that = _this
        wx.getImageInfo({
          src: that.data.code,      //之前获取的小程序码
          success(res) {
            ctx.drawImage(res.path, 150, that.data.height - 150, 125, 125);   //绘制小程序码
            let index = that
            wx.getImageInfo({
              src: index.data.orgLogo,   //需要替换的logo，从服务端获取，这里就不详细赘述
              success(res) {
                console.log("绘制中间logo")
                ctx.beginPath()   //开始创建一个路径
                ctx.setStrokeStyle('rgba(0,0,0,0)')   //画笔颜色换成透明
                ctx.arc(212.5, index.data.height - 87.5, 31.25, 0, 2 * Math.PI, false)    //画一个圆形裁剪区域
                ctx.stroke();
                ctx.clip()    //裁剪
                ctx.drawImage(res.path, 181.25, index.data.height - 118.75, 62.5, 62.5);    //绘制小程序码中间logo
                //最后将所有的绘制好的图片画出来，注意如果不需要保存的长图，可以直接ctx.draw()，但是需要保存的长图，需要先调用wx.canvasToTempFilePath这个API。
                ctx.draw(true, function () {
                  wx.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: 300,
                    height: that.data.height,
                    destWidth: 300,
                    destHeight: that.data.height,
                    canvasId: 'share',
                    success(res) {
                      that.setData({
                        shareImgSrc: res.tempFilePath
                      })
                    }
                  })
                });
              }
            })
          }
        })
      }
    })
  },

⑤接下来讲述一下如何保存长图，这个就比较简单了，index.js代码如下：

// 保存长图
  saveLongImage(){
    let _this = this
    wx.saveImageToPhotosAlbum({
      filePath: _this.data.shareImgSrc,
      success(res) {
     wx.showToast({
      title: '保存成功',
      icon: 'success',
})
//保存长图成功之后，1.5s之后关闭蒙层和长图
     setTimeout(function () {
              _this.shareStop()
            }, 1500)
          }
        })
      },