vue-poster

易用的海报合成组件

Installation

yarn add @fe-tools/vue-poster

Usage

<template>
  <Poster :width="375" :height="600">
    <PosterImage
      :width="375"
      :height="600"
      :offset-y="0"
      :offset-x="0"
      src="/image/path"
    />

    <PosterText>Poster</PosterText>
  </Poster>
</template>

<script>
import { Poster, PosterImage, PosterText } from '@fe-tools/vue-poster'

export default {
  components: {
    Poster,
    PosterImage,
    PosterText
  }
}
</script>

Components

Poster

Attribute	Type	Default	Description
width	Number	300	宽度
height	Number	300	高度
ratio	Number	1	分辨率
type	png | jpeg	jpeg	生成的图片格式
quality	Number	1	生成的图片质量
backgroundColor	String	--	背景色
posterClass	String	--	自定义类名

Slot	Description
default	默认插槽，放置海报组件
loading	海报渲染时的 Loading 组件

Event	CallBack	Description
on-render	(base64: String) => void	监听海报渲染完成事件

PosterImage

Attribute	Type	Default	Description
src	String	--	源文件地址
width	Number	原图宽度	宽度
height	Number	原图高度	高度
offsetX	Number	0	水平偏移像素
offsetY	Number	0	垂直偏移像素
round	Boolean	false	剪切成圆形
cors	Boolean	false	是否允许 CORS

PosterQRCode

Attribute	Type	Default	Description
text	String	--	需要转化成二维码的文本
width	Number	40	宽度
height	Number	40	高度
offsetX	Number	0	水平偏移像素
offsetY	Number	0	垂直偏移像素
margin	Number	「点」尺寸的 2 倍	二维码白边宽度

PosterText

Attribute	Type	Default	Description
width	Number	offsetX 到海报 right 的距离	宽度
height	Number	offsetY 到海报 bottom 的距离	高度
offsetX	Number	0	文本偏移像素
offsetY	Number	0	文本偏移像素
color	String	black	文字颜色
font	String	normal 400 14px sans-serif	文字样式
lineHeight	Number	14	行高
textBaseline	String	alphabetic	基线对齐方式
textOffsetY	Number	0	文本垂直偏移量
border	Boolean	false	是否显示边框

Slot	Description
default	默认插槽，放置需要渲染的文本

PosterTextInline

Attribute	Type	Default	Description
color	String	extends PosterText color	文字颜色
font	String	extends PosterText font	文字样式
nowrap	Boolean	false	是否不允许换行

PosterLoading

Attribute	Type	Default	Description
color	String	#bdbdbd	icon 颜色
backgroundColor	String	rgba(0, 0, 0, 0.7)	蒙层颜色