一款迷你的图文合成插件

可用于简单的海报合成类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
      }
    }
  }
}])

合并对象

图片

| 名称 | 描述 | 数据类型 | 默认值 | | :----------------- | :----- | :------------------ | :---- | | type | 指定对象类型 | String | Image | | src | 图片地址 | String | - | | style.x | x坐标 | Number | 0 | | style.y | y坐标 | Number | 0 | | style.width | 宽度 | Number | 0 | | style.height | 高度 | Number | 0 | | style.mode | 裁剪模式 | contain /cover/fill | fill | | style.radius | 圆角 | Number | 0 | | style.textRotation | 旋转角度 | Number | 0 |

文字

| 名称 | 描述 | 数据类型 | 默认值 | | :---------------------- | :------------------------------------------------------- | :------ | :---- | | type | 指定对象类型 | String | Text | | style.text | 文本内容 | String | - | | style.rich | 富文本样式 | Object | 0 | | style.textFill | 文字颜色 | String | - | | style.x | x坐标 | Number | 0 | | style.y | y坐标 | Number | 0 | | style.stroke | 描边样式 | String | - | | style.textStroke | 文字描边颜色 | String | - | | style.strokeNoScale | 描边粗细是否随缩放而改变 | Boolean | false | | style.textLineWidth | 文字描边宽度 | Number | 0 | | style.font | 字体设置 | String | - | | style.fontStyle | 同 CSS font-style | String | 0 | | style.fontWeight | 同 CSS font-weight | String | - | | style.fontSize | 同 CSS font-size | String | - | | style.fontFamily | 同 CSS font-family | String | 0 | | style.textWidth | 文字宽度 | Number | 0 | | style.textHeight | 文字高度 | Number | 0 | | style.textLineHeight | 文字行高 | Number | 0 | | style.textPosition | 文字位置 'inside'、 'left'、 'right'、 'top'、 'bottom' 或 [x, y] | String | 0 | | style.textOffset | 文字位置偏移，包括 x、 y | Number | 0 | | style.textLineHeight | 文字行高 | Number | 0 | | style.textAlign | 文字水平对齐方式 'left'、 'center'、 'right' 默认根据 textPosition 计算 | String | 0 | | style.textVerticalAlign | 文字垂直对齐方式 'top'、 'middle'、 'bottom'，默认根据 textPosition 计算 | String | 0 | | style.shadowBlur | 文字阴影模糊大小 | Number | 0 | | style.shadowColor | 文字阴影颜色 | String | - | | style.shadowOffsetX | 文字阴影横向偏移 | Number | 0 | | style.shadowOffsetY | 文字阴影纵向偏移 | Number | 0 | | style.textShadowColor | 文字阴影颜色 | String | 0 | | style.textShadowBlur | 文字阴影模糊大小 | Number | 0 | | style.textShadowOffsetX | 文字阴影水平偏移 | Number | 0 | | style.textShadowOffsetY | 文字阴影垂直偏移 | Number | 0 |

事件

| 名称 | 描述 | | :--- | :------- | | load | 图片加载完毕事件 |

方法

| 名称 | 描述 | 参数 | 返回值 | | :-------- | :------------ | :--------------------- | :------ | | mixs | 合并图片 | 合并对象数组 | Promise | | toDataURL | 获取合成图片的base64 | {type: 'image/png', quality: 0.8} | Base64 | | dispose | 销毁 | - | - |

兼容处理(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/')
   ]
}