suwis-simpleps v1.0.21

一款迷你的图文合成插件

可用于简单的海报合成类h5制作

HTML

<div ref="poster" style="width:100vw;height:100vh;">

</div>

script 标签引入

<script src="dist/simpleps.min.js"></script>

JAVASCRIPT

import Simpleps from 'suwis-simpleps'

// this.$refs.poster => dom 节点
var sp = new Simpleps(this.$refs.poster)

sp.mixs([{
  type: 'Image',
  src: 'http://xxx.com/xxx.jpg',
  style: {
    x: 0,
    y: 0,
    width: 750,
    height: 1334
  }
}, {
  type: 'Text',
  style: {
    textFill: '#000000',
    opacity: '0.5',
    text: '这是一段文字',
    ...
  }
}])

// 事件

sp.on('load', ()=> {
  // TODO: 图片加载完毕
})

// 方法

// 获取合成图片的base64
sp.toDataURL({
  // 图片类型 默认 image/png
  type: 'image/png',
  // 质量 默认 1
  quality: 0.8
})

// 销毁
sp.dispose()

rich 富文本使用示例

import Simpleps from 'suwis-simpleps'

// this.$refs.poster => dom 节点
var sp = new Simpleps(this.$refs.poster)

sp.mixs([{
  type: 'Text',
  style: {
    textFill: '#000000',
    formatter: '{a|文本一},{b|文本b}',
    rich: {
      a: {
        fontSize: 18
      },
      b: {
        fontSize: 12
      }
    }
  }
}])

合并对象

图片

文字

事件

方法

兼容处理(vue-cli 3.x)

vue.config.js 添加以下配置

module.exports = {
  transpileDependencies: [
    '/node_modules/suwis-simpleps/'
  ]
  ...
}

兼容处理(vue-cli 2.x)

webpack.base.conf.js 添加以下配置

{
   test: /\.js$/,
   loader: 'babel-loader',
   include: [resolve('src'), resolve('test')]
   include: [
     resolve('src'),
     resolve('test'),
     resolve('/node_modules/suwis-simpleps/')
   ]
}