Слияние кода завершено, страница обновится автоматически
English | Russian |
Инструмент для обработки изображений с возможностью вырезания, созданный на основе vue и typescript.
Преимущества: нативный, легковесный, простой в использовании, полный набор функций, высокая гибкость расширения.
Среди текущих функций: масштабирование, отражение, поворот, проверка границ, прямоугольное вырезание, произвольное (эллиптическое) вырезание.
Масштабирование осуществляется при помощи мыши (колесо мыши) и прикосновением двух пальцев.
github страница проекта
страница проекта на Gitee
демонстрация (github)
демонстрация (Gitee)
версия 0.x (не рекомендовано) [этот вариант слишком баггожен и больше не поддерживается]
main.js.import Vue from 'vue';
import 'vue-picture-cut/lib/vue-picture-cut.css';
import VuePictureCut from 'vue-picture-cut';
```Vue.use(VuePictureCut);
.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>
Компоненты при использовании следуют размерам родительского тега, поэтому требуется установка ширины и высоты родительского тега.
При глобальном импорте
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.
Слоты: 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`:
**Тип**: object
**По умолчанию**: `{ width: 1, height: 1, isRound: false, resize: true }`
**Описание**:
width: number - ширина пропорций области выреза
height: number - высота пропорций области выреза
isRound: boolean - прямоугольник true, эллипс false
resize: boolean - может ли область выреза меняться вручную
color: string - цвет маски borderColor: string - цвет границ области выреза
8. `rotateControl`:
**Тип**: boolean
**По умолчанию**: false
**Описание**: показывать ли контроллер для поворота.
9. `menuPosition`:
**Тип**: string
**По умолчанию**: bottom
**Описание**: положение меню, возможные значения: top, bottom, left, right.
10. `menuThickness`:
**Тип**: число
**Обязательно**: нет
**Описание**: высота меню при положении top или bottom, ширина меню при положении left или right, значение должно быть больше Yöntem 0, если равно 0, то меню скрывается.
11. `backgroundColor`:
**Тип**: string
**Обязательно**: нет
**Описание**: цвет фона компонента. **Событие:**1. `onChange({blob, base64})`: событие отслеживания окончательной обработки изображения
blob: объект Blob экспортированного изображения, который можно использовать для загрузки изображения
base64: строка Base64 экспортированного изображения, которую можно использовать для загрузки изображения
**Методы:**
1. `this.$refs['pictureCut'].scale(zoom)`: масштабирование изображения
параметр zoom: коэффициент масштабирования, отношение размера после масштабирования к текущему размеру, значение должно быть больше нуля, значения между 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>
cancel:
Тип: boolean
По умолчанию: false
Описание: Отображает кнопку отмены.
maxPixel:
Тип: число
Обязательность: нет
Описание: Количество пикселей самой длинной стороны экспортированного изображения. При отсутствии значения используется реальный размер изображения.
encoderOptions:
Тип: число
Обязательность: нет
Описание: Уровень сжатия экспортированного изображения. По умолчанию равен 0.8, принимает значения в диапазоне от 0 до 1.
format:
Тип: строка
По умолчанию: 'image/jpeg'
Описание: Формат экспорта изображения. По умолчанию 'image/jpeg', может быть 'image/png'.
theme:
Тип: строка
По умолчанию: 'default'
Описание: Тема меню. Возможные значения: 'default', 'dark', 'gray'.6. confirmName:
Тип: string
По умолчанию: 'Подтвердить'
Описание: Текст кнопки подтверждения.
cancelName: Тип: string По умолчанию: 'Отмена' Описание: Текст кнопки отмены.
sizeAutoName: Тип: string По умолчанию: 'автоматически' Описание: Текст кнопки автоматического размера.
sizeRawName: Тип: string По умолчанию: 'сырец' Описание: Текст кнопки сыроматериала.
menuRotateName: Тип: string По умолчанию: 'Поворот' Описание: Текст кнопки поворота.
root: Тип: object Обязательность: да, если не передается через слот Описание: Значение должно быть объектом VuePictureCut.
onChange({blob, base64}): Описание: Слушает событие окончательного вырезания и экспорта изображения, то есть при нажатии кнопки подтверждения. blob: Объект Blob экспортированного изображения, который можно использовать для загрузки изображения. base64: Base64 строка экспортированного изображения, которая также может использоваться для загрузки изображения.
onCancel(): слушает нажатие кнопки "Отмена".
import { Bezier } from 'vue-picture-cut';
const bezier = Bezier();
bezier.setOpt(Bezier.BEZIER['ease-in-out']);
const y = bezier.getPoint(0.5);
console.log(y);
| ---- | -------- | -------- | | linear | [0.0, 0.0, 1.0, 1.0] | Линейное сглаживание | | ease | [0.25, 0.1, 0.25, 1.0] | Гладкое сглаживание | | ease-in | [0.42, 0, 1.0, 1.0] | От медленного до быстрого | | ease-out | [0, 0, 0.58, 1.0] | От быстрого до медленного | | ease-in-out | [0.42, 0, 0.58, 1.0] | От медленного до быстрого и обратно |
Безпараметрический конструктор, внутри которого вызывается метод setOptByString('ease').
| Название метода | Описание | Аргументы | Возвращаемое значение |
|---|---|---|---|
| setOpt | Устанавливает тип кривой Безье | (arg: string, paramsInterface = 'ease') | Объект Bezier |
| setOptByString | Устанавливает тип кривой Безье | Предопределенные значения BEZIER (arg = 'ease') | Объект Bezier |
| setOptByArr | Устанавливает тип кривой Безье | (x1: number, y1: number, x2: number, y2: number) | Объект Bezier |
| getPoint | Возвращает координату Y, соответствующую координате X | (x: number) от 0 до 1 | Координата Y, от 0 до 1 |
ParamsInterface представляет собой массив из четырёх значений типа number.
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, значение которого находится в диапазоне от 0 до 1, используется для управления анимацией | Функция | —— | нет | —— | | end | Коллбэк-функция, выполняется после завершения анимации | Функция | —— | нет | —— |
| --- | --- | --- | --- | | start | Запустить анимацию | —— | Объект Animation | | abort | Прервать анимацию | —— | —— |
import { Tool } from 'vue-picture-cut';
Tool.loadImg('http://xxx.xxx.xxx/xxx.jpg')
.then(image => {
// Успешная загрузка изображения
// image - это объект Image
}, () => {
// Неудачная загрузка изображения
});
loadImg(src: string): Promise<HTMLImageElement>
Описание: Загрузка изображения
Параметр src: Ссылка на изображение
Возвращает Promise>: Не указано
rotatePoint(x: number, y: number, angle: number): Point
Описание: Поворот точки вокруг начала координат на угол angle и вычисление новых координат точки
Параметр x: Координата x точки
Параметр y: Координата y точки
Параметр angle: Угол поворота
Возвращает Point: {x: number, y: number} новая точка
clipBy(img: HTMLImageElement, width: number, height: number, showRect: RectFull, encoderOptions = 0.8, format = 'image/jpeg', pathDone?: PathDone): string
Описание: Вырезание изображения по координатам
Параметр img: Объект Image
Параметр width: Ширина экспортированного изображения (пиксели)
Параметр height: Высота экспортированного изображения (пиксели)
Параметр showRect: Объект RectFull
Параметр encoderOptions: Качество сжатия
Параметр format: Формат экспорта изображения ('image/jpeg', 'image/png')
Параметр pathDone: Метод для указания пути PathDone
Возвращает String: base643. clipByRound(img: HTMLImageElement, width: number, height: number, showRect: RectFull, encoderOptions = 0.8, format = 'image/jpeg'): string
Описание: Вырезание изображения по внутреннему кругу
Параметр img: Элемент изображения
Параметр width: Ширина изображения
Параметр height: Высота изображения
Параметр showRect: Прямоугольник для отображения
Параметр encoderOptions: Параметры кодирования
Параметр format: Формат изображения
Возвращает String: Base64 представление изображения
clipByMax(img: HTMLImageElement, max = 2000, encoderOptions = 1): ClipResult | void
Описание: Если ширина или высота изображения превышает max, то изображение сжимается
Параметр img: Элемент изображения
Параметр max: Максимальное значение
Параметр encoderOptions: Параметры кодирования
Возвращает ClipResult | void: Объект ClipResult или undefined
base64ToBlob(base64: string, format = 'image/jpeg'): Blob | null
Описание: Преобразование base64 в объект Blob
Параметр base64: Base64 строка
Параметр format: Формат base64
Возвращает Blob | null: Объект Blob или null
getEllipseRectByRect(w: number, h: number, angle: number): Rect
Описание: Вращает вписанную в прямоугольник эллипс на угол angle и вычисляет внешний прямоугольник, содержащий этот эллипс. (Предполагается, что центр прямоугольника совпадает с началом координат)
Параметр w: Ширина начального прямоугольника
Параметр h: Высота начального прямоугольника
Параметр angle: Угол поворота против часовой стрелки
Возвращаемое значение Rect: Объект Rect6. getRectByRect(w: number, h: number, angle: number): Rect
Описание: Вращает прямоугольник на угол angle и вычисляет внешний прямоугольник, содержащий этот прямоугольник. (Предполагается, что центр прямоугольника совпадает с началом координат)
Параметр w: Ширина начального прямоугольника
Параметр h: Высота начального прямоугольника
Параметр angle: Угол поворота против часовой стрелки
Возвращаемое значение Rect: Объект Rect#### 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>
cut(maxPixel?: number, encoderOptions?: number, format?: string): ClipResult | null
Описание: Обрезка
Параметр maxPixel: Длина большей стороны экспортируемого изображения в пикселях; если не указано, используется фактический размер изображения.
Параметр encoderOptions: Уровень сжатия
Параметр format: Формат экспортируемого изображения ('image/jpeg', 'image/png' и т.д.)
Возвращаемое значение ClipResult | null: Описание отсутствует
cut(opt?: { maxPixel?: number, encoderOptions?: number, format?: string }): ClipResult | null
Описание: Обрезка
Параметр opt.maxPixel: Максимальное значение пикселей для более длинной стороны изображения при экспорте. При отсутствии значения используется фактический размер изображения.
Параметр opt.encoderOptions: Уровень сжатия
Параметр opt.format: Формат экспорта изображения ('image/jpeg', 'image/png' и т.д.)
Возвращает ClipResult | null: Описание пропущено
setMaskRound(isRound = true): void
Описание: Устанавливает форму области выреза.
Параметр isRound: true (круглая форма), false (прямоугольная форма)4. setMaskSize(w: number, h: number): void
Описание: Устанавливает размер области выреза.
Параметр w: ширина в процентах
Параметр h: высота в процентах
setMaskSizeToOriginal(): void
Описание: Устанавливает размер области выреза в соотношении с шириной и высотой изображения.
setMaskResize(resize = true): void
Описание: Устанавливает возможность изменения размера области выреза.
Параметр resize: true (можно менять размер), false (нельзя менять размер)
rotate(angle: number, animation = false): number | void
Описание: Вращение изображения.
Параметр angle: угол поворота против часовой стрелки
Параметр animation: выполнение анимации
Возвращаемое значение: угол поворота после вращения против часовой стрелки
rotateTo(angle: number, animation = false): void
Описание: Вращение изображения до указанного угла.
Параметр angle: угол поворота против часовой стрелки
направление
Параметр animation: выполнение анимации
setFlipV(animation?: boolean): boolean | void
Описание: Вертикальное отражение изображения.
Параметр animation: выполнение анимации
Возвращаемое значение: true (отражено), false (не отражено)
setFlipH(animation?: boolean): boolean | void
Описание: Горизонтальное отражение изображения.
Параметр animation: выполнение анимации
Возвращаемое значение: true (отражено), false (не отражено)11. setFlip(sV: boolean, sH: boolean, animation?: boolean): void
Описание: Отражение изображения.
Параметр sV: вертикальное отражение, true (отражено), false (не отражено)
Параметр sH: горизонтальное отражение, true (отражено), false (не отражено)
Параметр animation: выполнение анимации12. scale(zoom: number): void
Описание: Изменение масштаба изображения.
Параметр zoom: коэффициент масштабирования
reset(): void
Описание: Сброс состояния изображения
getOptions(): CutOptions | null
Описание: Получение текущих параметров компонента.
Возвращаемое значение: CutOptions | null
На данный момент можно обратиться за примерами к src/App.vue и src/lib/views/vue-picture-cut-menu.vue.
...Документация находится в процессе написания
...Документация находится в процессе написания
Используйте VuePictureCut 💗 вас!
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )