说明
使用的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');
}
}
}
标签:海报,text,前端,height,width,resImg,生成,image
From: https://www.cnblogs.com/tn666/p/17489264.html