npm下载安装

$ npm install uniapp-poster --save

引用

1.easycom(推荐)

参考uniapp文档: https://uniapp.dcloud.io/collocation/pages?id=easycom

  "easycom": {
    "autoscan": true,
    "custom": {
      "^uniapp-(.*)": "uniapp-poster/main.vue"
    }
  }

2.import + components

参数

|名称|类型|说明| |---|---|---| |canvasId|string|画布id,默认:'poster'| |className|string|自定义样式类名|

使用

  <view>
    <uniapp-poster canvasId="xxx" className="xxx" ref="xxx"/>
    或
    <uniapp-poster ref="xxx">
      // 自定义其他内容
      <view>
        ... 
      </view>
    </uniapp-poster>
  </view>

事件 event

|名称|类型|说明| |---|---|---| |onShowPoster|function(options: object)|画布显示事件| |onSavePoster|function(callback: function)|海报保存事件| |clostPoster|function|关闭海报事件|

onShowPoster - options参数

|名称|类型|必填|说明| |---|---|---|---| |cWindth|number|是|画布宽度，默认值:350,单位:px| |cHeight|number|是|画布高度，默认值:700,单位:px| |hidden|boolean|否|是否隐藏画布| |loadingMsg|string|否|自定义loading标题| |autoSave|boolean|否|是否自动保存，即生成海报后立即执行onSavePoster,默认为false| |autoSize|boolean|否|是否自适应背景图片大小，默认值:false| |scaling|number|否|autoSize为true时,指定与原图缩放比例，默认为1| |autoImg|boolean||指定自适应背景图片，autoSize为true时生效，且此时autoImg必填| |downFileList|array|否|绘画前下载文件数组| |params|array|是|绘画配置|

注意： uniapp默认以375px宽的屏幕为基准动态计算的长度单位. 文档

downFileList (绘画前下载文图片数组)

|名称|类型|必填|说明| |---|---|---|---| |url|string|是|下载url| |key|string|是|图片标识，须于params的key对应|

params (绘画节点配置)

|名称|类型|必填|说明| |---|---|---|---| |x|number|是|节点水平坐标| |y|number|是|节点垂直坐标| |type|string|是|节点类型（text, image, rect）| |width|number/'100%'||节点宽度，注意：当type为text且为换行文本时，width必填. '100%'时为画布宽度| |height|number/'100%'||节点高度. '100%'时为画布高度| |url|string||图片路径，当type为image时生效| |key|string|image时必填|节点标识，当type为image时生效| |text|string|text时必填|文本| |fontSize|number|否|字体大小，当type为text时生效| |isLineFeed|boolean|否|是否换行，当type为text时生效| |fillStyle|string: color|否|填充样式，当type为text时生效| |fillColor|string: color|rect时必填|填充颜色，当type为rect时生效| |radius|number|否|圆角| |isCircle|boolean||是否圆形图片，当type为image时生效(该属性暂未使用)|

示例

  // 调用
  <uniapp-poster ref="poster"/>

  // 事件
  this.$refs.poster.onShowPoster({
    cWidth: 355,
    cHeight: 550,
    // autoSize: true,
    // scaling: 2,
    // autoImg: 'https://xls-static.sibumbg.cn/9a578ea8c4df4875bdf03c990bf9703a.png',
    downFileList: [
      {
        key: 'bgImg', // 对应params子元素key
        url: 'https://xls-static.sibumbg.cn/9a578ea8c4df4875bdf03c990bf9703a.png'
      }
    ],
    params: [
      {
        x:0,
        y:0,
        width: '100%',
        height: '100%',
        type: 'image',
        key: 'bgImg'
      },
      {
        x:10,
        y:50,
        type: 'text',
        text: '我是单行文字',
        fillStyle: '#333',
        fontSize: 12
      },
      {
        x: 10,
        y: 80,
        type: 'text',
        text: '我是换行文字',
        width: 20,
        fillStyle: '#333',
        isLineFeed: 1,
        fontSize: 20
      },
      {
        x: 50,
        y: 100,
        width: 120,
        height: 120,
        type: 'image',
        key: 'qrCode',
        url: 'https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg'
      },
      {
        x: 50,
        y: 250,
        type: 'rect',
        width: 100,
        height: 100,
        radius: 10,
        fillColor: '#6D5289'
      },
    ]
  })

  // style
  .myPoster .poster{
    ...
  }
}