Маленький плагин для объединения изображений и текста

Может использоваться для создания простых постеров и H5

HTML

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

</div>

Вставка скрипта

<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|Текст 1},{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 | Стиль для форматированного текста (rich text) | Объект | 0 | | style.textFill | Цвет текста | String | - | | style.x | Координата x | Число | 0 | | style.y | Координата y | Число | 0 | | style.stroke | Стиль обводки | String | - | | style.textStroke | Цвет обводки текста | String | - | | style.strokeNoScale | Изменяется ли толщина обводки при масштабировании | Логическое | false | | style.textLineWidth | Ширина обводки текста | Число | 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 | Ширина текста | Число | 0 | | style.textHeight | Высота текста | Число | 0 | | style.textLineHeight | Высота строки текста | Число | 0 | | style.textPosition | Позиция текста 'inside', 'left', 'right', 'top', 'bottom' или [x, y] | Строка | 0 | | style.textOffset | Позиционное смещение текста, включая x, y | Число | 0 | | style.textLineHeight | Высота строки текста | Число | 0 | | style.textAlign | Горизонтальное выравнивание текста 'left', 'center', 'right' | Строка | 0 | | style.textVerticalAlign | Вертикальное выравнивание текста 'top', 'middle', 'bottom' | Строка | 0 | | style.shadowBlur | Мера размытия тени текста | Число | 0 | | style.shadowColor | Цвет тени текста | Строка | - | | style.shadowOffsetX | Горизонтальное смещение тени текста | Число | 0 | | style.shadowOffsetY | Вертикальное смещение тени текста | Число | 0 | | style.textShadowColor | Цвет тени текста | Строка | 0 | | style.textShadowBlur | Мера размытия тени текста | Число | 0 | | style.textShadowOffsetX | Горизонтальное смещение тени текста | Число | 0 | | style.textShadowOffsetY | Вертикальное смещение тени текста | Число | 0 |#### События| Имя | Описание | | :--- | :----------- | | load | Событие завершения загрузки изображения |

Методы

Поддержка (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/')
   ]
}