268 lines
8.5 KiB
Vue
268 lines
8.5 KiB
Vue
<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>
|