# 生成海报方式一
封装成组件方便调用
{
"component": true,
"usingComponents": {
"van-popup": "@vant/weapp/popup/index",
"van-icon": "@vant/weapp/icon/index"
}
}
@前端进阶之旅: 代码已经复制到剪贴板
<canvas canvas-id="poster-share" class="poster" />
<view bind:tap="handleShare">
<slot wx:if="{{useSlot}}" />
</view>
<van-popup custom-class="page-van-popup" show="{{ showShare }}" bind:close="shareClose">
<view class="df fxdc h100v w100v" wx:if="{{showShare}}">
<view class="df jcc aic fxa posr mt120" bind:tap="shareClose">
<image class="poster-image" src="{{ tempFilePath }}" mode="aspectFit" />
</view>
<view class="fxn h238 bgfff df aic jcc bdrs16t">
<view class="fxa w0 df aic jcc">
<view class="df fxdc posr">
<button class="posa t0 l0 w100p h100p op0" open-type="share" />
<image class="h108 w108" src="./assets/ic_fenxiang.svg" />
<text class="mt16 c333 fz28">分享好友</text>
</view>
</view>
<view class="fxa w0 df aic jcc">
<view class="df fxdc" bind:tap="savePicture">
<image class="h108 w108" src="./assets/ic_baocun.svg" />
<text class="mt16 c333 fz28">保存图片</text>
</view>
</view>
</view>
</view>
</van-popup>
@前端进阶之旅: 代码已经复制到剪贴板
@import "../../../../libs/wxss/index.wxss";
.container {
width: 100%;
}
.h377 {
height: 377rpx;
}
.h417 {
height: 417rpx;
}
.pb70 {
padding-bottom: 70rpx;
}
.bgview {
height: 651rpx;
opacity: .63;
}
.tip,
.share {
right: 0;
border-radius: 100rpx 0 0 100rpx;
width: 88rpx;
height: 36rpx;
background: #ffd300;
color: #007142;
}
.tip {
top: 75rpx;
}
.share {
top: 140rpx;
}
.title-wrap {
width: 100%;
height: 85rpx;
background: #fff0e5;
}
.shopping-num {
border-radius: 15rpx;
height: 28rpx;
background: linear-gradient(90deg, rgba(255, 64, 0, 1) 0%, rgba(255, 163, 41, 1) 100%);
}
.page-van-popup {
--popup-background-color: transparent;
}
.popup__content {
width: 590rpx;
height: 800rpx;
}
.poster {
position: fixed;
left: 0;
top: -1000000px;
z-index: 1000;
width: 570px;
height: 920px;
pointer-events: none;
}
.nodata {
padding-top: 150rpx;
height: 700rpx;
}
.count-down .van-count-down {
width: 200rpx;
line-height: unset;
font-size: 20rpx;
color: unset;
}
.poster-image {
width: 690rpx;
height: 920rpx;
}
.cffffff88 {
color: #fff88;
}
.w252 {
width: 252rpx;
}
@前端进阶之旅: 代码已经复制到剪贴板
调用组件
this.selectComponent('#poster').sharePoster({
sharePic: shareImageUrl
})
@前端进阶之旅: 代码已经复制到剪贴板
效果图
# 封装成组件库
使用方式
<view class="df fxdc h100v">
<view class="df jcc aic fxa posr">
<image
class="posa t0 l0 w100p h100p blur"
src="{{ bgImage }}"
wx:if="{{ bgImage }}"
mode="aspectFill"
/>
<canvas type="2d" id="poster-canvas" class="poster"></canvas>
</view>
<view class="fxn h238 bgfff df aic jcc bdrs16t">
<view class="fxa w0 df aic jcc">
<view class="df fxdc posr">
<button class="posa t0 l0 w100p h100p op0" open-type="share"></button>
<image class="h108 w108" src="./assets/ic_fenxiang.svg" />
<text class="mt16 c333 fz28">分享好友</text>
</view>
</view>
<view class="fxa w0 df aic jcc">
<view class="df fxdc" bind:tap="handleSave">
<image class="h108 w108" src="./assets/ic_baocun.svg" />
<text class="mt16 c333 fz28">保存图片</text>
</view>
</view>
</view>
</view>
@前端进阶之旅: 代码已经复制到剪贴板
page {
background: #5c5c5c;
}
.poster {
height: 862rpx;
width: 558rpx;
}
.blur {
filter: blur(100px);
}
@前端进阶之旅: 代码已经复制到剪贴板
效果预览
