miniprogram poster, create poster in Wechat mini, image with poster
npm install mp-rox``bash`
npm install mp-rox
yarn add mp-rox
- json
`json`
{
"usingComponents": {
"poster": "mp-rox/poster/poster"
}
}
- wxml
`html
width="{{width}}"
height="{{height}}"
bg="#fff"
items="{{items}}"
catch:textBottom="getTextBottom"
>
`
- js
`js
const { windowWidth: width, windowHeight: height } = wx.getSystemInfoSync()
const canvasWidth = width - 10
const canvasHeight = height - 20
Page({
data: {
width: canvasWidth,
height: canvasHeight,
visible: true,
imageSrc: '',
items: [
{
image: 'https://qa-resource.roxmotor.com/images/634dfd79e4b002e1fc3d9a5d.jpg?imageView2/2/w/350/q/80',
x: 0,
y: 0,
width: canvasWidth,
height: canvasWidth,
},
{
image: '/images/logo1.png',
x: (canvasWidth - 80) / 2,
y: (canvasWidth - 29 - 6),
width: 80,
height: 6,
},
{
text: 'hello',
x: 20,
y: canvasWidth + 24,
size: 30,
family: 'bold',
align: 'left',
color: 'rgba(26, 23, 27, 1)',
},
{
text: 'it is very good',
x: 20,
y: canvasWidth + 24 + 36 + 12,
size: 14,
align: 'left',
family: 'bold',
lineHeight: 24,
color: 'rgba(26, 23, 27, 0.5)',
},
{
image: '/images/logo2.png',
x: 20,
width: 92,
height: 23,
bottom: 12,
},
{
image: '/images/qrcode.png',
x: canvasWidth - 24 - 92,
width: 92,
height: 92,
bottom: 12,
},
],
},
getImage() {
const instance = this.selectComponent('#post')
const response = instance.getImagePath()
this.setData({ imageSrc: response.image })
},
getTextBottom({ detail }) {
},
onLoad(options) {
const { windowWidth, windowHeight } = wx.getSystemInfoSync()
const height = windowHeight - 200
this.data.items.filter(item => item.bottom !== undefined).forEach(item => {
item.y = canvasHeight - item.bottom - item.height
})
this.setData({ items: this.data.items })
},
saveImage() {
const ins = this.selectComponent('#post')
ins.saveImage()
},
})
`
Tip: Both passing and changing the items property cause cavans to redraw, so you might not use the method: drawImage
`js``
const instance = this.selectComponent('#post') // id -> post, you can use className
instance.getImagePath() // get Image Path response -> {image: ''}
- bind:getTextBottom -> get text position after fillText ( wrap words while words is too long, so you need to know the
position that after fillText )
- bind:customAuthTip -> authorize
- bind:saveSuccess -> saveImage successfully
- getImagePath -> get Image Path by this.selectComponent('#post')?.getImagePath()
| property | type | default | description |
| ------------------ | --------------- |------------------------| --------------------------------------------------------------------------------- |
| bg | String | rgba(255, 255, 255, 1) | canvas background / poster image background |
| width | Number / String | windowWidth | canvas width |
| height | Number / String | windowHeight | canvas height |
| canvasStyle | String | "" | canvas Style (tip: use in development) |
| saveSuccessTitle | String | '' | the title that save image successfully (do not show tip when value is null or '') |
| openSettingTitle | String | '' | the modal title that no permission |
| openSettingContent | String | '' | the modal content that no permission |
| items | Array | [] | canvas content info |
Tip: Both passing and changing the items property cause cavans to redraw, so you might not use the method: drawImage
| property | type | description |
|------------|-----------------|------------------------------------------|
| image | String | image path |
| x | Number | position |
| y | Number | position |
| width | Number | image width / text max width |
| height | Number | image height |
| radius | String / Number | image radius |
| line | Number | text line |
| lineHeight | Number | text lineHeight (usefully if wrap words) |
| text | String | content |
| size | Number | content fontSize |
| align | String | text align type |
| color | String | text color |