同步操作将从 光年以外/vue-picture-cut 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
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】
1、Inmain.js
Global 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.
When importing globally
import VuePictureCut from 'vue-picture-cut';
Vue.use(VuePictureCut);
This will register:VuePictureCut
、VuePictureCutMask
、VuePictureCutMenu
three components。
Separate using
import {
VuePictureCut,
VuePictureCutMask,
VuePictureCutMenu,
Bezier,
createAnimation,
Tool,
createUtils
} from 'vue-picture-cut';
Components:VuePictureCut
、VuePictureCutMask
、VuePictureCutMenu
。
Tools:Bezier
、createAnimation
、Tool
、createUtils
。
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
:magnification
:initAngle
:maxPixel
:encoderOptions
:format
:mskOption
:{ width: 1, height: 1, isRound: false, resize: true}
rotateControl
:menuPosition
:menuThickness
:backgroundColor
:Event:
onChange ({ blob, base64 })
:Listen to the event that the picture is finally cropped and exported.Method:
this.$refs['pictureCut'].scale(zoom)
:Zoom pictureVuePictureCutMask
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:
<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
:height
:isRound
:resize
:color
:borderColor
: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
:maxPixel
:encoderOptions
:format
:theme
:confirmName
:cancelName
:sizeAutoName
:sizeRawName
:menuRotateName
:root
: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.
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);
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 |
setOptByString('ease')
parameterless constructor that internally calls the a 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. |
ParamsInterface is an array containing four number types.
import { createAnimation } from 'vue-picture-cut';
const animation = createAnimation(option);
'createAnimation' returns a 'Animation' object.
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 | —— |
name | describe | params | return |
---|---|---|---|
start | Start animation. | —— | Animation itself. |
abort | Abort animation. | —— | —— |
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
});
...Waiting for editing
<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>
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...
For the time being, please refer to src/App.vue
and src/lib/views/vue-picture-cut-menu.vue
...Waiting for editing
...Waiting for editing
VuePictureCut 💗 you!
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。