小程序生成海报并保存到相册

留存一下

wxml

<view bindtap='formSubmit'>点击生成商品海报</view>

<!--生成海报  -->
<view class='imagePathBox' hidden="{{maskHidden == false}}">
    <image src="{{imagePath}}" class='shengcheng'></image>
    <button class='baocun' bindtap='baocun'>保存到相册</button>
</view>
<view hidden="{{maskHidden == false}}" class="mask"></view>
<view class="canvas-box">
    <canvas style=" 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" />
</view>

wxss

/* 生成海报的css */
.bgImg{
  display: block;
   100%;
  height: 366rpx;
}
.mine{
  display: block;
  text-align: center;
  color: #333;
  margin-top: 44rpx;
}
.code{
  display: block;
  text-align: center;
  color: #333;
  font-size: 76rpx;
  font-weight: bold;
  margin-top: 30rpx;
}
.who{
  display: block;
  margin-top: 80rpx;
  font-size: 32rpx;
  color: #333;
  text-align: center;
}
.inputBox{
  text-align: center;
  margin-top: 44rpx;
}
.input{
  text-align: center;
   440rpx;
  height: 88rpx;
  border-radius: 44rpx;
  background: #f5f5f5;
  font-size: 32rpx;
  display: inline-block;
}
.btn{
   160rpx;
  height: 88rpx;
  border-radius: 44rpx;
  background:linear-gradient(90deg,rgba(255,226,0,1),rgba(255,200,11,1));
  box-shadow: 0px 4px 8px 0px rgba(255,200,11,0.5); 
  color:#333;
  font-size: 32rpx;
  display: inline-block;
  line-height: 88rpx;
  margin-left: 40rpx;
}
button[class="btn"]::after {
  border: 0;
} 
.tishi{
  display: block;
  text-align: center;
  color: #999;
  margin-top: 30rpx;
}
.shareText{
  display: block;
  text-align: center;
  color: #333;
  font-size: 28rpx;
  margin-top: 100rpx;
}
.imgBox{
  text-align: center;
   100%;
  margin-top:60rpx;
  padding-bottom: 120rpx;
}
.img{
  display: inline-block;
   100%;
  height: 100%;
}
.m_l{
  margin-left: 180rpx;
}
.zfbtn{
  display: inline-block;
   120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: transparent;
  outline: none;
  border: 0;
  padding: 0;
}
button[class="zfbtn"]::after {
  border: 0;
} 
button[class="zfbtn m_l"]::after {
  border: 0;
} 
.imagePathBox{
   100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.shengcheng{
   80%;
  height: 80%;
  position: fixed;
  top: 50rpx;
  left:10%;
  z-index: 10;
}
.baocun{
  display: block;
   80%;
  height: 80rpx;
  padding: 0;
  line-height: 80rpx;
  text-align: center;
  position: fixed;
  bottom: 50rpx;
  left: 25%;
  background: #E02020;
  color: #333;
  font-size: 32rpx;
  border-radius: 44rpx;
}
button[class="baocun"]::after{
  border: 0;
}

wx.js

// 海报上

    //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
    createNewImg: function () {
      var that = this;
      var context = wx.createCanvasContext('mycanvas');
      context.setFillStyle("#fff")
      context.fillRect(0, 0, 375, 667)
      var path = "/images/c2.jpg";
      //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
      //不知道是什么原因，手机环境能正常显示
      context.drawImage(path, 60, 50, 250, 250);  //上面的方框
      
      //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片  c2.jpg
      // var path2 = "/images/c2.jpg";
      // var path3 = "/images/c2.jpg";
      // var path4 = "/images/c2.jpg";
      // var path5 = "/images/c2.jpg";
      // context.drawImage(path2, 126, 186, 120, 120);
      //不知道是什么原因，手机环境能正常显示
      // context.save(); // 保存当前context的状态
  
      
      //绘制名字
      var nameqian = that.data.nameqian;
      context.setFontSize(18);
      context.setFillStyle('#333333');
      context.setTextAlign('center');
      context.fillText(nameqian, 185, 340);
      context.stroke();
      //绘制一起吃面标语
      var namehou = that.data.namehou
      context.setFontSize(18);
      context.setFillStyle('#333333');
      context.setTextAlign('center');
      context.fillText(namehou, 185, 370);
      context.stroke();
      //绘制验证码背景
      // context.drawImage(path3, 48, 390, 280, 84);
      //绘制价钱
      context.setFontSize(24);
      context.setFillStyle('#E02020');
      context.setTextAlign('center');
      context.fillText( '￥' + that.data.jiaqian, 85, 435);
      context.stroke();
      //绘制 返积分
      context.setFontSize(20);
      context.setFillStyle('#FB7217');
      context.setTextAlign('center');
      context.fillText( '返积分', 185, 433);
      context.stroke();
       //绘制 邀请码
       context.setFontSize(20);
       context.setFillStyle('#202020');
       context.setTextAlign('center');
       context.fillText( '邀请码 : '  + that.data.code, 175, 620);
       context.stroke();
      //绘制圆形二维码
      var path1 = "/images/c2.jpg";
      context.arc(186, 510, 50, 0, 1.9 * Math.PI) //画出圆
      context.strokeStyle = "#ffe200";
      context.clip(); //裁剪上面的圆形
      context.drawImage(path1, 136, 460, 100, 100); // 在刚刚裁剪的园上画图
      context.draw();
      //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
      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);
    },
    //点击保存到相册
    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){
              console.log(11111)
            }
          })
        }
      })
    },
    //点击生成
    formSubmit: function (e) {
      var that = this;
      this.setData({
        maskHidden: false
      });
      wx.showToast({
        title: '生成中...',
        icon: 'loading',
        duration: 1000
      });
      setTimeout(function () {
        wx.hideToast()
        that.createNewImg();
        that.setData({
          maskHidden: true
        });
      }, 1000)
    },
  // 海报下