vue-picture-cut 2.x
基于vue和typescript開發(fā)的一款圖片剪裁處理工具
優(yōu)點(diǎn)：原生、輕量、使用簡(jiǎn)單呼寸、功能全面艳汽、擴(kuò)展性強(qiáng)
目前功能：縮放、翻折对雪、旋轉(zhuǎn)河狐、邊緣校驗(yàn)、矩形剪裁慌植、任意(橢)圓剪裁
關(guān)于縮放：鼠標(biāo)（鼠標(biāo)滾輪縮放）甚牲、觸屏（雙指縮放）
github主頁(yè)
碼云主頁(yè)
demo演示(github)
demo演示(碼云)
?? 【升級(jí)日志】
一、使用方法
通過(guò)npm安裝插件
npm install vue-picture-cut
在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文件中單獨(dú)引用
<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對(duì)象
* @param base64 base64字符串
*/
cutChange({ blob, base64 }) {
this.blob = blob;
this.base64 = base64;
}
}
// ...
}
</script>
<style>
@import "~vue-picture-cut/lib/vue-picture-cut.css";
</style>
3、注意
組件在使用時(shí)交汤，寬高跟隨父級(jí)標(biāo)簽雏赦，所以需要設(shè)置父級(jí)標(biāo)簽的寬高。
二芙扎、API
暴露的對(duì)象
全局引入時(shí)
import VuePictureCut from 'vue-picture-cut';
Vue.use(VuePictureCut);
此時(shí)會(huì)注冊(cè)：VuePictureCut星岗、VuePictureCutMask、VuePictureCutMenu三個(gè)組件戒洼。
獨(dú)立引用
import {
VuePictureCut,
VuePictureCutMask,
VuePictureCutMenu,
Bezier,
createAnimation,
Tool,
createUtils
} from 'vue-picture-cut';
組件：VuePictureCut俏橘、VuePictureCutMask、VuePictureCutMenu圈浇。
工具類：Bezier寥掐、createAnimation、Tool磷蜀、createUtils召耘。
1、VuePictureCut組件
slot插槽： default褐隆、menu
使用：
/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>
屬性：
-
src：
類型：string
默認(rèn)：null
描述：圖片鏈接 -
magnification：
類型：number
默認(rèn)：1.5
描述：畫布繪制縮放率污它，取值大于0，值越大繪制的邏輯像素越高 -
initAngle：
類型：number
必須：非必須
描述：載入圖片的初始旋轉(zhuǎn)角度 -
maxPixel：
類型：number
必須：非必須
描述：導(dǎo)出圖片的寬高中較長(zhǎng)邊的像素庶弃，不傳時(shí)則依據(jù)實(shí)際圖片大小自適應(yīng)衫贬。 -
encoderOptions：
類型：number
必須：非必須
描述：導(dǎo)出圖片的壓縮率，不傳時(shí)按0.8計(jì)算歇攻，取值范圍0~1固惯。 -
format：
類型：string
默認(rèn)：false
描述：導(dǎo)出圖片的格式，不傳時(shí)導(dǎo)出格式為“image/jpeg”掉伏，其值可以為“image/png”等瀏覽器支持格式缝呕。 -
mskOption：
類型：object
默認(rèn)：{ width: 1, height: 1, isRound: false, resize: true}
描述：
width：number 裁剪框比例寬
height：number 裁剪框比例高
isRound：boolean 矩形true，橢圓false
resize：boolean 裁剪框大小是否可通過(guò)拖動(dòng)改變大小
color：string 遮罩顏色
borderColor：string 裁剪框顏色 -
rotateControl：
類型：boolean
默認(rèn)：false
描述：是否顯示旋轉(zhuǎn)控件斧散。 -
menuPosition：
類型：string
默認(rèn)：bottom
描述：菜單欄位置供常，取值：top、bottom鸡捐、left栈暇、right。 -
menuThickness：
類型：number
必須：非必須
描述：menuPosition取top箍镜、bottom時(shí)表示菜單欄高度源祈，menuPosition取left、right時(shí)表示菜單欄高度寬度色迂，取值大于0簸喂，等于0時(shí)隱藏菜單欄熙宇。 -
backgroundColor：
類型：string
必須：非必須
描述：組件背景色。
事件：
-
onChange ({ blob, base64 })：監(jiān)聽圖片最終裁剪導(dǎo)出的事件
blob：導(dǎo)出圖片的Blob對(duì)象，可用于圖片上傳
base64：導(dǎo)出圖片的base64字符串纠拔，可用于圖片上傳
方法：
-
this.$refs['pictureCut'].scale(zoom)：縮放圖片
參數(shù)zoom：縮放后的尺寸和當(dāng)前尺寸的比例，取值大于0砰碴，0到1之間縮小九榔，大于1放大。
2侥钳、VuePictureCutMask組件
VuePictureCutMask是VuePictureCut默認(rèn)slot插槽組件适袜，是控制遮罩裁剪框相關(guān)的組件，使用它與不使用它效果一樣舷夺。
使用：
<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-mask
:width="width"
:height="height"
:is-round="isRound"
:resize="resize"
:color="color"
:border-color="borderColor"
/>
</vue-picture-cut>
</template>
屬性：
-
width：
類型：number
默認(rèn)：1
描述：裁剪框比例寬 -
height：
類型：number
默認(rèn)：1
描述：裁剪框比例高 -
isRound：
類型：boolean
默認(rèn)：false
描述：矩形true苦酱，橢圓false -
resize：
類型：boolean
默認(rèn)：false
描述：裁剪框大小是否可通過(guò)拖動(dòng)改變大小 -
color：
類型：string
必須：非必須
描述：遮罩顏色 -
borderColor：
類型：string
必須：非必須
描述：裁剪框顏色
3、VuePictureCutMenu組件
菜單欄組件冕房，效果參見Demo躏啰。
使用：
/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-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>
屬性：
-
cancel：
類型：boolean
默認(rèn)：false
描述：是否顯示取消按鈕。 -
maxPixel：
類型：number
必須：非必須
描述：導(dǎo)出圖片的寬高中較長(zhǎng)邊的像素耙册，不傳時(shí)則依據(jù)實(shí)際圖片大小自適應(yīng)给僵。 -
encoderOptions：
類型：number
必須：非必須
描述：導(dǎo)出圖片的壓縮率，不傳時(shí)按0.8計(jì)算详拙，取值范圍0~1帝际。 -
format：
類型：string
默認(rèn)：false
描述：導(dǎo)出圖片的格式，不傳時(shí)導(dǎo)出格式為“image/jpeg”饶辙，其值可以為“image/png”等瀏覽器支持格式蹲诀。 -
theme：
類型：string
默認(rèn)：'default'
描述：菜單欄主題。取值：'default'弃揽、'dark'脯爪、'gray' -
confirmName：
類型：string
默認(rèn)：'Ok'
描述：確定按鈕的文字 -
cancelName：
類型：string
默認(rèn)：'cancel'
描述：取消按鈕的文字 -
sizeAutoName：
類型：string
默認(rèn)：'auto'
描述：菜單欄按鈕文字 -
sizeRawName：
類型：string
默認(rèn)：'raw'
描述：菜單欄按鈕文字 -
menuRotateName：
類型：string
默認(rèn)：'Rotate'
描述：菜單欄按鈕文字 -
root：
類型：object
必須：不通過(guò)slot方式在外部使用時(shí)则北，必須傳。
描述：取值為VuePictureCut實(shí)例
事件：
onChange ({ blob, base64 })：監(jiān)聽圖片最終裁剪導(dǎo)出的事件痕慢，即點(diǎn)擊確認(rèn)按鈕
blob：導(dǎo)出圖片的Blob對(duì)象尚揣，可用于圖片上傳
base64：導(dǎo)出圖片的base64字符串，可用于圖片上傳onCancel ()：監(jiān)聽點(diǎn)擊取消按鈕
4掖举、Bezier對(duì)象
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) 靜態(tài)屬性BEZIER快骗，是一個(gè)鍵值對(duì)，包含一些預(yù)設(shè)值
| 鍵 | 值 | 說(shuō)明 |
|---|---|---|
| linear | [0.0, 0.0, 1.0, 1.0] | 線性過(guò)渡 |
| ease | [0.25, 0.1, 0.25, 1.0] | 平滑過(guò)渡 |
| 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] | 由慢到快再到慢 |
(2) 構(gòu)造函數(shù)
一個(gè)無(wú)參的構(gòu)造函數(shù)塔次，內(nèi)部調(diào)用了setOptByString('ease')方法
(3) 方法
| 方法名 | 說(shuō)明 | 參數(shù) | 返回值 |
|---|---|---|---|
| setOpt | 設(shè)置貝塞爾曲線類型 | (arg: string , ParamsInterface = 'ease') | Bezier對(duì)象本身 |
| setOptByString | 設(shè)置貝塞爾曲線類型 | BEZIER預(yù)設(shè)值(arg = 'ease') | Bezier對(duì)象本身 |
| setOptByArr | 設(shè)置貝塞爾曲線類型 | (x1: number, y1: number, x2: number, y2: number) | Bezier對(duì)象本身 |
| getPoint | 返回x坐標(biāo)對(duì)應(yīng)的y坐標(biāo)值 | (x: number) 0~1之間 | 對(duì)應(yīng)y坐標(biāo)方篮，0~1之間 |
(4) 參數(shù)ParamsInterface說(shuō)明
ParamsInterface為包含4個(gè)number類型的數(shù)組。
5励负、 createAnimation方法
import { createAnimation } from 'vue-picture-cut';
const animation = createAnimation(option);
createAnimation會(huì)返回一個(gè)Animation對(duì)象
(1) 參數(shù)option
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 必需 | 默認(rèn)值 |
|---|---|---|---|---|---|
| duration | 動(dòng)畫持續(xù)時(shí)間藕溅，單位毫秒 | number | —— | false | 1000 |
| timing | 動(dòng)畫的過(guò)渡類型 | string、number[] | Bezier.BEZIER中的值继榆，或者ParamsInterface類型 | false | ease |
| delay | 動(dòng)畫的延遲時(shí)間蜈垮，單位毫秒 | number | —— | false | 0 |
| iteration | 動(dòng)畫循環(huán)次數(shù)，infinite為無(wú)限循環(huán) | number裕照、string | 'infinite'或正整數(shù) | false | 0 |
| direction | 動(dòng)畫在循環(huán)中是否反向運(yùn)動(dòng) | string | normal(默認(rèn)攒发，正向運(yùn)動(dòng))；reverse(反向運(yùn)行)晋南；alternate(先正向惠猿，后反向，并交替)负间；alternate-reverse(先反向偶妖，后正向，并交替)政溃。 | false | normal |
| change | 回調(diào)函數(shù)趾访，接收參數(shù)x，x在0~1之間董虱，動(dòng)畫在這里處理 | Function | —— | false | —— |
| end | 回調(diào)函數(shù)扼鞋，動(dòng)畫結(jié)束時(shí)執(zhí)行 | Function | —— | false | —— |
(2) Animation對(duì)象方法
| 方法名 | 說(shuō)明 | 參數(shù) | 返回值 |
|---|---|---|---|
| start | 開始動(dòng)畫 | —— | Animation對(duì)象本身 |
| abort | 中止動(dòng)畫 | —— | —— |
6、 Tool對(duì)象
import { Tool } from 'vue-picture-cut';
Tool.loadImg('http://xxx.xxx.xxx/xxx.jpg')
.then(image => {
// 加載圖片成功
// image為Image對(duì)象
}, () => {
// 加載圖片失敗
});
包含方法
loadImg (src: string): Promise<HTMLImageElement>
描述：載入圖片
參數(shù) src：圖片的鏈接
返回 Promise<HTMLImageElement>：略rotatePoint(x: number, y: number, angle: number): Point
描述：將一個(gè)點(diǎn)繞原點(diǎn)旋轉(zhuǎn)angle度后愤诱，計(jì)算新的點(diǎn)的坐標(biāo)
參數(shù) x：點(diǎn)的x坐標(biāo)
參數(shù) y：點(diǎn)的y坐標(biāo)
參數(shù) angle：旋轉(zhuǎn)角度
返回 Point：{x: number, y: number} 新的點(diǎn)clipBy (img: HTMLImageElement, width: number, height: number, showRect: RectFull, encoderOptions = 0.8, format = 'image/jpeg', pathDone?: PathDone): string
描述：根據(jù)坐標(biāo)剪裁圖像
參數(shù) img：Image對(duì)象
參數(shù) width：導(dǎo)出圖片的寬度（px）
參數(shù) height：導(dǎo)出圖片的高度（px）
參數(shù) showRect：RectFull對(duì)象
參數(shù) encoderOptions：壓縮率
參數(shù) format：導(dǎo)出圖片的格式'image/jpeg'云头、'image/png'等
參數(shù) pathDone：自定義路徑的方法PathDone
返回 String：base64clipByRound (img: HTMLImageElement, width: number, height: number, showRect: RectFull, encoderOptions = 0.8, format = 'image/jpeg'): string
描述：根據(jù)坐標(biāo)內(nèi)切圓剪裁圖像
參數(shù) img：略
參數(shù) width：略
參數(shù) height：略
參數(shù) showRect：略
參數(shù) encoderOptions：略
參數(shù) format：略
返回 String：base64clipByMax (img: HTMLImageElement, max = 2000, encoderOptions = 1): ClipResult | void
描述：若圖片寬或高大于max，則壓縮圖片
參數(shù) img：略
參數(shù) max：略
參數(shù) encoderOptions：略
返回 ClipResult | void：返回ClipResult對(duì)象或undefinedbase64ToBlob (base64: string, format = 'image/jpeg'): Blob | null
描述：將base64轉(zhuǎn)Blob對(duì)象
參數(shù) base64：略
參數(shù) format：base64的格式
返回 Blob | null：返回Blob對(duì)象或nullgetEllipseRectByRect(w: number, h: number, angle: number): Rect
描述：將一個(gè)正矩形的內(nèi)切橢圓旋轉(zhuǎn)angle度淫半，計(jì)算該橢圓的外接正矩形溃槐。(假設(shè)矩形中心為原點(diǎn))
參數(shù) w：初始正矩形寬
參數(shù) h：初始正矩形高
參數(shù) angle：逆時(shí)針旋轉(zhuǎn)角度
返回 Rect：返回Rect對(duì)象getRectByRect(w: number, h: number, angle: number): Rect
描述：將一個(gè)正矩形旋轉(zhuǎn)angle度，計(jì)算該矩形的外接正矩形科吭。(假設(shè)矩形中心為原點(diǎn))
參數(shù) w：初始正矩形寬
參數(shù) h：初始正矩形高
參數(shù) angle：逆時(shí)針旋轉(zhuǎn)角度
返回 Rect：返回Rect對(duì)象
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對(duì)象
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
描述：裁剪
參數(shù) maxPixel：導(dǎo)出圖片的寬高中較長(zhǎng)邊的像素猴鲫，不傳時(shí)則依據(jù)實(shí)際圖片大小自適應(yīng)。
參數(shù) encoderOptions：壓縮率
參數(shù) format：導(dǎo)出圖片的格式'image/jpeg'谣殊、'image/png'等
返回 ClipResult | null：略cut(opt?: { maxPixel?: number, encoderOptions?: number, format?: string }): ClipResult | null
描述：裁剪
參數(shù) opt.maxPixel：導(dǎo)出圖片的寬高中較長(zhǎng)邊的像素变隔，不傳時(shí)則依據(jù)實(shí)際圖片大小自適應(yīng)。
參數(shù) opt.encoderOptions：壓縮率
參數(shù) opt.format：導(dǎo)出圖片的格式'image/jpeg'蟹倾、'image/png'等
返回 ClipResult | null：略setMaskRound(isRound = true): void
描述：設(shè)置裁剪框的形狀。
參數(shù) isRound：true (圓形)猖闪，false (矩形)鲜棠。setMaskSize(w: number, h: number): void
描述：設(shè)置剪裁框尺寸
參數(shù) w：比例寬
參數(shù) h：比例高setMaskSizeToOriginal (): void
描述：按圖片寬高比例設(shè)置剪裁框尺寸setMaskResize (resize = true): void
描述：設(shè)置剪裁框是否可拖動(dòng)改變大小
參數(shù) resize：略rotate (angle: number, animation = false): number | void
描述：圖片旋轉(zhuǎn)
參數(shù) angle：逆時(shí)針角度
參數(shù) animation：是否進(jìn)行動(dòng)畫
返回 number | null：圖片旋轉(zhuǎn)后的逆時(shí)針角度rotateTo (angle: number, animation = false): void
描述：圖片旋轉(zhuǎn)指定角度
參數(shù) angle：逆時(shí)針角度
參數(shù) animation：是否進(jìn)行動(dòng)畫setFlipV(animation?: boolean): boolean | void
描述：圖片垂直翻轉(zhuǎn)
參數(shù) animation：是否進(jìn)行動(dòng)畫
返回 boolean | null：和原圖相比，是否翻轉(zhuǎn)了培慌，true (翻轉(zhuǎn))豁陆，false (原始)。setFlipH(animation?: boolean): boolean | void
描述：圖片水平翻轉(zhuǎn)
參數(shù) animation：是否進(jìn)行動(dòng)畫
返回 boolean | null：和原圖相比吵护，是否翻轉(zhuǎn)了盒音，true (翻轉(zhuǎn))，false (原始)馅而。setFlip (sV: boolean, sH: boolean, animation?: boolean): void
描述：圖片翻轉(zhuǎn)
參數(shù) sV：垂直祥诽，true (翻轉(zhuǎn))，false (原始)瓮恭。
參數(shù) sH：水平雄坪，true (翻轉(zhuǎn))，false (原始)屯蹦。
參數(shù) animation：是否進(jìn)行動(dòng)畫scale(zoom: number): void
描述：圖片縮放
參數(shù) zoom：縮放系數(shù)reset(): void
描述：重置圖片狀態(tài)getOptions(): CutOptions | null
描述：獲取組件內(nèi)部當(dāng)前狀態(tài)的參數(shù)维哈。
返回 CutOptions | null：略。
8登澜、 內(nèi)部對(duì)象說(shuō)明
...待編輯
3阔挠、自定義擴(kuò)展
暫時(shí)可以參考src/App.vue和src/lib/views/vue-picture-cut-menu.vue
3.1、自定義裁剪
...文檔待編輯
3.2脑蠕、自定義菜單欄
...文檔待編輯
Ⅲ购撼、希望大家都來(lái)用一下
VuePictureCut ?? you!
