微信小程序生成海报

页面布局:

  <view class='imagePathBox' hidden="{{maskHidden == false}}">
      <image src="{{imagePath}}" class='shengcheng'></image>
      <button class='baocun' bindtap='baocun'>保存相册,分享到朋友圈</button>
      <image src="/images/close.png" class='close' bindtap="close"></image>
    </view>
   <view hidden="{{maskHidden == false}}" class="mask"></view> 
  <canvas canvas-id="mycanvas" style="width: 375px;height: 667px;position: fixed;top: 10000px;"></canvas>

样式:

.imagePathBox{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.shengcheng{
  width: 80%;
  height: 80%;
  position: fixed;
  top: 50rpx;
  left: 50%;
  margin-left: -40%;
  z-index: 10;
}
.baocun{
  display: block;
  width: 80%;
  height: 80rpx;
  padding: 0;
  line-height: 80rpx;
  text-align: center;
  position: fixed;
  bottom: 50rpx;
  left: 10%;
  background: #ffe200;
  color: #333;
  font-size: 32rpx;
  border-radius: 44rpx;
}
button[class="baocun"]::after{
  border: 0;
}
.close{
  width: 30px;
  height: 30px;
  top: 3%;
  right:  8%;
  position: fixed;
  z-index: 11;
}

js代码

const app = getApp();
Page({
  data: {
    maskHidden: false,
    imagePath : ""
  },
  onLoad: function (options) {
    this.sendCover(); //生成海报
  },
  //生成海报
  sendCover : function(){
    var that = this;
    var bannelUrl = "网络图片地址";
    wx.showLoading({
      title: '生成中',
    });
    //下载网络图片
    wx.downloadFile({
      url: bannelUrl, //仅为示例,并非真实的资源
      success: function (res) {
        // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
        if (res.statusCode === 200) {
          console.log(res, "reererererer")
          let banner =  res.tempFilePath;

          //画布大小 375*667
          var context = wx.createCanvasContext('mycanvas', that);
          context.setFillStyle("#ffffff")
          context.fillRect(0, 0, 375, 667)
          //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题,不显示图片

          //第一张图 1:1 的长宽
          var path2 = banner;
          context.drawImage(path2, 0, 0, 375, 375);


          //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题,不显示图片
          //第二章图 1:1的长宽
          path2 = "/images/logo.jpg";
          context.drawImage(path2, 112.5, 517, 150, 150);

          var name = "土鸡蛋";
          //绘制名字
          context.setFontSize(24);
          context.setFillStyle('#333333');
          context.setTextAlign('center');
          context.fillText(name, 50, 410);
          context.stroke();

          //绘制价格
          context.setFontSize(20);
          context.setFillStyle('#f18213');
          context.setTextAlign('center');
          context.fillText("25", 40, 450);
          context.stroke();

          //绘制关注
          context.setFontSize(18);
          context.setFillStyle('#f18213');
          context.setTextAlign('center');
          context.fillText("长按二维码,浏览更多详情", 180, 500);
          context.stroke();

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


        }
      }
    })

    


  },
  //保存到相册
  baocun : function(){
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imagePath,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册,分享到朋友圈吧~',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#333',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              /* 该隐藏的隐藏 */
              that.setData({
                maskHidden: false
              })
            }
          }, fail: function (res) {
            
          }
        })
      }
    })
    
  },
  close : function(){
    this.setData({
      maskHidden: false
    })
  }
})