【微信小程序开发】 生成自定义小程序二维码码 通过 canvas 生成海报 保存成图片

功能很简单 直接上代码

 

html

canvas 定义画板 构造海报  .preview 生成海报图浏览 模板框 

<canvas canvas-id="shareImg" class="canvas-exp"></canvas>
<view hidden='{
  {previewHidden}}' class='preview'>
  <image src='{
  {preurl}}' mode='widthFix' class='previewImg'></image>
  <button type='primary' bindtap='save' style="background:#0A655A">保存到本地</button>
</view>
 
<view class="shares-btn">
  <button class="share" bindtap="share">
    <image src="images/icon_share.png" style="width:36rpx;" mode="widthFix"></image>
    <view class="share-title">分享</view>
  </button>
</view>

css

.canvas-exp{
  width:100%;height:606px;background:#fff;
}
.preview {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,1);
  position:fixed;
  top: 0;
  left: 0;
  z-index: 2;
}
.previewImg{
  width: 88%;
  position: absolute;
  top: 100rpx;
  left: 6%;
  z-index: 3;
  border: 1px solid #000;
  border-radius: 5px;
  max-height: 800rpx;
}
.preview button{
  width: 78%;
  position: absolute;
  top: 960rpx;
  left: 11%;
  border-radius: 2px;
}
.preview .cler{
  width: 64rpx;
  height: 64rpx;
  position: absolute;
  top: 1100rpx;
  left: 50%;
  margin-left: -32rpx;
}
.shares-btn{
  position: fixed;
  right: 20rpx;
  top: 20%;
  z-index: 101;
  transition: all 0.5s;
}
.share{
  width: 100rpx;
  height: 100rpx;
  background-color: #007aff;
  border-radius: 50%;
  color: #fff;
  font-size: 26rpx;
  padding: 0;
}
.share-title{
  margin-top: -14px;
  font-size:24rpx;
}
p{
  padding: 0;
  margin: 0;
}

核心代码 js

 

// pages/all/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentLineHeight: 0,
    previewHidden: true 
  },
  onLoad(){
    this.createCanvasContext()

  },
  createCanvasContext() {
    let that =this
    var expiration = wx.getStorageSync("index_data_expiration"); //拿到过期时间