vue-picture-cut 2.x

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

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

?? 【升級日志】

一、使用方法

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

<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對象
       * @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>
  <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
默認：null
描述：圖片鏈接
magnification：
類型：number
默認：1.5
描述：畫布繪制縮放率，取值大于0，值越大繪制的邏輯像素越高
initAngle：
類型：number
必須：非必須
描述：載入圖片的初始旋轉角度
maxPixel：
類型：number
必須：非必須
描述：導出圖片的寬高中較長邊的像素，不傳時則依據實際圖片大小自適應。
encoderOptions：
類型：number
必須：非必須
描述：導出圖片的壓縮率，不傳時按0.8計算，取值范圍0~1。
format：
類型：string
默認：false
描述：導出圖片的格式，不傳時導出格式為“image/jpeg”，其值可以為“image/png”等瀏覽器支持格式。
mskOption：
類型：object
默認：{ width: 1, height: 1, isRound: false, resize: true}
描述：
width：number 裁剪框比例寬
height：number 裁剪框比例高
isRound：boolean 矩形true，橢圓false
resize：boolean 裁剪框大小是否可通過拖動改變大小
color：string 遮罩顏色
borderColor：string 裁剪框顏色
rotateControl：
類型：boolean
默認：false
描述：是否顯示旋轉控件。
menuPosition：
類型：string
默認：bottom
描述：菜單欄位置，取值：top、bottom、left、right。
menuThickness：
類型：number
必須：非必須
描述：menuPosition取top、bottom時表示菜單欄高度，menuPosition取left、right時表示菜單欄高度寬度，取值大于0，等于0時隱藏菜單欄。
backgroundColor：
類型：string
必須：非必須
描述：組件背景色。

事件：

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

方法：

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

2、VuePictureCutMask組件

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

使用：

/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
默認：1
描述：裁剪框比例寬
height：
類型：number
默認：1
描述：裁剪框比例高
isRound：
類型：boolean
默認：false
描述：矩形true，橢圓false
resize：
類型：boolean
默認：false
描述：裁剪框大小是否可通過拖動改變大小
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
默認：false
描述：是否顯示取消按鈕。
maxPixel：
類型：number
必須：非必須
描述：導出圖片的寬高中較長邊的像素，不傳時則依據實際圖片大小自適應。
encoderOptions：
類型：number
必須：非必須
描述：導出圖片的壓縮率，不傳時按0.8計算，取值范圍0~1。
format：
類型：string
默認：false
描述：導出圖片的格式，不傳時導出格式為“image/jpeg”，其值可以為“image/png”等瀏覽器支持格式。
theme：
類型：string
默認：'default'
描述：菜單欄主題。取值：'default'、'dark'、'gray'
confirmName：
類型：string
默認：'Ok'
描述：確定按鈕的文字
cancelName：
類型：string
默認：'cancel'
描述：取消按鈕的文字
sizeAutoName：
類型：string
默認：'auto'
描述：菜單欄按鈕文字
sizeRawName：
類型：string
默認：'raw'
描述：菜單欄按鈕文字
menuRotateName：
類型：string
默認：'Rotate'
描述：菜單欄按鈕文字
root：
類型：object
必須：不通過slot方式在外部使用時，必須傳。
描述：取值為VuePictureCut實例

事件：

onChange ({ blob, base64 })：監聽圖片最終裁剪導出的事件，即點擊確認按鈕
blob：導出圖片的Blob對象，可用于圖片上傳
base64：導出圖片的base64字符串，可用于圖片上傳
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，是一個鍵值對，包含一些預設值

鍵	值	說明
linear	[0.0, 0.0, 1.0, 1.0]	線性過渡
ease	[0.25, 0.1, 0.25, 1.0]	平滑過渡
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) 構造函數

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

(3) 方法

方法名	說明	參數	返回值
setOpt	設置貝塞爾曲線類型	(arg: string , ParamsInterface = 'ease')	Bezier對象本身
setOptByString	設置貝塞爾曲線類型	BEZIER預設值(arg = 'ease')	Bezier對象本身
setOptByArr	設置貝塞爾曲線類型	(x1: number, y1: number, x2: number, y2: number)	Bezier對象本身
getPoint	返回x坐標對應的y坐標值	(x: number) 0~1之間	對應y坐標，0~1之間

(4) 參數ParamsInterface說明

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

5、 createAnimation方法

  import { createAnimation } from 'vue-picture-cut';

  const animation = createAnimation(option);

createAnimation會返回一個Animation對象

(1) 參數option

參數	說明	類型	可選值	必需	默認值
duration	動畫持續時間，單位毫秒	number	——	false	1000
timing	動畫的過渡類型	string、number[]	Bezier.BEZIER中的值，或者ParamsInterface類型	false	ease
delay	動畫的延遲時間，單位毫秒	number	——	false	0
iteration	動畫循環次數，infinite為無限循環	number、string	'infinite'或正整數	false	0
direction	動畫在循環中是否反向運動	string	normal(默認，正向運動)；reverse(反向運行)；alternate(先正向，后反向，并交替)；alternate-reverse(先反向，后正向，并交替)。	false	normal
change	回調函數，接收參數x，x在0~1之間，動畫在這里處理	Function	——	false	——
end	回調函數，動畫結束時執行	Function	——	false	——

(2) Animation對象方法

方法名	說明	參數	返回值
start	開始動畫	——	Animation對象本身
abort	中止動畫	——	——

6、 Tool對象

  import { Tool } from 'vue-picture-cut';

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

包含方法

loadImg (src: string): Promise<HTMLImageElement>
描述：載入圖片
參數 src：圖片的鏈接
返回 Promise<HTMLImageElement>：略
rotatePoint(x: number, y: number, angle: number): Point
描述：將一個點繞原點旋轉angle度后，計算新的點的坐標
參數 x：點的x坐標
參數 y：點的y坐標
參數 angle：旋轉角度
返回 Point：{x: number, y: number} 新的點
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
clipByRound (img: HTMLImageElement, width: number, height: number, showRect: RectFull, encoderOptions = 0.8, format = 'image/jpeg'): string
描述：根據坐標內切圓剪裁圖像
參數 img：略
參數 width：略
參數 height：略
參數 showRect：略
參數 encoderOptions：略
參數 format：略
返回 String：base64
clipByMax (img: HTMLImageElement, max = 2000, encoderOptions = 1): ClipResult | void
描述：若圖片寬或高大于max，則壓縮圖片
參數 img：略
參數 max：略
參數 encoderOptions：略
返回 ClipResult | void：返回ClipResult對象或undefined
base64ToBlob (base64: string, format = 'image/jpeg'): Blob | null
描述：將base64轉Blob對象
參數 base64：略
參數 format：base64的格式
返回 Blob | null：返回Blob對象或null
getEllipseRectByRect(w: number, h: number, angle: number): Rect
描述：將一個正矩形的內切橢圓旋轉angle度，計算該橢圓的外接正矩形。(假設矩形中心為原點)
參數 w：初始正矩形寬
參數 h：初始正矩形高
參數 angle：逆時針旋轉角度
返回 Rect：返回Rect對象
getRectByRect(w: number, h: number, angle: number): Rect
描述：將一個正矩形旋轉angle度，計算該矩形的外接正矩形。(假設矩形中心為原點)
參數 w：初始正矩形寬
參數 h：初始正矩形高
參數 angle：逆時針旋轉角度
返回 Rect：返回Rect對象

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

8、內部對象說明

...待編輯

3、自定義擴展

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

3.1、自定義裁剪

...文檔待編輯

3.2、自定義菜單欄

...文檔待編輯

Ⅲ、希望大家都來用一下

VuePictureCut ?? you!

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

一款移動pc友好又強大的vue圖片裁剪插件

一款移動pc友好又強大的vue圖片裁剪插件

vue-picture-cut 2.x

一、使用方法

通過npm安裝插件

在vue中使用

二、API

暴露的對象

1、VuePictureCut組件

2、VuePictureCutMask組件

3、VuePictureCutMenu組件

4、Bezier對象

(1) 靜態屬性BEZIER，是一個鍵值對，包含一些預設值

(2) 構造函數

(3) 方法

(4) 參數ParamsInterface說明

5、 createAnimation方法

(1) 參數option

(2) Animation對象方法

6、 Tool對象

包含方法

7、 createUtils方法

包含方法

8、內部對象說明

3、自定義擴展

3.1、自定義裁剪

3.2、自定義菜單欄

Ⅲ、希望大家都來用一下

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

一款移動pc友好又強大的vue圖片裁剪插件

vue-picture-cut 2.x

一、使用方法

通過npm安裝插件

在vue中使用

二、API

暴露的對象

1、VuePictureCut組件

2、VuePictureCutMask組件

3、VuePictureCutMenu組件

4、Bezier對象

(1) 靜態屬性BEZIER，是一個鍵值對，包含一些預設值

(2) 構造函數

(3) 方法

(4) 參數ParamsInterface說明

5、 createAnimation方法

(1) 參數option

(2) Animation對象方法

6、 Tool對象

包含方法

7、 createUtils方法

包含方法

8、 內部對象說明

3、自定義擴展

3.1、自定義裁剪

3.2、自定義菜單欄

Ⅲ、希望大家都來用一下

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

8、內部對象說明