uniapp-poster v1.0.2

npm下载安装

$ npm install uniapp-poster --save

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

2.import + components

使用

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

事件 event

示例

  // 调用
  <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{
    ...
  }
}