说明
使用的canvas绘制海报
参数
| 参数 | 说明 |
|---|---|
| width | 海报总体宽度 |
| height | 海报总体高度 |
| views | 需要渲染到海报上面的元素,这是一个Array |
views的属性,更多属性看代码把
| 属性 | 说明 |
|---|---|
| type | 支持image和text |
| width | 宽 |
| height | 高 |
| left | 海报内部距离左边 |
| top | 海报内部距离顶边 |
| src/content | image/text |
需要用到这个canvasPoster.js文件
实现
以下是在uniapp内实现的
<view>
<h1>生成海报</h1>
<button @click="generate">点击生成</button>
<view class="box">
<img :src="hbImg">
</view>
</view>
import {canvas2Img} from '@/pages/index/canvasPoster.js'
export default {
data() {
return {
hbImg: ""
};
},
methods: {
async generate() {
console.log('生成海报');
const resImg = await canvas2Img({
width: '300',
height: '400',
quality: 1,
views: [{
type: 'image',
width: '300',
height: '400',
left: 0,
top: 0,
src: '图片.jpg'
},
{
type: 'text',
content: '这是文字',
width: 300,
fontSize: 20,
fontFamily: 'Arial',
color: '#000',
left: 0,
top: 200,
maxLineNumber: 1,
lineHeight: 30
}
]
})
console.log(resImg);
this.hbImg = resImg;
console.log('lkk');
}
}
}