微信小程序：生成图片，发布朋友圈

微信提供接口，并不是很难，重点是思路，由于canvas原图，很难看，

直接用image进行展示，生成之后的图片，用遮罩加弹窗形式，展示，

直接用image进行展示，生成之后的图片，用遮罩加弹窗形式，展示，

直接用image进行展示，生成之后的图片，用遮罩加弹窗形式，展示，

有图有真相：

 css:

/*------------------------------------------- 生成图片-------------------------------------- */
.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: 55%;
  height: 80rpx;
  padding: 0;
  line-height: 80rpx;
  text-align: center;
  position: fixed;
  bottom: 50rpx;
  left: 10%;
  background: #fad575;
  color: #333;
  font-size: 32rpx;
  border-radius: 44rpx;
}
.quxiao{
  left: 70%;
  width: 20%;
}

js:

 //------------------------生成图片-----------------------------
  createAchievementImg: function (e) {
    var row = e.currentTarget.dataset;
    var that = this;
    this.setData({
      maskHidden: false
    });
    wx.showToast({
      title: '生成中...',
      icon: 'loading',
      duration: 1000
    });
    setTimeout(function () {
      wx.hideToast()
      that.createNewImg(row);
      that.setData({
        maskHidden: true
      });
    }, 1000)
  },
  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg: function (row) {
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    context.setFillStyle("#ffe200")
    context.fillRect(0, 0, 375, 667)
    var path = "../../imgs/bg.png";
    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
    //不知道是什么原因，手机环境能正常显示
    context.drawImage(path, 0, 0, wx.getSystemInfoSync().windowWidth, wx.getSystemInfoSync().windowHeight);
    var path1 = that.data.touxiang;
    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
    // var path2 = "/images/txquan.png";
    // context.drawImage(path2, 126, 186, 120, 120);
    //不知道是什么原因，手机环境能正常显示
    // context.save(); // 保存当前context的状态
    context.font = '700 26px 宋体'
    //绘制支行名称
    context.setFontSize(24);
    context.setFillStyle('#fad575');
    context.setTextAlign('center');
    context.fillText(row.name, 185, 340);
    context.stroke();
    //绘制姓名
    context.setFontSize(24);
    context.setFillStyle('#fad575');
    context.setTextAlign('center');
    context.fillText(row.realname, 185, 380);
    context.stroke();
    //绘制金额
    context.setFontSize(24);
    context.setFillStyle('#fad575');
    context.setTextAlign('center');
    context.fillText('' + row.money + '元', 185, 420);//成交
    context.stroke();
    //绘制验证码背景
    // context.drawImage(path3, 48, 390, 280, 84);
    // //绘制code码
    // context.setFontSize(40);
    // context.setFillStyle('#cccccc');
    // context.setTextAlign('center');
    // context.fillText(row.payear, 185, 435);
    // context.stroke();
    //绘制左下角文字背景图
    // context.drawImage(path4, 25, 520, 184, 82);

    //-----文字不能换行，需要自己设置换行
    // context.setFontSize(12);
    // context.setFillStyle('#333');
    // context.setTextAlign('left');
    // context.fillText("进入小程序输入朋友的邀请", 35, 540);
    // context.stroke();
    // context.setFontSize(12);
    // context.setFillStyle('#333');
    // context.setTextAlign('left');
    // context.fillText("码，朋友和你各自获得通用", 35, 560);
    // context.stroke();
    // context.setFontSize(12);
    // context.setFillStyle('#333');
    // context.setTextAlign('left');
    // context.fillText("优惠券1张哦~", 35, 580);
    // context.stroke();
    //绘制右下角扫码提示语
    // context.drawImage(path5, 248, 578, 90, 25);
    //绘制头像
    context.arc(186, 246, 50, 0, 2 * Math.PI) //画出圆
    context.strokeStyle = "#ff8800";
    context.clip(); //裁剪上面的圆形
    context.drawImage(path1, 136, 196, 100, 100); // 在刚刚裁剪的园上画图
    context.draw();
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          console.log(res);
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath,
            canvasHidden: true
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 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) {
              /* 该隐藏的隐藏 */
              that.setData({
                maskHidden: false
              })
            }
          }, fail: function (res) {
            console.log(11111)
          }
        })
      }
    })
  },
  quxiao:function(){
    this.setData({
      maskHidden: false
    })
  }

wxml

<!-- 生成图片展示 -->
 <view class='imagePathBox' hidden="{{maskHidden == false}}">
      <image src="{{imagePath}}" class='shengcheng'></image>
      <button class='baocun' bindtap='baocun'>保存相册，分享到朋友圈</button>
       <button class='baocun quxiao' bindtap='quxiao'>取消</button>
    </view>
    <!-- canvas原图很难看，一般隐藏 -->
  <canvas  style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas"/>

 注意点：

设置遮罩相关css代码：绝对定位，加上宽高都是百分之一百，同时四周距离都是0

让页面变量起作用，必须setData之后，才起作用（小白注意）

参考借鉴：https://www.cnblogs.com/zzgyq/p/8882995.html