<template>
<view class="content">
<canvas canvas-id="canID" id="canID"></canvas>
</view>
</template>
<script>
import { posterCanvas } from '@/utils/yd-cenvas'
export default {
name:"poster",
props:{
active:{
type:Object,
default:{
activeImg:"https://img1.baidu.com/it/u=3087781904,2825075289&fm=26&fmt=auto&gp=0.jpg"
}
}
},
data() {
return {
arr: [
{
type: 2,
imgCtx: [
// {
// src: 'https://img2.baidu.com/it/u=3731647135,2048570786&fm=26&fmt=auto&gp=0.jpg',
// x: 30,
// y: 30,
// w: 80,
// h: 80,
// isArc: true
// },
{
src: this.active.activeImg,
x: 5,
y: 70,
w: 310,
h: 310,
isArc: false
}
]
},
{
type: 2,
imgCtx: [
{
src: 'https://img2.baidu.com/it/u=3048694672,3208316717&fm=26&fmt=auto&gp=0.jpg',
x: 20,
y: 400,
w: 50,
h: 50
}
]
},
{
type: 1,
textCtx: [
{
color: '#333',
fontSize: 16,
textAlign: 'left',
text: '微信用户',
x: 80,
y: 415
},
{
color: '#333',
fontSize: 14,
textAlign: 'left',
text: '订台:13076545346',
x: 80,
y: 445
}
]
},
{
type: 2,
imgCtx: [
{
src: 'https://img1.baidu.com/it/u=3971381075,863986575&fm=26&fmt=auto&gp=0.jpg',
x: 240,
y: 400,
w: 50,
h: 50
}
]
},
]
}
},
created() {
posterCanvas({
canvasId: 'canID',
arr: this.arr,
bgColor: '#f5f5f5',
cw: 370,
ch: 600
}).then(res => {
console.log(res)
});
}
}
</script>
<style lang="scss" scoped>
#canID {
width: 750upx;
height: 1200upx;
}
</style>
获取js
下载地址https://download.csdn.net/download/weixin_45932157/21698760