vue-picture-cut 2.x

English | Chinese

Инструмент для вырезания изображений на основе vue и typescript.
Преимущества: Оригинальный, легковесный, простой в использовании, полезный функционал и сильная расширяемость
Функции: Масштабирование, отражение, поворот, проверка границ, прямоугольное вырезание, эллиптическое вырезание
Об анимации масштабирования: мышь (колесо мыши для масштабирования), сенсорный экран (двумя пальцами для масштабирования)

страница проекта на GitHub
страница проекта на Gitee
демо(GitHub)
демо(Gitee)

💩💩💩версия 0.x здесь【Эта версия имеет слишком много ошибок и больше не поддерживается】

🚀 Журнал обновлений

I. Использование

Установка

Использование в Vue

1. Глобальное использование в main.js

import Vue from 'vue';
import 'vue-picture-cut/lib/vue-picture-cut.css';
import VuePictureCut from 'vue-picture-cut';

Vue.use(VuePictureCut);
```2. Или использовать его отдельно в файле `.vue`

```vue
<template>
  <div>
    <input type="file" accept="image/*" @change="inputChange"/>
    <vue-picture-cut :src="src" @on-change="cutChange"/>
  </div>
</template>

<script>
  import { VuePictureCut } from 'vue-picture-cut';

  export default {
    // ...
    components: {
      VuePictureCut
    },
    data() {
      return {
        src: null,
        blob: null,
        base64: null
      };
    },
    methods: {
      inputChange(e) {
        const file = e.target.files[0];
        this.src = URL.createObjectURL(file);
      },
      /**
       * @param {Blob} blob      BLOB объект
       * @param {string} base64    Base64 строка
       */
      cutChange({ blob, base64 }) {
        this.blob = blob;
        this.base64 = base64;
      }
    }
    // ...
  };
</script>
<style>
  @import "~vue-picture-cut/lib/vue-picture-cut.css";
</style>

3. Внимание

При использовании компонентов ширина и высота следуют за родителем, поэтому необходимо установить ширину и высоту родительского контейнера.

II. API

Открытые объекты

Для глобального импорта

import VuePictureCut from 'vue-picture-cut';
Vue.use(VuePictureCut);

Это зарегистрирует: VuePictureCut, VuePictureCutMask, VuePictureCutMenu три компонента.

Отдельное использование

import {
  VuePictureCut,
  VuePictureCutMask,
  VuePictureCutMenu,
  Bezier,
  createAnimation,
  Tool,
  createUtils
} from 'vue-picture-cut';

Компоненты: VuePictureCut, VuePictureCutMask, VuePictureCutMenu. Инструменты: Bezier, createAnimation, Tool, createUtils.

1. Компоненты VuePictureCut

Слоты: default, menu

Использование:

/demo/demo1.html
/demo/demo2.html```vue <vue-picture-cut ref="pictureCut" :src="src" :magnification="magnification" :init-angle="initAngle" :msk-option="mskOption" :max-pixel="maxPixel" :encoder-options="encoderOptions" :format="format" :rotate-control="rotateControl" :menu-position="menuPosition" :menu-thickness="menuThickness" :background-color="backgroundColor" @on-change="onChange" />

**Атрибуты:**

1. `src`:  
   **тип**: string  
   **по умолчанию**: null  
   **описание**: ссылка на изображение

2. `magnification`:  
   **тип**: number  
   **по умолчанию**: 1.5  
   **описание**: коэффициент масштабирования отрисовки канваса, значение должно быть больше 0. Чем выше значение, тем больше логических пикселей будет отрисовано.

3. `initAngle`:  
   **тип**: number  
   **необходимость**: нет  
   **описание**: начальный угол поворота загружаемого изображения

4. `maxPixel`:  
   **тип**: number  
   **необходимость**: нет  
   **описание**: экспортирование пикселей с более длинной стороны изображения. Когда значение не передается, адаптивно вычисляется в зависимости от реального размера изображения.

5. `encoderOptions`:  
   **тип**: number  
   **необходимость**: нет  
   **описание**: степень сжатия экспортируемых изображений. Когда значение не передается, считается как 0.8, диапазон значений 0 ~ 1.

6. `format`:  
   **тип**: string  
   **по умолчанию**: "image/jpeg"  
   **описание**: формат экспортируемого изображения. Когда значение не передается, формат экспорта — "image/jpeg", а также могут использоваться другие поддерживаемые браузером форматы, такие как "image/png".
   
```7. `mskOption`:  
   **тип**: объект  
   **по умолчанию**: `{ width: 1, height: 1, isRound: false, resize: true }`  
   **описание**:  
   width: {число} — соотношение ширины области выреза.  
   height: {число} — соотношение высоты области выреза.  
   isRound: {логическое значение} — прямоугольник — true, эллипс — false.  
   resize: {логическое значение} — можно ли менять размер области выреза при перетаскивании.  
   color: {строка} — цвет маски.  
   borderColor: {строка} — цвет границы области выреза.

8. `rotateControl`:  
   **тип**: логическое значение  
   **по умолчанию**: false  
   **описание**: показывать ли контроль поворота.

9. `menuPosition`:  
   **тип**: строка  
   **по умолчанию**: bottom  
   **описание**: положение панели меню. Возможные значения: top, bottom, left, right.

10. `menuThickness`:  
    **тип**: число  
    **необходимость**: нет  
    **описание**: когда 'menuPosition' равно 'top' или 'bottom', представляет собой высоту панели меню. Когда 'menuPosition' равно 'left' или 'right', представляет собой ширину панели меню. Значение должно быть больше 0. Панель меню скрывается, если значение равно 0.

11. `backgroundColor`:  
    **тип**: строка  
    **необходимость**: нет  
    **описание**: фоновый цвет компонента.

**Событие:** 

1. `onChange({ blob, base64 })`: Отслеживает событие окончательной обрезки и экспорта изображения.  
   blob: Экспортирование объекта Blob изображения, который можно использовать для загрузки изображения.  
   base64: Экспортирование строки Base64 изображения, которая может использоваться для загрузки изображения.**Метод:** 

1. `this.$refs['pictureCut'].scale(zoom)`: Изменение масштаба изображения  
   zoom: коэффициент масштабирования относительно текущего размера. Значение должно быть больше нуля. Значения между OnClickListener 0 и 1 используются для уменьшения, а значения больше 1 — для увеличения.

#### 2. Компонент VuePictureCutMask

Компонент VuePictureCutMask является компонентом по умолчанию в компоненте VuePictureCut. Он связан с контролируемым масштабирующимся коробом обрезки. Его использование имеет ту же эффективность, что и отсутствие его использования.

**Использование:**

[/demo/demo3.html](https://htmlpreview.github.io/?https://raw.githubusercontent.com/987153776/vue-picture-cut/master/demo/demo3.html)

```vue
<template>
  <vue-picture-cut
    :src="src"
    :magnification="magnification"
    :init-angle="initAngle"
    :rotate-control="rotateControl"
    :max-pixel="maxPixel"
    :encoder-options="encoderOptions"
    :format="format"
    :background-color="backgroundColor"
    @on-change="onChange"
  >
    <vue-picture-cut-mask
      :width="width"
      :height="height"
      :is-round="isRound"
      :resize="resize"
      :color="color"
      :border-color="borderColor"
    />
  </vue-picture-cut>
</template>

**Атрибуты:**1. width:
тип: число
по умолчанию: 1
описание: Соотношение ширины короба обрезки.
2. height:
тип: число
по умолчанию: 1
описание: Соотношение высоты короба обрезки.
3. isRound:
тип: логическое значение
по умолчанию: false
описание: прямоугольник — true, эллипс — false.
4. resize:
тип: логическое значение
по умолчанию: false
описание: Может ли размер короба обрезки меняться при перетаскивании.
5. color:
тип: строка
необходимо: нет
описание: Цвет маски.
6. border-color:
тип: строка
необходимо: нет
описание: Цвет короба обрезки.#### 3. Компонент VuePictureCutMenu

Компонент панели меню, см. демо для эффекта.

Использование:

/demo/demo4.html
/demo/demo5.html

<template>
  <vue-picture-cut
    :src="src"
    :magnification="magnification"
    :init-angle="initAngle"
    :rotate-control="rotateControl"
    :msk-option="mskOption"
    @on-change="cutChange"
  >
    <vue-picture-cut-menu
      slot="menu"
      :cancel="false"
      :max-pixel="maxPixel"
      :encoder-options="encoderOptions"
      :format="format"
      :theme="theme"
      confirm-name="OK"
      cancel-name="Отмена"
      size-auto-name="Авто"
      size-raw-name="Сырец"
      menu-rotate-name="Поворот"
      @on-change="onChange"
      @on-cancel="onCancel"
    />
  </vue-picture-cut>
</template>

**Атрибуты:**1. cancel:
тип: boolean
по умолчанию: false
описание: Отображает кнопку "Отмена". 2. maxPixel:
тип: число
необходимость: нет
описание: Экспортировать пиксели длинной стороны изображения. Когда значение не передается, адаптивно согласно реальному размеру изображения. 3. encoderOptions:
тип: число
необходимость: нет
описание: Коэффициент сжатия экспортируемых изображений. Когда значение не передается, вычисляется как 0.8, а диапазон значений — от 0 до 1. 4. format:
тип: строка
необходимость: нет
описание: Формат экспорта изображения. Когда значение не передается, формат экспорта — "image/jpeg", а допустимые значения могут быть "image/png" и другими поддерживаемыми браузерами форматами. 5. theme:
тип: строка
по умолчанию: 'default'
описание: Тема меню. Возможные значения: 'default', 'dark', 'gray'. 6. confirmName:
тип: строка
по умолчанию: 'Ок'
описание: Текст кнопки "Подтвердить". 7. cancelName:
тип: строка
по умолчанию: 'Отмена'
описание: Текст кнопки "Отмена". 8. sizeAutoName:
тип: строка
по умолчанию: 'Авто'
описание: Текст кнопки меню. 9. sizeRawName:
тип: строка
по умолчанию: 'Сырец'
описание: Текст кнопки меню. 10. menuRotateName:
тип: строка
по умолчанию: 'Поворот'
описание: Текст кнопки меню. 11. root:
тип: объект
необходимость: если используется внешний слот, то обязательно передается.Описание: Значение является экземпляром VuePictureCut. **Событие:**1. onChange({ blob, base64 }): Отслеживает событие окончательной обрезки и экспорта изображения.
blob: Экспортируемый объект Blob изображения, который можно использовать для загрузки изображения.
base64: Экспортируемая строка Base64 изображения, которую можно использовать для загрузки изображения.

2. onCancel(): Отслеживает событие нажатия кнопки "Отмена".

4. Объект Безье

import { Bezier } from 'vue-picture-cut';

const bezier = new Bezier();
bezier.setOpt(Bezier.BEZIER['ease-in-out']);
const y = bezier.getPoint(0.5);
console.log(y);

(1) Статическое свойство 'BEZIER', пары ключ-значение, содержащие некоторые предварительно установленные значения.

(2) Конструктор

setOptByString('ease'): Бессоюзный конструктор, внутренне вызывающий метод.

(3) Методы| Название | Описание | Параметры | Возвращаемое значение |

| ---- | ---- | ---- | ---- | | setOpt | Устанавливает тип кривой Безье. | (аргумент: строка, params_interface = 'ease') | Сам объект Безье. | | setOptByString | Устанавливает тип кривой Безье. | Предустановленные значения Безье (аргумент = 'ease') | Сам объект Безье. | | setOptByArr | Устанавливает тип кривой Безье. | (x1: число, y1: число, x2: число, y2: число) | Сам объект Безье. | | getPoint | Возвращает значение координаты Y, соответствующее координате X. | (x: число) Между 0 и 1. | Соответствующее значение координаты Y. |##### (4) Параметры ParamsInterface описание.

ParamsInterface — это массив, содержащий четыре типа чисел.

5. Метод createAnimation

import { createAnimation } from 'vue-picture-cut';

const animation = createAnimation(options);

Метод createAnimation возвращает объект Animation.

(1) Параметры options| ключ | описание | тип | значение | обязательный | по умолчанию |

| ---- | ---- | ---- | ---- | ---- | ---- | | duration | Продолжительность анимации в миллисекундах. | число | —— | нет | 1000 | | timing | Тип перехода анимации. | строка, массив чисел | Bezier.BEZIER константа, или ParamsInterface | нет | ease | | delay | Время задержки анимации, в миллисекундах. | число | —— | нет | 0 | | iteration | Количество циклов анимации, 'infinite' — бесконечность. | число, строка | 'infinite' или положительное целое число | нет | 0 | | direction | Обратное движение анимации в цикле. | строка | normal(по умолчанию. Прямое движение); reverse(Обратное действие); alternate(Сначала прямое, затем обратное, чередование); alternate-reverse(Сначала обратное, затем прямое, чередование). | нет | normal | | change | Коллбэк-функция, принимает параметр x, где x находится между 0 и 1, здесь обрабатывается анимация. | Функция | —— | нет | —— | | end | Коллбэк-функция, выполняется в конце анимации. | Функция | —— | нет | —— |

(2) Методы объекта анимации

import { Tool } from 'vue-picture-cut';

Tool.loadImg('http://xxx.xxx.xxx/xxx.jpg')
.then(image => {
  // Изображение успешно загружено
  // image: объект изображения
}, error => {
  // Не удалось загрузить изображение
});

Методы

...Ожидается доработка

7. Метод createUtils

<template>
  <div>
    <input type="file" accept="image/*" @change="inputChange"/>
    <vue-picture-cut ref="pictureCut" :src="src"/>
    <button @click="doCut">Разрезание</button>
  </div>
</template>

<script>
import { VuePictureCut, createUtils } from 'vue-picture-cut';

export default {
  // ...
  components: {
    VuePictureCut
  },
  data () {
    return {
      utils: null,
      src: null,
      blob: null,
      base64: null
    };
  },
  mounted() {
    this.utils = createUtils(this.$refs['pictureCut']);
  },
  methods: {
    inputChange(e) {
      const file = e.target.files[0];
      this.src = URL.createObjectURL(file);
    },
    doCut() {
      const res = this.utils.cut();
      if (res) {
          this.blob = res.file;   // Объект BLOB
          this.base64 = res.src;  // Строка base64
      }
    }
  }
  // ...
};
</script>

<style>
@import "~vue-picture-cut/lib/vue-picture-cut.css";
</style>

Методы1. cut(maxPixel?: number, encoderOptions?: number, format?: string): ClipResult | null

описание: Разрезание параметр maxPixel: Экспортировать пиксели с самой длинной стороны изображения. параметр encoderOptions: Коэффициент сжатия экспортируемых изображений. параметр format: Формат экспортируемого изображения. При отсутствии переданного значения формат экспорта "image/jpeg". Значение может быть "image/png" и другими поддерживаемыми браузерами форматами. возвращаемое значение ClipResult | null: omit...

2. cut(opt?: { maxPixel?: number, encoderOptions?: number, format?: string }): ClipResult | null описание: Разрезание параметр opt.maxPixel: Экспортировать пиксели с более длинной стороны изображения. параметр opt.encoderOptions: Сжатие экспортированных изображений. параметр opt.format: Формат экспорта изображения. При отсутствии передачи значения, формат экспорта будет "image/jpeg". Значение может быть "image/png" и другими поддерживаемыми браузерами форматами. возврат ClipResult | null: omit...

3. setMaskRound(isRound = true): void описание: Устанавливает форму области выреза. параметр isRound: true (круглый), false (прямоугольный).4. setMaskSize(w: number, h: number): void описание: Устанавливает размер области выреза. параметр w: Ширина области выреза относительно текущего размера. параметр h: Высота области выреза относительно текущего размера.

4. setMaskSizeToOriginal(): void описание: Устанавливает размер области выреза в соответствии с соотношением ширины и высоты изображения.

5. setMaskResize(resize = true): void описание: Может ли размер области выреза изменяться при перетаскивании. параметр resize: Логическое значение, указывающее, может ли размер области выреза изменяться при перетаскивании.

6. rotate(angle: number, animation = false): number | void описание: Поворачивает изображение. параметр angle: Угол поворота против часовой стрелки. параметр animation: Хотите ли вы показывать анимацию? возврат number | null: Угол поворота изображения против часовой стрелки после выполнения операции.

7. rotateTo(angle: number, animation = false): void описание: Поворачивает изображение до указанного угла. параметр angle: Угол поворота против часовой стрелки. параметр animation: Хотите ли вы показывать анимацию?

8. setFlipV(animation?: boolean): boolean | void описание: Горизонтальное отражение изображения. параметр animation: Хотите ли вы показывать анимацию? возврат boolean | null: В сравнении с исходным изображением, отражено ли изображение, true (отражено), false (не отражено).10. setFlipH(animation?: boolean): boolean | void описание: Горизонтальное отражение изображения. параметр animation: Хотите ли вы показывать анимацию? возврат boolean | null: В сравнении с исходным изображением, отражено ли изображение, true (отражено), false (не отражено).11. setFlip(sV: boolean, sH: boolean, animation?: boolean): void описание: Отражение изображения. параметр sV: Вертикальное, true (отражение), false (исходное положение). параметр sH: Горизонтальное, true (отражение), false (исходное положение). параметр animation: Хотите ли вы показывать анимацию?

9. scale(zoom: number): void описание: Изменение масштаба изображения. параметр zoom: Коэффициент изменения размера относительно текущего размера.

10. reset(): void описание: Сброс состояния изображения.

11. getOptions(): CutOptions | null описание: Получает параметры текущего состояния компонента. возврат CutOptions | null: Возвращает параметры текущего состояния компонента или null, если они не установлены.

3. Кастомное расширение

На данный момент обратитесь к src/App.vue и src/lib/views/vue-picture-cut-menu.vue.

3.1. Кастомный обрез

...Ожидается редактирование

3.2. Настройка панели меню

...Ожидается редактирование

3. Добро пожаловать

VuePictureCut 💗 вам!