小程序生成海报最完整代码

/* pages/distribut/poster/poster.wxss */
.canvas-image{
  /* width: 90%;
  height: 900rpx; */
  width: 690px;height:590px;
  margin:0 auto;
}
.haibao{  
  color:#fff;
  background:red;
  width:70%;
  margin:0 auto;
  border-radius:25px;
  margin-top:30rpx;}

// pages/distribut/poster/poster.js
var app = getApp();
var request = app.request;
var setting = app.globalData.setting;

Page({

  /**
   * 页面的初始数据
   */
  data: {
      qrcode:'',    //二维码路径
      back_url:'',  //背景图
      canvasType: false,//canvas是否显示
      imagePath: '', //合成图片地址
      _width:0,
      _heigth:0,
  },

  /*按生成图片按钮时*/
  createNewImg: function () {
    wx.showLoading({
      title: '正在绘制图片',
    })

  },
  // 保存图片
  baocun() {
    var that=this
    if(that.data.imagePath){
      wx.saveImageToPhotosAlbum({
        filePath: that.data.imagePath,
        success() {
          that.setData({
            showShareImg: false
          })
          wx.showToast({
            title: '图片保存成功，快去分享到朋友圈吧~',
            icon: 'none',
            duration: 2000
          })
        },
        fail() {
          wx.showToast({
            title: '保存失败',
            icon: 'none'
          })
        }
      })
    }else{
      wx.showLoading({
        title: '请先保存再生成',
      })
   setTimeout(
    ()=>{
      wx.hideLoading()
    }, 1000)
    }

  },


  createNewImg: function () {
    /*获取手机宽高*/
    let that = this
    let imgHeigth = this.data.swiperHeight
    let imgUrl = this.data.back_url
    let qrcodeUrl = this.data.qrcode
    wx.getSystemInfo({
      success(res) {
        that.setData({
          _width: res.windowWidth,
          _heigth: res.windowHeight,
          canvasType: true,
        })
               
      }
      })
      let _width = this.data._width,
      _heigth = this.data._heigth; //屏幕宽与高
    var context = wx.createCanvasContext('mycanvas');// 绘制背景
    context.setFillStyle("#eee");
    context.fillRect(20, 100, 0, 500);
    var back_url = that.data.back_url;  //背景图片
    var qrcode = that.data.qrcode;  //二维码
    context.drawImage(back_url,_width/9, _heigth/51, _width/1.25, _heigth/1.45);//背景图片
    context.drawImage(qrcode,_width/2.5, _heigth/2.08, _width/4.2, _width/4.2);//二维码
    context.stroke();
    context.draw();
    console.log('123')
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath,
            canvasHidden: true
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 200);
  },





  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    
    request.get('/api/user/getUserPoster', {
        success: function (res) {  
            console.log('******个人海报信息******',res)
            var qrcode=res.data.data.qrcode;
            var back_url=res.data.data.back_url;
            wx.downloadFile({
              url: back_url, //背景图
              success: function (res) {
                // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
                if (res.statusCode === 200) {
                  console.log("reererererer",res)
                  that.setData({
                    back_url: res.tempFilePath
                  })
                }
              }
            })
            wx.downloadFile({
              url: qrcode, //二维码
              success: function (res) {
                // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
                if (res.statusCode === 200) {
                  console.log("reererererer",res)
                  that.setData({
                    qrcode: res.tempFilePath
                  })
                }
              }
            })

                     
        }
    });

  },




  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {



  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

 <view class="canvas-image-box">
      <canvas canvas-id="mycanvas" style="width:{{_width}}px;height:{{_heigth/1.423}}px;"/>
 </view>

 <button class="haibao" bindtap="createNewImg">生成海报</button>
 <button bindtap="baocun" class="haibao">保存图片</button>

有啥搞不懂问我看到就回!!!