微信小程序用canvas画海报生成照片保存相册

微信小程序用canvas画海报生成照片保存相册

效果展示

代码实现

1.wxml

<button bindtap='formSubmit'>生成海报</button>
   <view class='imagePathBox' hidden="{{maskHidden == false}}">
      <image src="{{imagePath}}" class='create'></image>
      <view class="poster-button">
       <button class='keep' bindtap='keep'>保存相册，分享到朋友圈</button>
      </view>
    </view>
   <view hidden="{{maskHidden == false}}" class="mask"></view> 
  <view class="canvas-box">
      <canvas  style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas"/>
  </view>  

2.wxss

.imagePathBox{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
}
.create{
width: 80%;
height: 80%;
position: fixed;
top: 50rpx;
left: 50%;
margin-left: -40%;
z-index: 10;
}
.poster-button{
position: fixed;
bottom:50rpx;
width: 100%;
height:80rpx;
display: flex;
align-items: center;
justify-content: center;
}
.keep{
width: 80%;
border-radius: 98rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 80rpx;
background: #6899FF;
color: #ffffff;
font-size: 25rpx;
}
button[class="keep"]::after{
border: 0;
}

3.js

const app = getApp()
Page({
  data: {
    maskHidden: false,
  },
 
  //将canvas转换为图片保存到本地
  createNewImg: function () {
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    context.setFillStyle("#6899FF")
    context.fillRect(0, 0, 375, 667)
    var path = "/image/3.png";
    context.drawImage(path, 10, 10, 355, 647);
  
    context.setFontSize(24);
    context.setFillStyle('#E0A859');
    context.setTextAlign('center');
    context.fillText("楼/盘/推/荐", 180, 50);
    context.stroke();

    context.setFontSize(14);
    context.setFillStyle('#949494');
    context.setTextAlign('center');
    context.fillText("—— 向您推荐一个好楼盘 ——", 180, 80);
    context.stroke();

   var path1 = "/image/27.jpg";
    context.drawImage(path1, 20, 100, 335, 217);
    var path2 = "/image/1.jpg";
    context.drawImage(path2, 146, 520, 80, 80);
 

    context.setFontSize(20);
    context.setFillStyle('#5A5472');
    context.setTextAlign('left');
    context.fillText("风清云都", 30, 347);
    context.stroke();

    context.setFontSize(20);
    context.setFillStyle('#FD7B48');
    context.setTextAlign('right');
    context.fillText("1200m^2", 335, 347);
    context.stroke();

    context.setFontSize(16);
    context.setFillStyle('#AAACBA');
    context.setTextAlign('left');
    context.fillText("地址：嘉兴市南湖区越秀北路洪兴交界处", 30, 377);
    context.stroke();

    context.setFontSize(16);
    context.setFillStyle('#AAACBA');
    context.setTextAlign('left');
    context.fillText("面积：29-50m^2", 30, 407);
    context.stroke();

    context.setFontSize(20);
    context.setFillStyle('#FD7B48');
    context.setTextAlign('left');
    context.fillText("地理位置好，环境优美，物超所值！", 30, 457);
    context.stroke();
    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);
  },
  //点击生成
  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)
  },
  //点击保存到相册
  keep: 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("失败")
          }
        })
      }
    })
  }
  
})