TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

调整绘制背景图

Browse Source
This commit is contained in:
唐明明
2021-09-29 15:43:02 +08:00
parent 6e6270d2cb
commit e168517824
3 changed files with 1 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apis/index.js
View File

@@ -11,7 +11,6 @@ import store from '@/store'
const config = { const config = {
apiUrl : 'https://oapi.lianshang.vip/api/', apiUrl : 'https://oapi.lianshang.vip/api/',
apiUrls : 'https://oapi.lianshang.vip/', apiUrls : 'https://oapi.lianshang.vip/',
// apiUrl : 'http://api.ahxh.shangkelian.cn/api/', // apiUrl : 'http://api.ahxh.shangkelian.cn/api/',
// apiUrls : 'http://api.ahxh.shangkelian.cn/', // apiUrls : 'http://api.ahxh.shangkelian.cn/',
timeout : 60000 timeout : 60000

267
components/poster/poster.vue
View File

@@ -1,267 +0,0 @@
<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>

2
pages/user/code.vue
View File

@@ -96,7 +96,7 @@
async coverCode(){ async coverCode(){
// let { img, title, price, head, tips } = this // let { img, title, price, head, tips } = this
let img = this.inviteData[this.codeIndex].code let img = this.inviteData[this.codeIndex].code
let back = this.defaultImg let back = this.inviteData[this.codeIndex].cover
let name = this.inviteData[this.codeIndex].user_info.nickname let name = this.inviteData[this.codeIndex].user_info.nickname
let invite = this.inviteData[this.codeIndex].invite let invite = this.inviteData[this.codeIndex].invite
let avatar = this.inviteData[this.codeIndex].user_info.avatar || '/static/user/user-portrait.png' let avatar = this.inviteData[this.codeIndex].user_info.avatar || '/static/user/user-portrait.png'