功能很简单 直接上代码
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"); //拿到过期时间