<template>
<view class="text-center padding">
<text class="text-bold text-xl">长按分享给您的好友</text>
<view class="canvas">
<canvas class="poster-canvas" :style="[{ width:screenWidth+'px',height:screenHeight+'px'}]" canvas-id="firstCanvas">
</canvas>
</view>
</view>
</template>
<script>
export default {
data() {
return {
PosterPath: uni.getStorageSync('defule_poster'),
qrcodeSrc:'',
imgPath:"/static/1.jpg",//保存图片的路径
screenHeight:1334,
screenWidth:750,
avatarUrl:'',
test:'0',
isPath:false
};
},
onLoad(options){
const context = uni.createCanvasContext('firstCanvas');
context.drawImage(imgPath,0,0,750,1334);
},
}
</script>
<style>
page{
background-color: #F1F1F1;
}
.page-foot {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 30;
background-color: #282828;
}
.tips {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
background: #ffffff;
font-size: 16px;
font-weight: 500;
color: #dd5544;
}
.posterImg {
position: fixed;
left: 10;
top: 10;
width: 90%;
height: 85%;
/* vertical-align: middle; */
}
.poster-canvas {
position: fixed;
right: 100vw;
bottom: 100vh;
}
.canvas{
padding: 20px;
display: flex;
justify-content: center;
}
.bottom{
padding: 20upx 0;
width: 100%;
display: flex;
justify-content: space-around;
position: fixed;
bottom: 0;
background-color:#ffffff;
}
.bottom view:first-child{
padding: 20upx 60upx;
background:#FF8A00;
border-radius:44upx;
font-size:30upx;
color:#FFFFFF;
}
.bottom view:last-child{
padding: 20upx 60upx;
background:#FF5256;
border-radius:44upx;
font-size:30upx;
color:#FFFFFF;
}
.imglist{
width:100%;
padding: 20upx 0upx;
overflow:auto;
position: absolute;
bottom: 0px;
background-color: #ffffff;
}
.imglist view{
display:flex;
justify-content:space-around;
}
.imglist image{
width:200upx;
height:200upx;
border-radius: 10upx;
}
</style>
0 个回复