这款图片剪裁开源项目，简直逆天了
今天看到一款前端圖片剪裁開(kāi)源項(xiàng)目- vue-picture-cut，基于vue開(kāi)發(fā)，功能太逆天，特來(lái)分來(lái)，建議收藏；
先來(lái)個(gè)預(yù)覽看看：
功能在線演示站點(diǎn)：
https://htmlpreview.github.io/?https://raw.githubusercontent.com/987153776/vue-picture-cut/master/dist/index.html這是一款基于vue和typescript開(kāi)發(fā)的一款圖片剪裁處理工具。優(yōu)點(diǎn)：原生、輕量、使用簡(jiǎn)單、功能全面、擴(kuò)展性強(qiáng)。目前功能：縮放、翻折、旋轉(zhuǎn)、邊緣校驗(yàn)、矩形剪裁、任意(橢)圓剪裁。
碼云開(kāi)源地址：
https://gitee.com/light-year/vue-picture-cutgithub開(kāi)源地址：
https://github.com/987153776/vue-picture-cutvue-picture-cut 2.x
English | 中文
基于vue和typescript開(kāi)發(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演示(碼云)
0.x版本點(diǎn)這里【此版本bug太多，不再維護(hù)】
一、使用方法
通過(guò)npm安裝插件
在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
屬性：
src：
類型：string默認(rèn)：null描述：圖片鏈接
magnification：
類型：number默認(rèn)：1.5描述：畫(huà)布繪制縮放率，取值大于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，橢圓falseresize：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)聽(tīng)圖片最終裁剪導(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)的組件，使用它與不使用它效果一樣。
使用：
/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-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組件
菜單欄組件，效果參見(jiàn)Demo。
使用：
/demo/demo4.html
/demo/demo5.html
屬性：
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)聽(tīng)圖片最終裁剪導(dǎo)出的事件，即點(diǎn)擊確認(rèn)按鈕
blob：導(dǎo)出圖片的Blob對(duì)象，可用于圖片上傳base64：導(dǎo)出圖片的base64字符串，可用于圖片上傳
onCancel ()：監(jiān)聽(tīng)點(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)畫(huà)持續(xù)時(shí)間，單位毫秒 | number | —— | false | 1000 |
timing | 動(dòng)畫(huà)的過(guò)渡類型 | string、number[] | Bezier.BEZIER中的值，或者ParamsInterface類型 | false | ease |
delay | 動(dòng)畫(huà)的延遲時(shí)間，單位毫秒 | number | —— | false | 0 |
iteration | 動(dòng)畫(huà)循環(huán)次數(shù)，infinite為無(wú)限循環(huán) | number、string | 'infinite'或正整數(shù) | false | 0 |
direction | 動(dòng)畫(huà)在循環(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)畫(huà)在這里處理 | Function | —— | false | —— |
end | 回調(diào)函數(shù)，動(dòng)畫(huà)結(jié)束時(shí)執(zhí)行 | Function | —— | false | —— |
(2) Animation對(duì)象方法
方法名
說(shuō)明
參數(shù)
返回值
start | 開(kāi)始動(dòng)畫(huà) | —— | Animation對(duì)象本身 |
abort | 中止動(dòng)畫(huà) | —— | —— |
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：略
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：base64
clipByRound (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：base64
clipByMax (img: HTMLImageElement, max = 2000, encoderOptions = 1): ClipResult | void
描述：若圖片寬或高大于max，則壓縮圖片參數(shù) img：略參數(shù) max：略參數(shù) encoderOptions：略返回 ClipResult | void：返回ClipResult對(duì)象或undefined
base64ToBlob (base64: string, format = 'image/jpeg'): Blob | null
描述：將base64轉(zhuǎn)Blob對(duì)象參數(shù) base64：略參數(shù) format：base64的格式返回 Blob | null：返回Blob對(duì)象或null
getEllipseRectByRect(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)畫(huà)返回 number | null：圖片旋轉(zhuǎn)后的逆時(shí)針角度
rotateTo (angle: number, animation = false): void
描述：圖片旋轉(zhuǎn)指定角度參數(shù) angle：逆時(shí)針角度參數(shù) animation：是否進(jìn)行動(dòng)畫(huà)
setFlipV(animation?: boolean): boolean | void
描述：圖片垂直翻轉(zhuǎn)參數(shù) animation：是否進(jìn)行動(dòng)畫(huà)返回 boolean | null：和原圖相比，是否翻轉(zhuǎn)了，true (翻轉(zhuǎn))，false (原始)。
setFlipH(animation?: boolean): boolean | void
描述：圖片水平翻轉(zhuǎn)參數(shù) animation：是否進(jìn)行動(dòng)畫(huà)返回 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)畫(huà)
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、自定義菜單欄
...文檔待編輯
總結(jié)
以上是生活随笔為你收集整理的这款图片剪裁开源项目，简直逆天了的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 7-7 计算油费(2022-高级语言程序
- 下一篇： AcWing 1018. 最低通行费【动