小程序canvas生海报，分享朋友圈完整版开源

网上查了很多，都是不完整版，要么就是用不了的，气死我了。自己花了3天时间搞了个
利用wx.createCanvasContext方法，先看图

wx：9693312.png

<view class="main-page">
  <view bindtap="priviewImg" class="qr-area" id="qr-area" style="width: 600rpx;height: 900rpx;">
    <canvas canvas-id="shareCanvas" class="qr-canvas" style="width:100%;height:100%"></canvas>
  </view>
</view>
<view class="button_view">
  <button class="tap1" bindtap="tap1" hoverClass="tap1-hover">分享给好友</button>
  <view class="line_view" /><!-- 微信 9693312-->
  <button class="tap2" bindtap="tap2" hoverClass="tap2-hover">分享朋友圈</button>
</view>

page{
  background-color: #f8f8f8;
  padding-top: 40rpx;
  background: #fff;
}
.share{
  width: 300px;
  height: 380px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 100rpx;
  margin: auto;
}
.btn-box{
  padding: 1060rpx 60rpx 0 60rpx;
}
button{
  background: darkturquoise;
}





.main-page {
    box-sizing: border-box;
    padding: 30rpx;
    height: 100%;
    overflow: hidden;
}

.qr-area {
    margin: 0 auto 20rpx;
    
    box-shadow: 0 4px 20px 0 rgba(0,0,0,0.10);
}

.share-text {
    display: block;
    line-height: 40rpx;
    font-size: 28rpx;
    color: #2E2E2E;
    text-align: center;
    margin-bottom: 70rpx;
}

.btn-sub {
    font-size: 28rpx;
    line-height: 50rpx;
    color: #00D196;
    text-decoration-line: none;
    border: none;
    background-color: transparent;
}

.opera-area {
    background: none;
    display: block;
    text-align: center;
}

.btn-spec {
    display: inline-block;
    padding: 0;
    margin: 0 74rpx 0 0;
    background: none;
    text-align: center;
    font-size: 0;
    line-height: inherit;
}

.last {
    margin: 0;
}

.btn-spec text {
    font-size: 28rpx;
    color: #2E2E2E;
    text-align: center;
}

.btn-spec image {
    width: 80rpx;
    height: 80rpx;
    display: block;
    margin: 0 auto 20rpx;
}











/**  微信 9693312  **/
.button_view{
  display: flex;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box;
  left: 0;
  right: 0;
  align-items: center;
  margin: 0 auto;
  position: fixed;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 0 20px #e6e6e6;
  height: 100rpx;
  width: 580rpx;
  background-color: #fff;
}
.button_view .line_view {
  height: 30rpx;
  width: 0.2%;
  box-sizing: border-box;
  background-color: #eee;
}
.button_view button {
  color: #fff;
  height: 100rpx;
  width: 49.9%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 36rpx
}
button{
  background-color: transparent;
  border: none;
  position: relative;
  margin: 0;
  line-height: normal;
  padding: 0;
  border-radius: 0;
}
button::after {
  content: none;
}
button::before {
  width: 0;
  height: 0;
  border: none;
}

.tap1{
  background-color: rgba(14, 133, 245, 0.411);
}
.tap2{
  background-color: rgba(104, 14, 250, 0.39);
}
/**按下按钮颜色*/
.tap1-hover{
  background-color: rgba(36, 158, 233, 0.582);
}
.tap2-hover{
  background-color: rgba(104, 14, 250, 0.493);
}

let windowW = 0, windowH=0;
var bjx =0, bjy= 0, bjWidth =0, bjHeigh= 0;
var fx = 0, fy = 0, fWidth = 0, fHeigh = 0;
var ex = 0, ey = 0, eWidth = 0, eHeigh = 0;
var tx = 0, ty = 0,  tSize = 0, tStyle = "";
Page({
  data: {
    shareTitle: '长按查看闪照', // 分享标题
    shareCoverImg: 'http://tp.qxapk.com/xcx/img/ssa1.jpg', // 分享背景图
    shareQrImg: 'http://qiniu.jnwtv.com/H520181210164146322557972.jpg', // 分享小程序二维码
    fengmian: 'http://tp.qxapk.com/xcx/img/111.png'//封面图
  },
  onLoad: function (options) {
    /**
    wx.navigateTo({//通过该方法切换携带的 imgid  可以用  options.imgid接收
      url: "/pages/haibao/index?imgid=1",
    }) 
    */
    console.log(options);
    windowW = wx.getSystemInfoSync().windowWidth;
    windowH = wx.getSystemInfoSync().screenHeight;
    switch (options.imgid) {
      case "1":
        //背景图
        bjx = 0;
        bjy = 0;
        bjWidth = windowW * 0.8;
        bjHeigh = windowW * 1.2;
        this.data.shareCoverImg = 'http://tp.qxapk.com/xcx/img/sz1.jpg';

        //封面图
        fx = windowW * 0.12;
        fy = windowW * 0.17;
        fWidth = windowW * 0.56;
        fHeigh = windowW * 0.68;
        this.data.fengmian = 'http://tp.qxapk.com/xcx/img/111.png';

        //二维码
        ex = windowW * 0.17;
        ey = windowW * 0.93;
        eWidth = windowW * 0.2;
        eHeigh = windowW * 0.2;
        this.data.shareQrImg = 'http://qiniu.jnwtv.com/H520181210164146322557972.jpg';

        //文字
        tx = windowW * 0.21;
        ty = windowW * 0.53;
        tSize = windowW * 0.064;
        tStyle = "#FFF";
        break;
    }
    this.downloadImg();//生成图片
  },
  downloadImg: function () {
    let that = this;
    
    const ctx = wx.createCanvasContext('shareCanvas');// 创建画布
    wx.getImageInfo({//下载视频封面图
      src: that.data.shareCoverImg,
      success: (res2) => {
        ctx.drawImage(res2.path, bjx, bjy, bjWidth , bjHeigh);//背景图

        wx.getImageInfo({//下载视频封面图
          src: that.data.fengmian,
          success: (res8) => {
            ctx.drawImage(res8.path, fx, fy, fWidth, fHeigh);//背景图

            wx.getImageInfo({// 下载二维码
              src: that.data.shareQrImg,
              success: (res3) => {
                //二维码
                ctx.drawImage(res3.path, ex, ey, eWidth, eHeigh);

                //文字
                ctx.setFillStyle(tStyle);//颜色：黑色
                ctx.setFontSize(tSize);//字号：16px
                ctx.fillText(that.data.shareTitle, tx ,ty);
                ctx.draw(true);//制图结束
              }
            })
          }
        })
      }
    })
  },
  save_img() {//保存到相册
    wx.canvasToTempFilePath({
      canvasId: 'shareCanvas',
      success: function (res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function (res) {
            wx.showToast({ title: '分享图片已保存到相册' });
          }
        })
      }
    }, this)
  }
})

小程序canvas生海报，分享朋友圈完整版开源

推荐阅读更多精彩内容