前端海报生成

说明

使用的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');
			}
		}
	}