這款圖片剪裁開源項目，簡直逆天了

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

先來個預覽看看：

功能在線演示站點：

https://htmlpreview.github.io/?https://raw.githubusercontent.com/987153776/vue-picture-cut/master/dist/index.html

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

碼云開源地址：

https://gitee.com/light-year/vue-picture-cut

github開源地址：

https://github.com/987153776/vue-picture-cut

vue-picture-cut 2.x

English | 中文

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

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

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

一、使用方法

通過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>
  <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：略
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、自定義裁剪

...文檔待編輯

片和屬性

本次我們將了解如何在頁面添加圖片，圖片屬性的標簽是<img />,注意圖片屬性是沒有像段落標簽那樣的關閉標簽；如下方所示：

 <img src="./post-img.jpg" />

注：HTML有多種標簽中使用的屬性，屬性的作用是描述元素，src就是屬性，為了描述圖片。圖片的路徑可以是絕對路徑也可以是相對路徑。

除此之外，為了防止圖片顯示不正常，所以我們將給圖片一段描述文字。這個非常重要！也有其他場景可以用到，例如盲人使用網頁可以通過文字閱讀的方式展現給他。如下方所示：

 <img src="./post-img.jpg" alt="HTML 代碼圖片" />

若我們圖片無法顯示，將會如下圖顯示:

現在圖片是放在網頁上面了，但是圖片太大了，我們如何控制圖片的高度和寬度的，這樣就是使用width和height去控制圖片的寬度和高度，默認數值是px像素，現在我們不需要知道像素是什么，等CSS我們細說，如下方所示：

<img src="./post-img.jpg" alt="HTML 代碼圖片" width="500" height="200" />

其他屬性

除了圖片的屬性，還有其他很多屬性，例如頁面的語言元素，在html標簽使用lang=“zh-CN” ,CN代表中文；如下所示：

<html lang="zh-CN">

接著我們看看編碼格式

<head>
 <meta charset="UTF-8" />   
</head>

注：meta元素代表元數據,【charset="UTF-8"】，表示字符集編碼格式為UTF-8

結合上一章，本次我們需要實現的頁面是這樣的

uniapp開發時，富文本里的圖片路徑因為是相對路徑而無法顯示，這時候就需要用正則方式給圖片路徑加上絕對地址（http://域名），讓uniapp能正常顯示。

另外，因為富文本里的圖片因為寬度太寬，導致顯示超出界面，同樣，可以用正則方式加以修正（但推薦采用在uniapp模板里加CSS樣式控制）

1、把uniapp里富文本的圖片相對路徑改為絕對路徑（加上https(s)://域名）的形式，代碼如下：

this.content1 = content1.replace(/\<img src="/gi, '<img src="http://localhost:2000');//content1為富文本里的內容

2、修改富文本里的圖片樣式，代碼如下：

A、推薦方式，即非正則方式：

<view class="detail">
    <rich-text :nodes="content1"></rich-text>
</view>
<style>
    .detail img{max-width:100%;}
</style>

B、正則方式：

在線咨詢

上一篇：38個不可錯過的實用前端工具
下一篇：發光亞克力字廣告牌怎樣做才好看？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

這款圖片剪裁開源項目，簡直逆天了

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、自定義裁剪

片和屬性

其他屬性

您的項目需求

8、內部對象說明