@sh-rep/super-poster

微信小程序海报帮助工具（原生、uniapp、taro）

安装

# 注意！原生小程序中安装后还需要在开发者工具中构建npm
$ npm i @sh-rep/super-poster

起步

页面展示组件

原生小程序

• 引入 在页面配置 json 中加入组件引用

{
  "usingComponents": {
    "PosterView": "@sh-rep/super-poster/components/mini/posterView/posterView"
  }
}

• 使用

<!-- json为海报的配置json -->
<PosterView json="{{json}}" styles="自定义的style字符串" />

在 uniapp 中使用

• 1、引入 在pages.json中添加 easycom

{
  "easycom":{
		"PosterView":"@sh-rep/super-poster/dist/components/uni/posterView.vue"
	}
}

使用

<!-- json为海报的配置json -->
<PosterView :json="json" styles="自定义的style字符串" />

在 Taro 中使用

import PosterView from '@sh-rep/super-poster/dist/components/taro/posterView';

function TestCom(){
  // json为海报的配置json
  return <PosterView json={json} styles="自定义的style字符串">
}

生成海报

ps:一般是点击生成海报的时候再调用 getPoster，页面展示直接用 PosterView 组件即可

首先需要再 template 中新增一个 canvas 组件

<canvas canvas-id="posterCanvas" id="posterCanvas" type="2d" />

绘制 canvas 海报

import { getPoster } from "@sh-rep/super-poster";
let json = {
  width: 750, //画布宽度
  height: 1125, //画布高度
  displayWidth: 690, //展示宽度
  ratio: 1.5, // 画笔缩放比
  posterFileName: "poster1",
  doms: [
    {
      type: "text", //dom类型
      x: 0, //x坐标
      y: 56, //y坐标
      width: 750, //文本宽度
      value: "宇宙最强最强的小分队", //文本内容
      fontSize: 48, //字体大小
      color: "#212224", //文本颜色
      fontWeight: "bold", //字重
      lineNum: 1, //行数
      textAlign: "center", //左右对其方式
      borderColor: "#000", //文字描边颜色
      borderWidth: 0, //文字描边宽度
      rotate: 0, //旋转角度
      zIndex: 10,
    },
  ],
};
getPoster(json).then((res) => {
  console.log(res.img);
});

配置

config

参数名	类型	参数描述	默认值	是否必传
width	number	画布宽度	-	是
height	number	画布高度	-	是
displayWidth	number	dom 展示的宽度	-	是
ratio	number	画布缩放比	1	否
bgColor	string	画布背景色	-	否
posterFileName	string	海报缓存的文件名	Date.now()	否
useCanvas	auto、canvas、offscreenCanvas	渲染模式	'offscreenCanvas'	否
componentInstance	any	若在组件中调用，则需要传入组件实例	-	否
doms	Array	海报元素列表Doms	-	是

doms

dom 一共有：text、texts、image、block 这几种类型

text

文本

参数名	类型	参数描述	默认值	是否必传
type	string	dom 类型	固定值 text	是
x	number	起点位置 x 坐标	0	否
y	number	起点位置 y 坐标	0	否
value	string	文本内容	-	是
width	number	文本区宽度	config.width	否
fontSize	number	文字大小	-	是
color	string	文字颜色	-	是
fontWeight	string ｜ number	字重	normal	否
lineNum	number	行数	1	否
textAlign	string	对齐方式	left	否
borderColor	string	字体边框颜色	-	否
borderWidth	number	字体边框宽度	-	否
rotate	number	旋转角度	0	否
zIndex	number	元素层级	0	否

例：

{
    type: 'text', //dom类型
    x: 0, //x坐标
    y: 56, //y坐标
    width: 750, //文本宽度
    value: '宇宙最强最强的小分队', //文本内容
    fontSize: 48, //字体大小
    color: '#212224', //文本颜色
    fontWeight: 'bold', //字重
    lineNum: 1, //行数
    textAlign: 'center', //左右对其方式
    borderColor: '#000', //文字描边颜色
    borderWidth: 0, //文字描边宽度
    rotate: 0, //旋转角度
    zIndex: 10,
}

texts

多规格文本

参数名	类型	参数描述	默认值	是否必传
type	string	dom 类型	固定值 texts	是
x	number	起点位置 x 坐标	0	否
y	number	起点位置 y 坐标	0	否
width	number	文本区宽度	config.width	否
textAlign	string	对齐方式	left	否
texts	TextsDom	文本列表	-	是

TextsDom

参数名	类型	参数描述	默认值	是否必传
value	string	文本内容	-	是
fontSize	number	字体大小	-	是
color	string	颜色	#000	否
fontWeight	number ｜ string	字重	normal	否

例：

{
    type: 'texts',
    x: 352, //x坐标
    y: 1025, //y坐标
    width: 317,
    textAlign: 'center',
    texts: [
        {
            value: '-85.5', //文本内容
            fontSize: 48, //字体大小
            color: '#000', //文本颜色
            fontWeight: 'bold', //字重
        },
        {
            value: '斤', //文本内容
            fontSize: 36, //字体大小
            color: '#000', //文本颜色
            fontWeight: 'bold', //字重
        },
    ],
}

image

图片

参数名	类型	参数描述	默认值	是否必传
type	string	dom 类型	固定值 image	是
url	string	图片路径	-	是
x	number	起点位置 x 坐标	0	否
y	number	起点位置 y 坐标	0	否
width	number	图片宽度	config.width	是
height	number	图片高度	config.height	是
borderRadius	number	图片圆角半径	0	否
borderColor	string	图片边框颜色	#000	否
borderWidth	number	图片边框宽度	0	否
rotate	number	旋转角度	0	否
clip	number[][]	图片裁剪的顶点坐标集合 例如[[0,0],[0,100],[100,200],[200,0]]	-	否
zIndex	number	元素层级	0	否

例：

{
    type: 'image',
    url: 'https://hellosanbao-1257196807.cos.ap-chengdu.myqcloud.com/wangyiyun/WechatIMG12.jpeg',
    x: 0,
    y: 0,
    width: 750,
    height: 1125,
    borderWidth: 6,
    borderColor: '#000',
    clip: [[0,0],[0,100],[200,150],[200,0]],
    zIndex: 2,
},

rect

矩形

| 参数名 | 类型 | 参数描述 | 默认值 | 是否必传 | | ------------ | ------------- | --------------- | ----------- | -------- | --- | | type | string | dom 类型 | 固定值 rect | 是 | | x | number | 起点位置 x 坐标 | 0 | 否 | | y | number | 起点位置 y 坐标 | 0 | 否 | | width | number | 宽度 | - | 否 | | height | number | 高度 | - | 否 | | bgColor | string | 背景色 | - | 否 | | borderRadius | Array | number | 圆角 | - | 否 |

block

dom 集合块

参数名	类型	参数描述	默认值	是否必传
type	string	dom 类型	固定值 block	是
x	number	起点位置 x 坐标	0	否
y	number	起点位置 y 坐标	0	否
width	number	宽度	-	否
height	number	高度	-	否
rotate	number	旋转角度	0	否
rotateOrigin	number[x,y]	旋转中心店	-	否
translate	number[x,y]	偏移量	-	否
doms	Doms	dom 列表	-	是

例：

{
    type: 'block',
    x: 0,
    y: 0,
    width: 750,
    height: 1125,
    rotate:10,
    rotateOrigin: [0,0],
    translate: [0, 0],
    doms: [
       {
            type: 'image',
            url: 'https://hellosanbao-1257196807.cos.ap-chengdu.myqcloud.com/wangyiyun/WechatIMG12.jpeg',
            x: 0,
            y: 0,
            width: 750,
            height: 1125,
            borderWidth: 6,
            borderColor: '#000',
            clip: [[0,0],[0,100],[200,150],[200,0]],
            zIndex: 2,
        },
        {
            type: 'text', //dom类型
            x: 0, //x坐标
            y: 56, //y坐标
            width: 750, //文本宽度
            value: '宇宙最强最强的小分队', //文本内容
            fontSize: 48, //字体大小
            color: '#212224', //文本颜色
            fontWeight: 'bold', //字重
            lineNum: 1, //行数
            textAlign: 'center', //左右对其方式
            borderColor: '#000', //文字描边颜色
            borderWidth: 0, //文字描边宽度
            rotate: 0, //旋转角度
            zIndex: 10,
        }
    ],
}