優質文章，第一時間送達

今天鋒哥看到一款前端圖片剪裁開源項目- vue-picture-cut，基於vue開發，功能太逆天，特來分來，建議收藏；

先來個預覽看看：

功能在線演示站點：

s://htmlpreview.github.io/?http

這事一款基於vue和typescript開發的一款圖片剪裁處理工具。優點：原生、輕量、使用簡單、功能全面、擴展性強。目前功能：縮放、翻折、旋轉、邊緣校驗、矩形剪裁、任意(橢)圓剪裁。

碼雲開源地址：

s://gitee.

github開源地址：

s://github.

vue-picture-cut 2.x

English | 中文

基於vue和typescript開發的一款圖片剪裁處理工具
優點：原生、輕量、使用簡單、功能全面、擴展性強
目前功能：縮放、翻折、旋轉、邊緣校驗、矩形剪裁、任意(橢)圓剪裁
關於縮放：鼠標(鼠標滾輪縮放)、觸屏(雙指縮放)

github主頁
碼雲主頁
demo演示(github)
demo演示(碼雲)

💩💩💩0.x版本點這裏【此版本bug太多，不再維護】

🚀 【升級日誌】

QQ羣: 939576163

一、使用方法

通過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文件中單獨引用

<template>

type="file" accept="image/*" @change="inputChange"/>:src="src" @on-change="cutChange"/>
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對象       * @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、注意

組件在使用時，寬高跟隨父級標籤，所以需要設置父級標籤的寬高。

二、API

暴露的對象

全局引入時

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。

1、VuePictureCut組件

slot插槽： default、menu

使用：

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

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

屬性：

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默認：false描述：導出圖片的格式，不傳時導出格式為“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：類型：number必須：非必須描述：menuPosition取top、bottom時表示菜單欄高度，menuPosition取left、right時表示菜單欄高度寬度，取值大於0，等於0時隱藏菜單欄。
11. backgroundColor：類型：string必須：非必須描述：組件背景色。

事件：

1. onChange ({ blob, base64 })：監聽圖片最終裁剪導出的事件
   blob：導出圖片的Blob對象，可用於圖片上傳
   base64：導出圖片的base64字符串，可用於圖片上傳

方法：

1. this.$refs['pictureCut'].scale(zoom)：縮放圖片
   參數zoom：縮放後的尺寸和當前尺寸的比例，取值大於0，0到1之間縮小，大於1放大。

2、VuePictureCutMask組件

VuePictureCutMask是VuePictureCut默認slot插槽組件，是控制遮罩裁剪框相關的組件，使用它與不使用它效果一樣。

使用：

/demo/demo3.html

<template>:src="src":magnification="magnification":init-angle="initAngle":rotate-control="rotateControl":max-pixel="maxPixel":encoder-options="encoderOptions":format="format":background-color="backgroundColor"@on-change="onChange">:width="width":height="height":is-round="isRound":resize="resize":color="color":border-color="borderColor"/>template>

屬性：

1. width：類型：number默認：1描述：裁剪框比例寬
2. height：類型：number默認：1描述：裁剪框比例高
3. isRound：類型：boolean默認：false描述：矩形true，橢圓false
4. resize：類型：boolean默認：false描述：裁剪框大小是否可通過拖動改變大小
5. color：類型：string必須：非必須描述：遮罩顏色
6. borderColor：類型：string必須：非必須描述：裁剪框顏色

3、VuePictureCutMenu組件

菜單欄組件，效果參見Demo。

使用：

/demo/demo4.html
/demo/demo5.html

<template>:src="src":magnification="magnification":init-angle="initAngle":rotate-control="rotateControl":msk-option="mskOption"@on-change="cutChange">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"/>template>

屬性：

1. cancel：類型：boolean默認：false描述：是否顯示取消按鈕。
2. maxPixel：類型：number必須：非必須描述：導出圖片的寬高中較長邊的像素，不傳時則依據實際圖片大小自適應。
3. encoderOptions：類型：number必須：非必須描述：導出圖片的壓縮率，不傳時按0.8計算，取值範圍0~1。
4. format：類型：string默認：false描述：導出圖片的格式，不傳時導出格式為“image/jpeg”，其值可以為“image/png”等瀏覽器支持格式。
5. theme：類型：string默認：'default'描述：菜單欄主題。取值：'default'、'dark'、'gray'
6. confirmName：類型：string默認：'Ok'描述：確定按鈕的文字
7. cancelName：類型：string默認：'cancel'描述：取消按鈕的文字
8. sizeAutoName：類型：string默認：'auto'描述：菜單欄按鈕文字
9. sizeRawName：類型：string默認：'raw'描述：菜單欄按鈕文字
10. menuRotateName：類型：string默認：'Rotate'描述：菜單欄按鈕文字
11. root：類型：object必須：不通過slot方式在外部使用時，必須傳。描述：取值為VuePictureCut實例

事件：

1. onChange ({ blob, base64 })：監聽圖片最終裁剪導出的事件，即點擊確認按鈕
   blob：導出圖片的Blob對象，可用於圖片上傳
   base64：導出圖片的base64字符串，可用於圖片上傳
2. onCancel ()：監聽點擊取消按鈕

4、Bezier對象

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) 靜態屬性BEZIER，是一個鍵值對，包含一些預設值

(2) 構造函數

一個無參的構造函數，內部調用了setOptByString('ease')方法

(3) 方法

(4) 參數ParamsInterface説明

ParamsInterface為包含4個number類型的數組。

5、 createAnimation方法

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

createAnimation會返回一個Animation對象

(1) 參數option

(2) Animation對象方法

6、 Tool對象

import { Tool } from 'vue-picture-cut';
  Tool.loadImg('http://xxx.xxx.xxx/xxx.jpg')
  .then(image => {// 加載圖片成功// image為Image對象
  }, () => {// 加載圖片失敗
  });

包含方法

1. loadImg (src: string): Promise描述：載入圖片參數 src：圖片的鏈接返回 Promise：略
2. rotatePoint(x: number, y: number, angle: number): Point描述：將一個點繞原點旋轉angle度後，計算新的點的座標參數 x：點的x座標參數 y：點的y座標參數 angle：旋轉角度返回 Point：{x: number, y: number} 新的點
3. clipBy (img: HTMLImageElement, width: number, height: number, showRect: RectFull, encoderOptions = 0.8, format = 'image/jpeg', pathDone?: PathDone): string描述：根據座標剪裁圖像參數 img：Image對象參數 width：導出圖片的寬度(px)參數 height：導出圖片的高度(px)參數 showRect：RectFull對象參數 encoderOptions：壓縮率參數 format：導出圖片的格式'image/jpeg'、'image/png'等參數 pathDone：自定義路徑的方法PathDone返回 String：base64
4. clipByRound (img: HTMLImageElement, width: number, height: number, showRect: RectFull, encoderOptions = 0.8, format = 'image/jpeg'): string描述：根據座標內切圓剪裁圖像參數 img：略參數 width：略參數 height：略參數 showRect：略參數 encoderOptions：略參數 format：略返回 String：base64
5. clipByMax (img: HTMLImageElement, max = 2000, encoderOptions = 1): ClipResult | void描述：若圖片寬或高大於max，則壓縮圖片參數 img：略參數 max：略參數 encoderOptions：略返回 ClipResult | void：返回ClipResult對象或undefined
6. base64ToBlob (base64: string, format = 'image/jpeg'): Blob | null描述：將base64轉Blob對象參數 base64：略參數 format：base64的格式返回 Blob | null：返回Blob對象或null
7. getEllipseRectByRect(w: number, h: number, angle: number): Rect描述：將一個正矩形的內切橢圓旋轉angle度，計算該橢圓的外接正矩形。(假設矩形中心為原點)參數 w：初始正矩形寬參數 h：初始正矩形高參數 angle：逆時針旋轉角度返回 Rect：返回Rect對象
8. getRectByRect(w: number, h: number, angle: number): Rect描述：將一個正矩形旋轉angle度，計算該矩形的外接正矩形。(假設矩形中心為原點)參數 w：初始正矩形寬參數 h：初始正矩形高參數 angle：逆時針旋轉角度返回 Rect：返回Rect對象

7、 createUtils方法

<template>

type="file" accept="image/*" @change="inputChange"/>ref="pictureCut" :src="src"/> @click="doCut">裁剪
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>

包含方法

1. cut(maxPixel?: number, encoderOptions?: number, format?: string): ClipResult | null描述：裁剪參數 maxPixel：導出圖片的寬高中較長邊的像素，不傳時則依據實際圖片大小自適應。參數 encoderOptions：壓縮率參數 format：導出圖片的格式'image/jpeg'、'image/png'等返回 ClipResult | null：略
2. cut(opt?: { maxPixel?: number, encoderOptions?: number, format?: string }): ClipResult | null描述：裁剪參數 opt.maxPixel：導出圖片的寬高中較長邊的像素，不傳時則依據實際圖片大小自適應。參數 opt.encoderOptions：壓縮率參數 opt.format：導出圖片的格式'image/jpeg'、'image/png'等返回 ClipResult | null：略
3. setMaskRound(isRound = true): void描述：設置裁剪框的形狀。參數 isRound：true (圓形)，false (矩形)。
4. setMaskSize(w: number, h: number): void描述：設置剪裁框尺寸參數 w：比例寬參數 h：比例高
5. setMaskSizeToOriginal (): void描述：按圖片寬高比例設置剪裁框尺寸
6. setMaskResize (resize = true): void描述：設置剪裁框是否可拖動改變大小參數 resize：略
7. rotate (angle: number, animation = false): number | void描述：圖片旋轉參數 angle：逆時針角度參數 animation：是否進行動畫返回 number | null：圖片旋轉後的逆時針角度
8. rotateTo (angle: number, animation = false): void描述：圖片旋轉指定角度參數 angle：逆時針角度參數 animation：是否進行動畫
9. setFlipV(animation?: boolean): boolean | void描述：圖片垂直翻轉參數 animation：是否進行動畫返回 boolean | null：和原圖相比，是否翻轉了，true (翻轉)，false (原始)。
10. setFlipH(animation?: boolean): boolean | void描述：圖片水平翻轉參數 animation：是否進行動畫返回 boolean | null：和原圖相比，是否翻轉了，true (翻轉)，false (原始)。
11. setFlip (sV: boolean, sH: boolean, animation?: boolean): void描述：圖片翻轉參數 sV：垂直，true (翻轉)，false (原始)。參數 sH：水平，true (翻轉)，false (原始)。參數 animation：是否進行動畫
12. scale(zoom: number): void描述：圖片縮放參數 zoom：縮放係數
13. reset(): void描述：重置圖片狀態
14. getOptions(): CutOptions | null描述：獲取組件內部當前狀態的參數。返回 CutOptions | null：略。

8、 內部對象説明

...待編輯

3、自定義擴展

暫時可以參考src/App.vue和src/lib/views/vue-picture-cut-menu.vue

3.1、自定義裁剪

...文檔待編輯

3.2、自定義菜單欄

...文檔待編輯

Ⅲ、希望大家都來用一下

VuePictureCut 💗 you!