邀请码页面绘制
This commit is contained in:
zhangmanman
267
components/poster/poster.vue
Normal file
267
components/poster/poster.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<view>
|
||||
<canvas
|
||||
class="my-canvas"
|
||||
canvas-id="myCanvas"
|
||||
id="myCanvas"
|
||||
:style="{'width': `${poster.width}px`, 'height': `${poster.height}px`}"/>
|
||||
<view v-if="state">
|
||||
<view class="posterBack"></view>
|
||||
<view class="poster">
|
||||
<view class="poster-img">
|
||||
<image class="img" :src="invite.cover" mode="widthFix" />
|
||||
</view>
|
||||
<view class="poster-btn">
|
||||
<view class="operate" @tap="saveImage">保存到相册</view>
|
||||
<view class="operate operate-cancel" @tap="close">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { saveImageToPhotosAlbum, showToast, downloadFile } from '@/uni_modules/sakura-canvas/js_sdk/util'
|
||||
import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
|
||||
let draw = null
|
||||
export default {
|
||||
name:"poster",
|
||||
props:{
|
||||
state: '',
|
||||
invite: ''
|
||||
},
|
||||
// data() {
|
||||
// return {
|
||||
// state: false,
|
||||
// poster: {},
|
||||
// posterImg: '',
|
||||
// canvasId: 'myCanvas',
|
||||
// img: 'https://cdn2.xxkucun.com/xxkucun/xiangmu/20210628/593f6211-189b-4df4-9e9c-56ad02ff3352.jpg',
|
||||
// title: '[东鑫记港式茶餐厅]南京东路|魔都新晋爆款茶餐厅来袭！99元抢门',
|
||||
// price: 148,
|
||||
// tips: '这是\n一款非常好用的\n绘图插件',
|
||||
// head: 'https://shop.napi.cc/public/upload/2021/0630/2021063017503669.png',
|
||||
// big: '',
|
||||
// }
|
||||
// },
|
||||
|
||||
created() {
|
||||
console.log(this.$props.state)
|
||||
console.log(this.$props.invite)
|
||||
},
|
||||
// async created(e) {
|
||||
// console.log(e)
|
||||
// },
|
||||
|
||||
methods: {
|
||||
// 生成分享图
|
||||
async createdPoster() {
|
||||
let { img, title, price, head, tips } = this.$props.invite
|
||||
draw = new Draw({
|
||||
width: 375,
|
||||
height: 590,
|
||||
canvasId:'myCanvas',
|
||||
_this: this,
|
||||
background: {
|
||||
type: 'color',
|
||||
color: 'white',
|
||||
w: 375,
|
||||
h: 590,
|
||||
},
|
||||
})
|
||||
let res = await draw.createdSharePoster(({ bgObj }) => {
|
||||
let { width, height } = bgObj
|
||||
this.poster = bgObj
|
||||
// 绘制内容
|
||||
return [
|
||||
// 大图
|
||||
{
|
||||
type: 'image',
|
||||
x: 0,
|
||||
y: 0,
|
||||
src: img,
|
||||
w: width,
|
||||
h: width
|
||||
},
|
||||
// 标题
|
||||
{
|
||||
type: 'text',
|
||||
w: width - (20 * 2),
|
||||
text: title,
|
||||
color: '#333333',
|
||||
font: {
|
||||
size: 16
|
||||
},
|
||||
line: {
|
||||
num: 1
|
||||
},
|
||||
callBack: (before) => {
|
||||
let { sx, ex, sy, ey } = before
|
||||
return {
|
||||
x: sx + 20,
|
||||
y: ey + 20,
|
||||
}
|
||||
}
|
||||
},
|
||||
// 价格
|
||||
{
|
||||
type: 'text',
|
||||
text: `￥${price}`,
|
||||
color: '#fe4755',
|
||||
font: {
|
||||
size: 24
|
||||
},
|
||||
callBack: (before) => {
|
||||
let { sx, ex, sy, ey } = before
|
||||
return {
|
||||
x: sx,
|
||||
w: width - (sx * 2),
|
||||
y: ey + 15,
|
||||
}
|
||||
}
|
||||
},
|
||||
// 虚线
|
||||
{
|
||||
type: 'line',
|
||||
x: 0,
|
||||
w: width,
|
||||
color: '#ff875f',
|
||||
lineType: 'dashed',
|
||||
callBack: (before) => {
|
||||
let { sx, ex, sy, ey } = before
|
||||
return {
|
||||
y: ey + 10,
|
||||
}
|
||||
}
|
||||
},
|
||||
// 二维码
|
||||
{
|
||||
type: 'qrcode',
|
||||
x: 20,
|
||||
size: 100,
|
||||
text: 'https://ext.dcloud.net.cn/plugin?id=5291',
|
||||
image: {
|
||||
src: head,
|
||||
size: 30,
|
||||
r: 10,
|
||||
borderWidth: 7,
|
||||
borderColor: '#ffffff'
|
||||
},
|
||||
callBack: (before) => {
|
||||
let { sx, ex, sy, ey } = before
|
||||
return {
|
||||
y: ey + 15,
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
w: 200,
|
||||
text: tips,
|
||||
color: '#333333',
|
||||
font: {
|
||||
size: 17,
|
||||
},
|
||||
line: {
|
||||
height: 22
|
||||
},
|
||||
callBack: (before, all) => {
|
||||
let { sx, ex, sy, ey, w } = before
|
||||
return {
|
||||
x: sx + w + 30,
|
||||
y: sy + 20,
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
console.log('res', res)
|
||||
if (!res.success) return
|
||||
this.posterImg = res.data
|
||||
this.isShow = true
|
||||
},
|
||||
|
||||
// 保存图片
|
||||
async saveImage() {
|
||||
let { posterImg } = this
|
||||
let res = await saveImageToPhotosAlbum(posterImg)
|
||||
if (!res.success) return
|
||||
showToast('保存成功')
|
||||
this.isShow = false
|
||||
},
|
||||
|
||||
close() {
|
||||
this.isShow = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo{
|
||||
width: 700rpx;
|
||||
height: 400rpx;
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
view, image{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.my-canvas{
|
||||
position: fixed;
|
||||
top: -99999999999rpx;
|
||||
left: -99999999999rpx;
|
||||
z-index: -99999999999;
|
||||
opacity: 0;
|
||||
}
|
||||
.posterBack {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
background-color: rgba(0,0,0,.7);
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.poster{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
&-img{
|
||||
width: 580rpx;
|
||||
position: relative;
|
||||
margin: 70rpx auto 20rpx;
|
||||
background-color: #fff;
|
||||
.img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&-btn{
|
||||
display: flex;
|
||||
padding: $padding $padding * 2;
|
||||
.operate {
|
||||
width: calc(50% - 30rpx);
|
||||
margin: 0 15rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color: $text-price;
|
||||
&-cancel{
|
||||
background-color: #e4e4e4;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user