微信小程序 点击生成朋友圈分享图

A:wxml(一定要加上image标签，如果你没有加的话，那么即使图片生成了，在页面上也是不会显示的，问过大神之后我才知道我之前一直没弄出来是因为我没加image标签)

1 <view hidden="{{maskHidden}}" class="mask"></view> 
2 <view class='canvas-box'>
3     <canvas style="width:750rpx; height:940rpx;" canvas-id="myCanvas"/>
4     <image src='{{imagePath}}'></image>  
5 </view>

B:wxss（canvas-box的样式运行出来不会受影响，就是千万别写top：0；一定要往下点，要不然会遮盖住原页面本身的东西，导致原页面button按钮全没效果）

1 .mask{position: fixed;top: 0;left: 0; width: 100%;height: 100%;background: rgba(0, 0, 0,1);opacity: 0; display: flex;justify-content: center; align-items: center;}
2 .canvas-box{position: fixed;top: 999999rpx;left: 0}

C：js

//share.js
Page({
  data: {
    imagePath: "/images/shareimg_bg.jpg",
    imageTx: "http://img0.imgtn.bdimg.com/it/u=1079555585,1801783759&fm=27&gp=0.jpg",
    imageEwm: "/images/ewm.jpg",
    maskHidden: true,
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    var size = this.setCanvasSize();//动态设置画布大小
    // this.createNewImg();
    //创建初始化图片
  },
  //适配不同屏幕大小的canvas    生成的分享图宽高分别是 750  和940，老实讲不知道这块到底需不需要，然而。。还是放了，因为不写这块的话，模拟器上的图片大小是不对的。。。
  setCanvasSize: function () {
    var size = {};
    try {
      var res = wx.getSystemInfoSync();
      var scale = 750;//画布宽度
      var scaleH = 940 / 750;//生成图片的宽高比例
      var width = res.windowWidth;//画布宽度
      var height = res.windowWidth * scaleH;//画布的高度
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error
      console.log("获取设备信息失败" + e);
    }
    return size;
  },
  //将1绘制到canvas的固定
  settextFir: function (context) {
    let that=this;
    var size = that.setCanvasSize();
    var textFir = "发了一个红包";
    console.log(textFir);
    context.setFontSize(24);
    context.setTextAlign("center");
    context.setFillStyle("#fee6b5");
    context.fillText(textFir, size.w / 2, size.h * 0.25);
    context.stroke();
  },
  //将2绘制到canvas的固定
  settextSec: function (context) {
    let that = this;
    var size = that.setCanvasSize();
    var textSec = "长按识别小程序，领奖金";
    context.setFontSize(14);
    context.setTextAlign("center");
    context.setFillStyle("#fee6b5");
    context.fillText(textSec, size.w / 2, size.h * 0.88);
    context.stroke();
  },
  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg: function () {
    var that = this;
    var size = that.setCanvasSize();
    var context = wx.createCanvasContext('myCanvas');
    var path = "/images/shareimg_bg.jpg";
    var imageTx = that.data.imageTx;
    var imageEwm = that.data.imageEwm;
    var imageZw = "/images/xcxewm.png";
    context.drawImage(path, 0, 0, size.w, size.h);
    context.drawImage(imageTx, size.w / 2 - 25, size.h * 0.02, size.w * 0.14, size.w * 0.14);
    context.drawImage(imageEwm, size.w / 2 - 60, size.h * 0.32, size.w * 0.33, size.w * 0.33);
    context.drawImage(imageZw, size.w / 2 - 25, size.h * 0.7, size.w * 0.14, size.w * 0.14);
    this.settextFir(context);
    this.settextSec(context);
    console.log(size.w, size.h)
    //绘制图片
    context.draw();
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    wx.showToast({
      title: '生成中...',
      icon: 'loading',
      duration: 2000
    });
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          console.log(tempFilePath);
          that.setData({
            imagePath: tempFilePath,
            canvasHidden: false,
            maskHidden: true,
          });
　　　　　　　　//将生成的图片放入到《image》标签里
          var img = that.data.imagePath;
          wx.previewImage({
            current: img, // 当前显示图片的http链接
            urls: [img] // 需要预览的图片http链接列表
          })
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 2000);
  },


})