fastposter官方文档

模式

JS-SDK ​

在CodePen中体验 ​

安装 ​

bash
npm install -S fastposter
npm install -S fastposter
bash
yarn add -S fastposter
yarn add -S fastposter
bash
pnpm add -S fastposter
pnpm add -S fastposter
javascript
//<script src="https://unpkg.com/fastposter@1.4.0/dist/main.js"></script> 国内不太稳定
<script src="https://cdn.jsdelivr.net/npm/fastposter@1.4.0/dist/main.min.js"></script>

<script>
  //fastposter 对象已全局挂在 直接使用即可
</script>
//<script src="https://unpkg.com/fastposter@1.4.0/dist/main.js"></script> 国内不太稳定
<script src="https://cdn.jsdelivr.net/npm/fastposter@1.4.0/dist/main.min.js"></script>

<script>
  //fastposter 对象已全局挂在 直接使用即可
</script>

快速模式 ​

方便快速验证，无需后端配合。

token 从应用中心获取

js
import fastposter from 'fastposter'; 

const config={
  token: 'ApfrIzxCoK1DwNZOEJCwlrnv6QZ0PCdv',
  endpoint: 'http://127.0.0.1:5000',//云服务版本不需要该参数
}
fastposter.init(config).buildPoster(
  'xxxx uuid',
  { 'name': '我是一个动态测试数据' }
).then((res:any)=>{
  // 将res 信息直接复制到 img 标签的 src 属性上即可
  // document.getElementById('myImg').src = res
}).catch((err:any)=>{
  console.error(err)
})
import fastposter from 'fastposter'; 

const config={
  token: 'ApfrIzxCoK1DwNZOEJCwlrnv6QZ0PCdv',
  endpoint: 'http://127.0.0.1:5000',//云服务版本不需要该参数
}
fastposter.init(config).buildPoster(
  'xxxx uuid',
  { 'name': '我是一个动态测试数据' }
).then((res:any)=>{
  // 将res 信息直接复制到 img 标签的 src 属性上即可
  // document.getElementById('myImg').src = res
}).catch((err:any)=>{
  console.error(err)
})

参数配置 ​

  1. config 对象参数
属性类型必填说明示例
tokenString是业务token2a72b451834d4c59
endpointString否业务服务器地址https://api.demo.com
typeString否返回图片类型 png jpeg webp pdfpng
scaleFloat否返回图片缩放比例[0.1~1.0] (默认1.0)1.0
b64Boolean否是否将图片以base64编码返回（默认false）true
  1. buildPoster函数参数
属性类型默认值必填说明
uuidstring无是海报的uuid
paramsobject无是海报动态参数，以对象形式传入