# vue 图片合成插件

**Repository Path**: answer_wu_admin/suwis-simpleps

## Basic Information

- **Project Name**: vue 图片合成插件
- **Description**: 简单的图片合成插件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-03-10
- **Last Updated**: 2021-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 一款迷你的图文合成插件

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

![16f751da-952d-4f42-8940-70a1257ac24e-image.png](https://upyfuntask.suwis.com/xnit.funtask.club/ef11b47d-9373-4a9e-94fa-6fdbb063088d.png)

##### HTML

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

    </div>

##### script 标签引入

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

##### JAVASCRIPT

```js
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 富文本使用示例

```js
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/')
       ]
    }