Image clipping tool based on V

vue-picture-cut 2.x

English | 中文

An image clipping tool based on vue and typescript.
Advantage：It is original, light weight, simple to use, comprehensive function and strong expansibility
Feature：Scale, flip, rotate, edge check, rectangle clip, ellipse clip
About zoom: mouse (mouse wheel zoom), touch screen (double finger zoom)

github homepage
gitee homepage
demo(github)
demo(gitee)

Version 0.x is here【This version has too many bugs and is no longer maintained】

【Update Log】

Ⅰ、Usage Install

Using in Vue

1、Inmain.jsGlobal reference in

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

2、Or use it alone in the .vue file

<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 object * @param base64 Base64 string */ cutChange({ blob, base64 }) { this.blob = blob; this.base64 = base64; } } // ... } </script> <style> @import "~vue-picture-cut/lib/vue-picture-cut.css"; </style>

3、Attention

When components are used, the width and height follow the parent label, so it is necessary to set the width and height of the parent label.

Ⅱ、API Exposed objects

When importing globally

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

This will register：VuePictureCut、VuePictureCutMask、VuePictureCutMenuthree components。

Separate using

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

Components：VuePictureCut、VuePictureCutMask、VuePictureCutMenu。 Tools：Bezier、createAnimation、Tool、createUtils。

1、VuePictureCut Components

Slots： default、menu

Using：

/demo/demo1.html
/demo/demo2.html

<template> <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" /> </template>

Attribute：

src：
type：string
default：null
describe：pictures linking magnification：
type：number
default：1.5
describe：Canvas drawing zoom rate，and the value is greater than 0，The higher the value, the higher the logical pixels drawn. initAngle：
type：number
required：false
describe：Initial rotation angle of loaded image maxPixel：
type：number
required：false
describe：Export the pixels on the longer side of the picture. When the value is not transferred, it is adaptive according to the actual image size. encoderOptions：
type：number
required：false
describe：Compression ratio of exported pictures. When the value is not transferred, it is calculated as 0.8, and the value range is 0 ~ 1. format：
type：string
default：false
describe：Format of exported picture. When no value is transferred, the export format is “image/jpeg”, and the value can be “image/png” and other browser supported formats. mskOption：
type：object
default：{ width: 1, height: 1, isRound: false, resize: true}
describe：
width：{number} Crop box width ratio.
height：{number} Crop box height ratio.
isRound：{boolean} rectangle - true，ellipse - false.
resize：{boolean} Can the crop box size be changed by dragging.
color：{string} Mask color.
borderColor：{string} Crop box color. rotateControl：
type：boolean
default：false
describe：Whether to display the rotation control. menuPosition：
type：string
default：bottom
describe：Location of menu bar. Value：top、bottom、left、right. menuThickness：
type：number
required：false
describe：When 'menuPosition' is equal to 'top' or 'bottom', it represents the height of the menu bar. When 'menuPosition' equals 'left' or 'right', it represents the width of the menu bar. The value is greater than 0. Hide menu bar when equal to 0. backgroundColor：
type：string
required：false
describe：The background color of the component.

Event：

onChange ({ blob, base64 })：Listen to the event that the picture is finally cropped and exported.
blob：Export the Blob object of the picture, which can be used to upload the picture.
base64：Export the Base64 string of the picture, which can be used to upload the picture.

Method：

this.$refs['pictureCut'].scale(zoom)：Zoom picture
zoom：The scale of the scaled size to the current size. The value is greater than 0. Between 0 and 1 is to reduce, and greater than 1 to enlarge. 2、VuePictureCutMask Components

VuePictureCutMask is the default slot component of VuePictureCut. It is related to the control mask crop box. Using it has the same effect as not using it.

Using：

/demo/demo3.html

<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>

Attribute：

width：
type：number
default：1
describe：Crop box width ratio. height：
type：number
default：1
describe：Crop box height ratio. isRound：
type：boolean
default：false
describe：rectangle - true，ellipse - false. resize：
type：boolean
default：false
describe：Can the crop box size be changed by dragging. color：
type：string
required：false
describe：Mask color. borderColor：
type：string
required：false
describe：Crop box color. 3、VuePictureCutMenu Components

Menu bar component, see demo for effect.

Using：

/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="cancel" size-auto-name="auto" size-raw-name="raw" menu-rotate-name="Rotate" @on-change="onChange" @on-cancel="onCancel" /> </vue-picture-cut> </template>

Attribute：

cancel：
type：boolean
default：false
describe：Whether to display the 'cancel' button. maxPixel：
type：number
required：false
describe：Export the pixels on the longer side of the picture. When the value is not transferred, it is adaptive according to the actual image size. encoderOptions：
type：number
required：false
describe：Compression ratio of exported pictures. When the value is not transferred, it is calculated as 0.8, and the value range is 0 ~ 1. format：
type：string
required：false
describe：Format of exported picture. When no value is transferred, the export format is “image/jpeg”, and the value can be “image/png” and other browser supported formats. theme：
type：string
default：'default'
describe：Menu bar theme. Value：'default'、'dark'、'gray'. confirmName：
type：string
default：'Ok'
describe：Text for 'confirm' button. cancelName：
type：string
default：'cancel'
describe：Text for 'cancel' button. sizeAutoName：
type：string
default：'auto'
describe：Menu bar button text. sizeRawName：
type：string
default：'raw'
describe：Menu bar button text. menuRotateName：
type：string
default：'Rotate'
describe：Menu bar button text. root：
type：object
required：If it is not used externally through slot mode, it must be passed.
describe：The value is an instance of 'VuePictureCut'。

Event：

onChange ({ blob, base64 })：Listen to the event that the picture is finally cropped and exported.
blob：Export the Blob object of the picture, which can be used to upload the picture.
base64：Export the Base64 string of the picture, which can be used to upload the picture.

onCancel ()：Listen to 'cancel' button click event.

4、Bezier Object

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); (1) Static attribute 'BEZIER'，a key value pair, contains some default preset.

key	value	describe
linear	[0.0, 0.0, 1.0, 1.0]	Linear transition
ease	[0.25, 0.1, 0.25, 1.0]	Smooth transition
ease-in	[0.42, 0, 1.0, 1.0]	From slow to fast
ease-out	[0, 0, 0.58, 1.0]	From fast to slow
ease-in-out	[0.42, 0, 0.58, 1.0]	From slow to fast and then to slow

(2) constructor

setOptByString('ease') parameterless constructor that internally calls the a method.

(3) Method

name	describe	params	return
setOpt	Set Bezier curve type.	(arg: string , ParamsInterface = 'ease')	Bezier itself.
setOptByString	Set Bezier curve type.	BEZIER preset(arg = 'ease')	Bezier itself.
setOptByArr	Set Bezier curve type.	(x1: number, y1: number, x2: number, y2: number)	Bezier itself.
getPoint	Returns the Y coordinate value corresponding to the X coordinate.	(x: number) Between 0 and 1.	Corresponding y coordinate.

(4) Params ParamsInterface description.

ParamsInterface is an array containing four number types.

5、 createAnimation method

import { createAnimation } from 'vue-picture-cut'; const animation = createAnimation(option);

'createAnimation' returns a 'Animation' object.

(1) Params option

key	describe	type	value	required	default
duration	Animation duration in milliseconds.	number	——	false	1000
timing	Transition type of animation.	string、number[]	Bezier.BEZIER preset，or ParamsInterface	false	ease
delay	The delay time of the animation, in milliseconds.	number	——	false	0
iteration	The number of animation cycles, 'infinite' is infinite.	number、string	'infinite' or positive integer	false	0
direction	Does the animation reverse in the loop.	string	normal(default. Forward motion)；reverse(Reverse operation)；alternate(First forward, then reverse, and alternate)；alternate-reverse(Reverse first, then forward, and alternate)。	false	normal
change	Callback function, receive parameter x, X between 0 ~ 1, animation is processed here.	Function	——	false	——
end	Callback function, executed at the end of the animation.	Function	——	false	——

(2) Animation object method

name	describe	params	return
start	Start animation.	——	Animation itself.
abort	Abort animation.	——	——

6、 Tool Object

import { Tool } from 'vue-picture-cut'; Tool.loadImg('http://xxx.xxx.xxx/xxx.jpg') .then(image => { // Image loaded successfully // image: Image Object }, image => { // Failed to load picture }); Method

...Waiting for editing

7、 createUtils method

<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 Object this.base64 = res.src; // base64 string } } } // ... } </script> <style> @import "~vue-picture-cut/lib/vue-picture-cut.css"; </style> Method

cut(maxPixel?: number, encoderOptions?: number, format?: string): ClipResult | null
describe：cut
param maxPixel：Export the pixels on the longer side of the picture.
param encoderOptions：Compression ratio of exported pictures.
param format：Format of exported picture. When no value is transferred, the export format is “image/jpeg”, and the value can be “image/png” and other browser supported formats.
return ClipResult | null：omit...

cut(opt?: { maxPixel?: number, encoderOptions?: number, format?: string }): ClipResult | null
describe：cut
param opt.maxPixel：Export the pixels on the longer side of the picture.
param opt.encoderOptions：Compression ratio of exported pictures.
param opt.format：Format of exported picture. When no value is transferred, the export format is “image/jpeg”, and the value can be “image/png” and other browser supported formats.
return ClipResult | null：omit...

setMaskRound(isRound = true): void
describe：Sets the shape of the crop box.
param isRound：true (circular)，false (rectangle).

setMaskSize(w: number, h: number): void
describe：Set clipping box size.
param w：Crop box width ratio.
param h：Crop box height ratio.

setMaskSizeToOriginal (): void
describe：Set clipping box size according to picture width height ratio.

setMaskResize (resize = true): void
describe：Can the crop box size be changed by dragging.
param resize：omit...

rotate (angle: number, animation = false): number | void
describe：Pictures rotating.
param angle：Counterclockwise angle.
param animation：Do you want to show animation.
return number | null：Anticlockwise angle of image after rotation.

rotateTo (angle: number, animation = false): void
describe：Rotate the picture at a specified angle.
param angle：Counterclockwise angle.
param animation：Do you want to show animation.

setFlipV(animation?: boolean): boolean | void
describe：Picture vertical flip
param animation：Do you want to show animation.
return boolean | null：Compared with the original image, whether it is flipped, true (flipped), false (original).

setFlipH(animation?: boolean): boolean | void
describe：Picture flip horizontally
param animation：Do you want to show animation.
return boolean | null：Compared with the original image, whether it is flipped, true (flipped), false (original).

setFlip (sV: boolean, sH: boolean, animation?: boolean): void
describe：Pictures flipping.
param sV：Vertical，true (flipping)，false (original)。
param sH：Vorizontal，true (flipping)，false (original)。
param animation：Do you want to show animation.

scale(zoom: number): void
describe：Picture zoom.
param zoom：The scale of the scaled size to the current size.

reset(): void
describe：Reset picture status.

getOptions(): CutOptions | null
describe：Gets the parameter of the current state inside the component.
return CutOptions | null：omit...

3、Custom extension

For the time being, please refer to src/App.vue and src/lib/views/vue-picture-cut-menu.vue

3.1、Custom crop

...Waiting for editing

3.2、Customize the menu bar

...Waiting for editing

三、Welcome

VuePictureCut you!