suwis-simpleps

一款迷你的图文合成插件

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